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鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
vuex进阶知识点巩固
May 20 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
微信小程序静默登录的实现代码
Jan 08 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP实现把数字ID转字母ID
2013/08/12 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
django ajax json的实例代码
2018/05/29 Python
Django 外键的使用方法详解
2019/07/19 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
银行自荐信范文
2013/10/07 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
小学庆六一活动总结
2014/08/28 职场文书
课外访万家心得体会
2014/09/03 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
小学新课改心得体会
2016/01/22 职场文书
nginx rewrite功能使用场景分析
2022/05/30 Servers