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 相关文章推荐
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 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
自定义PHP分页函数
2006/10/09 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
JavaScript 常用函数
2009/12/30 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
Angular2整合其他插件的方法
2018/01/20 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
教你安装python Django(图文)
2013/11/04 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
Python 加密与解密小结
2018/12/06 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
python实现双人五子棋(终端版)
2020/12/30 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
公司授权委托书范文
2014/09/21 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
六年级语文教学反思
2016/03/03 职场文书
文书工作总结(范文)
2019/07/11 职场文书