Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019-12-08 07:09
1856 查看
本文实例讲述了Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能。分享给大家供大家参考,具体如下:
1、分页
商品列表的分页实现是后台根据前端请求的页面大小、页码位置,去数据库中查询指定位置的数据然后返回给前端。比如页面大小为8,要查第3页的数据,则跳过2*8条数据,然后返回接下来的8条数据。
实现滚动加载:页面刚一加载完成并不需要请求所有数据,只显示一部分。当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中。通过vue-infinite-scroll插件实现滚动加载,在框架末尾插入加载div,并且可以在其中放入加载动画
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"> <img v-if="showLoading" src="../../static/loading-svg/loading-spinning-bubbles.svg">//加载的矢量动画 </div>
通过busy可以控制是否启用加载,在loadMore函数中定义你的加载操作,然后通过setTimeout按时间间隔响应加载请求
new Vue({ el: '#app', data: { data: [], busy: false //一开始不用加载 }, methods: { loadMore(){ //滚动加载操作 this.busy = true; setTimeout(() => { this.page++; this.getGoodsList(true); }, 1000); } } });
2、排序
商品按价格排序在服务器端实现,通过mongoose中的sort函数对数据库查询结果按price关键字排序,之后返回给前端。在前端发送排序请求:
sortPrice(){ //按价格排序 this.sortFlag=this.sortFlag==1?-1:1; this.page=1; this.getGoodsList(); }
其中1为升序,-1降序,排序之后需要将页码置1,然后再去请求商品列表
3、按价格筛选
服务器端根据前端请求的最大值(priceGt)、最小值(priceLt)去数据库中查询指定价位之间的商品并返回给前端,利用mongoose的查询函数find中的params参数中设置$gt,$lt查询指定区间的商品
let params={ salePrice:{$gt:req.query.priceGt,$lt:req.query.priceLt} };
商品前端请求:
getGoodsList(split){ let param={ //设置get请求的参数 pageSize:this.pageSize, page:this.page, sortFlag:this.sortFlag, priceGt:this.priceGt, priceLt:this.priceLt }; this.showLoading=true; //启用加载svg动画 axios.get("/goods",{ params:param }).then(response =>{ let res=response.data; if(res.status==0){ if(split){ //split==true,需要滚动追加页数 this.goodsList=this.goodsList.concat(res.result.list); if(res.result.count==0){ //返回0条数据,禁用滚动 this.busy=true; }else{ this.busy = false; } }else{ this.goodsList=res.result.list; } }else{ console.log("从服务器请求数据失败!"); } });
服务器端处理:
router.get('/',(req,res,next)=>{ //获取get请求中的参数 let pageSize=parseInt(req.query.pageSize); let page=parseInt(req.query.page); let sortFlag=req.query.sortFlag; let skipPiece=(page-1)*pageSize; //分页查询,跳过前面skip条数据 let params={ salePrice:{$gt:req.query.priceGt,$lt:req.query.priceLt} }; //利用goods模板调用mongooseAPI进行数据库查询、排序、跳到指定页 let goodsModel=goods.find(params).sort({'salePrice':sortFlag}).skip(skipPiece).limit(pageSize); goodsModel.exec((err,goodsDoc)=>{ "use strict"; if (err){ res.json({ status:1, msg:err.message }) }else { res.json({ //利用res将查询结果返回 status:0, msg:'', result:{ count:goodsDoc.length, list:goodsDoc } }) } }) });
希望本文所述对大家vue.js程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实践:实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Vue+nodeJS:商品的分页、排序、筛选、添加购物车
- vue+node 购物车列表功能实现
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Asp.Net Ajax+WCF Service+ADO.NET Entity Framework实现数据列表,数据筛选,分页,排序,删除
- vuejs实现本地数据的筛选分页功能思路详解
- vue实现添加删除,筛选,还有自定义全局过滤器的功能
- vue实现的购物车商品累加结算功能代码
- 基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
- ecshop为商品列表添加销量排序功能
- 16、购物车结构说明、购物车模块搭建、购物陈商品列表空时添加新购物车、uuid作为未登录下的key、未登录购物车验证功能后端代码、购物车前端显示、数量增减、登录后购物车列表、合并登录和没登录的购物车
- Vue.js实现开发购物车功能的方法详解
- 关于bootstrap分页,模态框,实现邮件列表的分页,和模态框添加邮件的功能
- 【转】实现多条件筛选、搜索、排序及分页的表格功能
- 详解Vue demo实现商品列表的展示
- VUE实现移动端列表筛选功能
- 利用VUE框架,实现列表分页功能示例代码
- 编写一个简易购物车,实现向购物车内添加商品,移除指定商品及清空购物车功能。