Vue+Node如何實現商品列表的分頁、排序、篩選，添加購物車功能

這篇文章主要介紹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+Node如何實現商品列表的分頁、排序、篩選，添加購物車功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！