VUE---资源导航
发表于
浏览量1186
评论数1
VUE---资源导航
祝大家六一儿童节快乐啊！
目录
- 前言
- 使用
- 代码相关
前言
咕咕咕，本来是一直处于咕咕咕但没完全咕咕咕的状态的，之前挖的好多坑都处于闲置状态，“图片墙”也在做了，但由于涉及到模块化开发，之前都没接触过，一时间很难一口吞下，便想着还是先系统学习再说，然后就闲置了很久，这次做的是一个导航网页，之前做过的，但是那会儿没有后端，用JS存储数据，又由于数据也算比较多了，实现一些功能就使得网页耗费设备资源实在太多，再加上是Github page，国内访问又巨慢，所以使用体验极差，旧版导航网址：https://pixlips.github.io ,现在重新写了一下页面，与以往不同，这次使用了热门前端框架Vue.js，就很方便，之前使用的模板引擎的EL表达式，本来这个导航刚开始我其实也是想用直接用模版引擎渲染输出的，但是后来有些功能实现非常不便，便改用了Vue。
至于为什么突然爆肝
（其实也不肝，只是之前太摸鱼了）就比较感谢群里的好兄弟，由于自己QQ会员过期了，群降级人数就限制了，本来自己就很摸鱼了，连每日搬运都鸽了，没想到知道群降级了，一些群友给我众筹买会员，妈耶莫名被感动到。所以我肯定不能辜负群友的热情啊。
- 伤封（164651394）
- 最废崽（807861499）
- 雨儿（3188504976）
- 宰了徐凤年（1321725331）
- 因为我是你妈（2728663929）
- 轻风！喵！（1664354401）
- ［有人@我］（3153929282）
非常感谢以上群友，说好的福利也在摸了。
使用
导航主页：
https://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：六一儿童节快乐啊！
