VUE---资源导航
发表于
浏览量1248
评论数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:六一儿童节快乐啊!