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. });