vue-cli从零开始实现一个仿豆瓣app(三)
2018-03-04 11:31
691 查看
话说昨天说完首页了,那今天就来说一下列表页。列表页其实很简单,主要就是在首页点击某个类别的按钮就跳转到该列表页,展现该类别的所有影片简介。很显然,四个类别是可以利用同一个组件的,只是渲染的数据有所不同。我们要做的就是根据在首页点击的按钮传入不同的参数,比如1,2,3,4分别代表四个类别,而在列表页就获取这个参数并向服务器请求该类别的数据。
我们在前面做轮播组件的时候给组件绑定了一个跳转事件:
在该组件的data中注册一个etype变量用来保存当前组件所展示的类型,而etype就是从父组件传过来的数据中获取的。
然后点击跳转按钮就会触发相应的方法。
在详细列表页获取该参数即可。
还有一个问题,当列表页中的内容有很多条时我们不可能一下子全部渲染出来吧,所以我就考虑用分页。分页怎么实现:
在列表页的data中我设置了一个变量page用来储存当前所展现的页数,初始为1,然后在created钩子中请求第一页数据。
这样第一次进入页面时就会展现前几条数据。然后绑定一个事件监听是否耍到底部了,如果刷到底部了就触发请求获取下面几条数据。
最后别忘了在离开页面之前去掉绑定事件,不然它绑定的是全局事件,在各个页面都会触发的。
然后数据库那边怎么查询的:
order by desc就是降序排序,也就是从后面的记录往前面查找,找到的就是最新的,limit?,3就是查找从?开始的三个数据。
然后还有最后一个问题就是,我们从列表页点击某一部影片查看它的详细信息之后是有一个按钮可以返回的,设想一下我们千辛万苦翻了几十页之后点击查看某一部影片,返回该页面又是从第一条看起,是不是很不爽?所以就要把这页缓存起来。如何利用vue的keep-alive缓存呢。
我们在入口组件用路由router-link渲染某一组件的部分设置keep-alive<keep-alive> <transition :name='slideto'> <router-view v-if='$route.meta.keepAlive' class='main-view'></router-view> </transition> </keep-alive><transition :name='slideto'> <router-view v-if='!$route.meta.keepAlive' class='main-view'></router-view></transition>
然后在router.js中把不想缓存的页面的meta{keeplive:false},如果想缓存就设为true。在列表页中,每当路由跳转进入之前,做一下判断,如果是从详细页跳转过来的就读取缓存的数据,如果不是就强制刷新页面。在离开之前判断一下如果是调到详细页面就缓存,否则不缓存。
beforeRouteEnter(to,from,next){ if(from.name != 'detail'){//如果不是从详细页面跳转进来 var isRefresh = sessionStorage.getItem('isRefresh'); if(isRefresh == '0'){ //如果不是第一次进入该页面 sessionStorage.setItem('isRefresh',null); window.location.reload(); next(); }else{ sessionStorage.setItem('isRefresh','0'); next(); } }else{ next(); } }
这个页面的内容大概就是这样了。
4000
之后就是最后一个页面,也就是详细页了。
我们在前面做轮播组件的时候给组件绑定了一个跳转事件:
<div class='checkMore'><a @click='goToCheckMore'>查看更多></a></div>
在该组件的data中注册一个etype变量用来保存当前组件所展示的类型,而etype就是从父组件传过来的数据中获取的。
this.etype = this.movies[0][0].etype;
然后点击跳转按钮就会触发相应的方法。
goToCheckMore:function(){ this.$router.push({path:'/seeAllItem',query:{type:this.etype}}); }
在详细列表页获取该参数即可。
this.etype = this.$route.query.type;
还有一个问题,当列表页中的内容有很多条时我们不可能一下子全部渲染出来吧,所以我就考虑用分页。分页怎么实现:
在列表页的data中我设置了一个变量page用来储存当前所展现的页数,初始为1,然后在created钩子中请求第一页数据。
created:function(){ this.etype = this.$route.query.type; var _this = this; this.$axios.post('/api/film/getAllItem',{'etype':_this.$route.query.type,page:this.page}).then(function( res ){ _this.itemList = res.data; _this.page++; //注意每次请求获得数据了就把page自增一,如果请求返回结果没有数据说明没有更多数据就不自增 }).catch(function(err){ console.log(err); }); }
这样第一次进入页面时就会展现前几条数据。然后绑定一个事件监听是否耍到底部了,如果刷到底部了就触发请求获取下面几条数据。
mounted:function(){ window.addEventListener('scroll',this.loadMore); }
loadMore:function(){ var top = window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop; //被卷起部分的高度 var windowHeight = document.documentElement.clientHeight; //窗口大小 var totalHeight = document.documentElement.scrollHeight; //内容总高度 if(top+windowHeight >= totalHeight){ //已到达底部 this.isLoadingMore = true; this.noMore = false; var _this = this; this.$axios.post('/api/film/getAllItem',{'etype':_this.$route.query.type,page:this.page}).then(function( res ){ if(res.data=='-1'){ //没有更多数据可加载 _this.isLoadingMore = false; _this.noMore = true; }else{ //服务器返回了下一页的数据 _this.isLoadingMore = false; _this.noMore = false; _this.itemList = _this.itemList.concat(res.data); //将加载的更多数据追加到数组中 _this.page++; //因为不知道是否还有更多数据所以page++,下次请求时就是请求下一页啦 } }).catch(function(err){ console.log(err); }); } }
最后别忘了在离开页面之前去掉绑定事件,不然它绑定的是全局事件,在各个页面都会触发的。
beforeDestroy:function(){ window.removeEventListener('scroll',this.loadMore); }
然后数据库那边怎么查询的:
router.post('/getAllItem',function( request , response ){ var type = request.body.etype; //请求要获取的影片类型 var page = (request.body.page-1)*3; //当前请求页数,因为我设定的是每次请求三条所以是*3,数据库索引是从0开始的所以要-1 var queryGetAll = $sql.film.query_all_item; conn.query(queryGetAll,[type,page],function( err , result ){ if(err){ console.log(err); } if(result[0]!==undefined){ response.send(result); }else{ response.send('-1'); } }); });
query_all_item:'select * from entertainment where etype = ? order by eno desc limit ?,3',
order by desc就是降序排序,也就是从后面的记录往前面查找,找到的就是最新的,limit?,3就是查找从?开始的三个数据。
然后还有最后一个问题就是,我们从列表页点击某一部影片查看它的详细信息之后是有一个按钮可以返回的,设想一下我们千辛万苦翻了几十页之后点击查看某一部影片,返回该页面又是从第一条看起,是不是很不爽?所以就要把这页缓存起来。如何利用vue的keep-alive缓存呢。
我们在入口组件用路由router-link渲染某一组件的部分设置keep-alive<keep-alive> <transition :name='slideto'> <router-view v-if='$route.meta.keepAlive' class='main-view'></router-view> </transition> </keep-alive><transition :name='slideto'> <router-view v-if='!$route.meta.keepAlive' class='main-view'></router-view></transition>
然后在router.js中把不想缓存的页面的meta{keeplive:false},如果想缓存就设为true。在列表页中,每当路由跳转进入之前,做一下判断,如果是从详细页跳转过来的就读取缓存的数据,如果不是就强制刷新页面。在离开之前判断一下如果是调到详细页面就缓存,否则不缓存。
beforeRouteLeave(to,from,next){ if(to.name == 'detail'){ //如果是跳转进详细信息页面,则缓存当前页面 from.meta.keepAlive = true; }else{ //跳转进其他页面则不缓存 from.meta.keepAlive = false; } next(); }
beforeRouteEnter(to,from,next){ if(from.name != 'detail'){//如果不是从详细页面跳转进来 var isRefresh = sessionStorage.getItem('isRefresh'); if(isRefresh == '0'){ //如果不是第一次进入该页面 sessionStorage.setItem('isRefresh',null); window.location.reload(); next(); }else{ sessionStorage.setItem('isRefresh','0'); next(); } }else{ next(); } }
这个页面的内容大概就是这样了。
4000
之后就是最后一个页面,也就是详细页了。
相关文章推荐
- vue-cli从零开始实现一个仿豆瓣app(一)
- vue-cli从零开始实现一个仿豆瓣app(五)
- vue-cli从零开始实现一个仿豆瓣app(四)
- 从零开始打造一个新闻订阅APP之Android篇(四、实现仿微信发图界面)
- vue实现app问题总结(一)vue-cli本地开发数据Mock
- Mac下用vue-cli+webpack+bootstrap实现一个todolist(二)
- Mac下用vue-cli+webpack+bootstrap实现一个todo-list(一)
- 从零开始打造一个新闻订阅APP之爬虫篇(二、实现一个简单的爬虫系统)
- 从零开始打造一个新闻订阅APP之服务器篇(二、类时间片轮转算法+redis sorted set 实现“逛”功能)
- 从零开始打造一个新闻订阅APP之Android篇(一、实现仿微信主界面效果)
- 从零开始打造一个新闻订阅APP之Android篇(二、从“逛”页面谈谈多种格式listview的实现细节)
- 最近做一个安卓的手机APP项目涉及到手机号注册登录,怎么实现
- 我有一个 APP 创意,如何将其实现?
- 高逼格,超简单,实现App自动更新,一个方法搞定
- 【安卓】安卓App开发思路 一步一个脚印(十五)实现闪屏的优化
- 仿豆瓣APP项目之二:Vue全家桶的使用
- 菜鸟进阶--node+vue实现一个商城Demo(2):多条件模糊搜索+分页
- 基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应
- vue-cli中实现全选、单选计算总价格(vue2.0)
- vue-cli起的webpack项目 用localhost可以访问,但是切换到ip就不可以访问 我用的是vux起的一个项目(移动端,基于vue的),因为是移动端的,需要在手机上测试,发现用