Vue nodejs商城项目-商品的分页、排序、筛选

1、分页

    商品列表的分页实现是后台根据前端请求的页面大小、页码位置，去数据库中查询指定位置的数据然后返回给前端。比如页面大小为8，要查第3页的数据，则跳过2*8条数据，然后返回8条数据。

    在实现滚动加载时，页面刚一加载完成并不需要请求所有数据，当用户下拉到页面底部时，再去请求数据并拼接到商品数据列表中。

    通过vue-infinite-scroll插件实现滚动加载，在框架末尾插入加载div，并且可以在其中放入加载动画

1. <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">  
2.   <img v-if="showLoading" src="../../static/loading-svg/loading-spinning-bubbles.svg">//加载动画  
3. </div>  

    通过busy可以控制是否启用加载，在loadMore函数中定义你的加载操作，然后通过setTimeout按时间间隔响应加载请求

1. new Vue({  
2.   el: '#app',  
3.   data: {  
4.     data: [],  
5.     busy: false  
6.   },  
7.   methods: {  
8.     loadMore(){//滚动加载插件  
9.       this.busy = true;  
10.       setTimeout(() => {  
11.         this.page++;  
12.         this.getGoodsList(true);  
13.       }, 1000);  
14.     }  
15.   }  
16. });  

 

2、排序

    商品按价格排序主要是利用nodejs的mongoose中的sort函数对数据库查询结果按price关键字排序，之后返回给前端。在前端发送排序请求： 

1.     sortPrice(){//按价格排序  
2.       this.sortFlag=this.sortFlag==1?-1:1;  
3.       this.page=1;  
4.       this.getGoodsList();  
5.     }  

其中1为升序，-1降序，排序之后需要将页码置1，然后再去请求商品列表

3、按价格筛选

    后端根据前端请求的最大值(priceGt)、最小值(priceLt)去数据库中查询指定价位之间的商品并返回给前端，利用mongoose的查询find函数中的params参数中设置$gt,$lt查询指定区间的商品    

1. let params={  
2.     salePrice:{$gt:req.query.priceGt,$lt:req.query.priceLt}  
3.   };  

商品前端请求：

1. getGoodsList(split){  
2.       let param={//get请求的参数  
3.         pageSize:this.pageSize,  
4.         page:this.page,  
5.         sortFlag:this.sortFlag,  
6.         priceGt:this.priceGt,  
7.         priceLt:this.priceLt  
8.  };  
9.       this.showLoading=true;         //启用加载svg动画  
10.       axios.get("/goods",{  
11.           params:param  
12.       }).then(response =>{  
13.         let res=response.data;  
14.         if(res.status==0){  
15.           if(split){                //split==true，需要滚动追加页数  
16.             this.goodsList=this.goodsList.concat(res.result.list);  
17.             if(res.result.count==0){//返回0条数据，禁用滚动  
18.               this.busy=true;  
19.             }else{  
20.               this.busy = false;  
21.             }  
22.           }else{  
23.             this.goodsList=res.result.list;  
24.           }  
25.         }else{  
26.           console.log("从服务器请求数据失败！");  
27.         }  
28.       });  

    服务器端处理：  

1. router.get('/',(req,res,next)=>{  
2.   //获取请求参数  
3.   let pageSize=parseInt(req.query.pageSize);  
4.   let page=parseInt(req.query.page);  
5.   let sortFlag=req.query.sortFlag;  
6.   let skipPiece=(page-1)*pageSize;//分页查询，跳过前面skip条数据  
7.   let params={  
8.     salePrice:{$gt:req.query.priceGt,$lt:req.query.priceLt}  
9.   };  
10.     
11.   //利用goods模板调用mongooseAPI进行数据库查询、排序、跳到指定页  
12.   let goodsModel=goods.find(params).sort({'salePrice':sortFlag}).skip(skipPiece).limit(pageSize);  
13.   goodsModel.exec((err,goodsDoc)=>{  
14.     "use strict";  
15.     if (err){  
16.       res.json({  
17.         status:1,  
18.         msg:err.message  
19.       })  
20.     }else {  
21.       res.json({//利用res将数据返回给get请求  
22.         status:0,  
23.         msg:'',  
24.         result:{  
25.           count:goodsDoc.length,  
26.           list:goodsDoc  
27.         }  
28.       })  
29.     }  
30.   })  
31. });