Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解


Posted in Javascript onDecember 07, 2019

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
js document.write()使用介绍
Feb 21 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
json解析大全 双引号、键值对不在一起的情况
Dec 06 #Javascript
js实现图片粘贴到网页
Dec 06 #Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 #Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 #Javascript
微信小程序实现滚动加载更多的代码
Dec 06 #Javascript
You might like
咖啡知识大全
2021/03/03 新手入门
如何开发一个虚拟域名系统
2006/10/09 PHP
解析php中const与define的应用区别
2013/06/18 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
让Python代码更快运行的5种方法
2015/06/21 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python工厂函数用法实例分析
2018/05/14 Python
对Python实现累加函数的方法详解
2019/01/23 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
路政管理毕业自荐书范文
2014/02/10 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
学生检讨书
2015/01/27 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
python字符串的多行输出的实例详解
2021/06/08 Python
React forwardRef的使用方法及注意点
2021/06/13 Javascript
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫