kasuie page cover

VUE---资源导航

发表于

浏览量1248

评论数1

VUE---资源导航

祝大家六一儿童节快乐啊!

E2xRZEWVgAMvNA1.jpg

目录

  • 前言
  • 使用
  • 代码相关

前言

咕咕咕,本来是一直处于咕咕咕但没完全咕咕咕的状态的,之前挖的好多坑都处于闲置状态,“图片墙”也在做了,但由于涉及到模块化开发,之前都没接触过,一时间很难一口吞下,便想着还是先系统学习再说,然后就闲置了很久,这次做的是一个导航网页,之前做过的,但是那会儿没有后端,用JS存储数据,又由于数据也算比较多了,实现一些功能就使得网页耗费设备资源实在太多,再加上是Github page,国内访问又巨慢,所以使用体验极差,旧版导航网址:https://pixlips.github.iohttps://pixlips.github.io ,现在重新写了一下页面,与以往不同,这次使用了热门前端框架Vue.js,就很方便,之前使用的模板引擎的EL表达式,本来这个导航刚开始我其实也是想用直接用模版引擎渲染输出的,但是后来有些功能实现非常不便,便改用了Vue。

90077053_p0.jpg

至于为什么突然爆肝(其实也不肝,只是之前太摸鱼了)就比较感谢群里的好兄弟,由于自己QQ会员过期了,群降级人数就限制了,本来自己就很摸鱼了,连每日搬运都鸽了,没想到知道群降级了,一些群友给我众筹买会员,妈耶莫名被感动到。所以我肯定不能辜负群友的热情啊。

  • 伤封(164651394)
  • 最废崽(807861499)
  • 雨儿(3188504976)
  • 宰了徐凤年(1321725331)
  • 因为我是你妈(2728663929)
  • 轻风!喵!(1664354401)
  • [有人@我](3153929282)

非常感谢以上群友,说好的福利也在摸了。

使用

导航主页https://kasuie.top/navhttps://kasuie.top/nav ,博客导航栏也添加了,更多->导航,可查看。 把自己浏览器的书签整理后做的此网页,旨在节省时间,本网页不提供直接下载资源和代理功能,如遇下载不了or网页打不开,还请自行科学上网。请使用主流浏览器浏览本网页,最好是谷歌。如遇其他问题or建议,请邮箱联系我。 暂时一共9个大的分类,分为动漫(57),漫画(31),游戏(26),小说(14),图片(36),软件(61),网站(71),插件(30),影视(15)。可根据tag筛选。

代码相关

EL表达式和Vue对比

EL表达式:

<li th:each="navItem:${navItems}" v-for="navItem in navItems" class="navItem">
      <div><span th:text="${navItem.type}" class="type"></span><ul><li class="tag">全部</li><li th:each="tag:${navItem.tags}" th:text="${tag}" class="tag" th:onclick="|tags(${navItem.typeId},event)|"></li></ul></div>
           <ul th:id="'id'+${navItem.typeId}">
                <li th:each="site:${navItem.getSitesItems()}" class="site"><a href="" th:href="${site.url}" th:text="${site.name}" target="_blank" th:title="${site.comment}"></a><span th:text="${site.comment}!=null?${site.comment}:'暂未添加描述'">测试</span></li>
           </ul>
</li>

Vue:

<li v-for="navItem in navItems" class="navItem" v-bind:class="'navItem'+navItem.typeId">
     <div><span v-text=navItem.type class="type"></span><ul><span class="tag_icon"><img src="" th:src="@{/static/img/tag.png}" alt="tag"></span><li class="tag" :class="tagFlag[1]==''||tagFlag[1]==null?'tagAll':''" @click="tags(navItem.typeId,event)">全部</li><li v-for="tag in navItem.tags" v-text=tag class="tag" :class="tagFlag[0]==navItem.typeId&tagFlag[1]==tag?'tagShow':''" @click="tags(navItem.typeId,event)"></li></ul></div>
           <ul :id="'id'+navItem.typeId" class="ul_site">
                  <li v-for="site in navItem.sitesItems" class="site"><a v-bind:href="site.url" v-text="site.name" target="_blank" :title="site.comment"></a><span v-text="site.comment!=null?site.comment:'暂未添加描述'">测试</span></li>
           </ul>
</li>

tag功能实现: 起初是想的在后端根据tag划分好,再将数据传回,以下是后端相关代码:

    @GetMapping("/nav/{typeId}/{tag}")
    public List<NavItem> tags(@PathVariable Integer typeId, @PathVariable String tag, Model model){
        List<NavItem> navItems = new ArrayList<>();
        List<String> tags = new ArrayList<>();
        List<Site> siteItems;
        for (int i = 0; i < 9; i++) {
            siteItems = navService.queryByTid(i);
            tags = getTags(siteItems);
            navItems.add(i,new NavItem(i,type[i],siteItems,tags));
        }
        //根据tag筛选
        NavItem navItem = navItems.get(typeId);
        List<Site> sites = new ArrayList<>();
        for (Site site : navItem.getSitesItems()){
            if (site.getTags().contains(tag)){
                sites.add(site);
            }
        }
        navItem.setSitesItems(sites);
        navItems.set(typeId,navItem);
        model.addAttribute("navItems",navItems);
        return navItems;
    }

由于这样请求就太多了,还有页面展示不太方便,便将数据处理在前端实现,以下是前端相关代码:

tags: function(tid,e){
                let typeId = tid;
                let tag = e.target.innerHTML;
                let that = this;
                tag=='全部'?that.tagFlag[1] = '':that.tagFlag[1] = tag;
                tag=='全部'?that.tagFlag[0] = -1:that.tagFlag[0] = typeId;
                let sites =new Array();
                that.navItems = JSON.parse(JSON.stringify(that.temp));
                if (tag!='全部'){
                    sites = that.temp[typeId].sitesItems;
                    let i = 0;
                    for (let index in sites){
                        if (sites[index].tags.indexOf(tag)!=-1){
                            that.navItems[typeId].sitesItems[i]=sites[index];
                            i++;
                        }
                    }
                    that.navItems[typeId].sitesItems = that.navItems[typeId].sitesItems.splice(0,i);
                }
            },

navItems存储的输出数据,页面每一次请求返回的数据将会保存在其中,另外还有一个temp变量,因为根据tag筛选后将会改变永久navItems内数据,所以将最初从后端请求的数据备份保存在temp中,以便点击“全部”tag能够恢复全部数据。

更多功能待实现······

最后

写作环境:学校

心情OS:六一儿童节快乐啊!

90069478_p0.jpg
最后修改:2022年04月27日

留下你的评论吧

http(s)://

回到顶部