Vue+Node如何實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車功能

這篇文章主要介紹Vue+Node如何實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

鞏留網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,鞏留網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為鞏留上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的鞏留做網(wǎng)站的公司定做！

1、分頁(yè)

商品列表的分頁(yè)實(shí)現(xiàn)是后臺(tái)根據(jù)前端請(qǐng)求的頁(yè)面大小、頁(yè)碼位置，去數(shù)據(jù)庫(kù)中查詢指定位置的數(shù)據(jù)然后返回給前端。比如頁(yè)面大小為8，要查第3頁(yè)的數(shù)據(jù)，則跳過(guò)2*8條數(shù)據(jù)，然后返回接下來(lái)的8條數(shù)據(jù)。

實(shí)現(xiàn)滾動(dòng)加載：頁(yè)面剛一加載完成并不需要請(qǐng)求所有數(shù)據(jù)，只顯示一部分。當(dāng)用戶下拉到頁(yè)面底部時(shí)，再去請(qǐng)求數(shù)據(jù)并拼接到商品數(shù)據(jù)列表中。通過(guò)vue-infinite-scroll插件實(shí)現(xiàn)滾動(dòng)加載，在框架末尾插入加載div，并且可以在其中放入加載動(dòng)畫

<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">//加載的矢量動(dòng)畫
</div>

通過(guò)busy可以控制是否啟用加載，在loadMore函數(shù)中定義你的加載操作，然后通過(guò)setTimeout按時(shí)間間隔響應(yīng)加載請(qǐng)求

new Vue({
 el: '#app',
 data: {
  data: [],
  busy: false    //一開(kāi)始不用加載
 },
 methods: {
  loadMore(){    //滾動(dòng)加載操作
   this.busy = true;
   setTimeout(() => {
    this.page++;
    this.getGoodsList(true);
   }, 1000);
  }
 }
});

2、排序

商品按價(jià)格排序在服務(wù)器端實(shí)現(xiàn)，通過(guò)mongoose中的sort函數(shù)對(duì)數(shù)據(jù)庫(kù)查詢結(jié)果按price關(guān)鍵字排序，之后返回給前端。在前端發(fā)送排序請(qǐng)求：

sortPrice(){    //按價(jià)格排序
   this.sortFlag=this.sortFlag==1?-1:1;
   this.page=1;
   this.getGoodsList();
}

其中1為升序，-1降序，排序之后需要將頁(yè)碼置1，然后再去請(qǐng)求商品列表

3、按價(jià)格篩選

服務(wù)器端根據(jù)前端請(qǐng)求的最大值(priceGt)、最小值(priceLt)去數(shù)據(jù)庫(kù)中查詢指定價(jià)位之間的商品并返回給前端，利用mongoose的查詢函數(shù)find中的params參數(shù)中設(shè)置$gt,$lt查詢指定區(qū)間的商品  

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

商品前端請(qǐng)求：

getGoodsList(split){
   let param={          //設(shè)置get請(qǐng)求的參數(shù)
    pageSize:this.pageSize,
    page:this.page,
    sortFlag:this.sortFlag,
    priceGt:this.priceGt,
    priceLt:this.priceLt
   };
   this.showLoading=true;     //啟用加載svg動(dòng)畫
   axios.get("/goods",{
     params:param
   }).then(response =>{
    let res=response.data;
    if(res.status==0){
     if(split){         //split==true，需要滾動(dòng)追加頁(yè)數(shù)
      this.goodsList=this.goodsList.concat(res.result.list);
      if(res.result.count==0){  //返回0條數(shù)據(jù)，禁用滾動(dòng)
       this.busy=true;
      }else{
       this.busy = false;
      }
     }else{
      this.goodsList=res.result.list;
     }
    }else{
     console.log("從服務(wù)器請(qǐng)求數(shù)據(jù)失??！");
    }
   });

服務(wù)器端處理：

router.get('/',(req,res,next)=>{
 //獲取get請(qǐng)求中的參數(shù)
 let pageSize=parseInt(req.query.pageSize);
 let page=parseInt(req.query.page);
 let sortFlag=req.query.sortFlag;
 let skipPiece=(page-1)*pageSize;        //分頁(yè)查詢，跳過(guò)前面skip條數(shù)據(jù)
 let params={
  salePrice:{$gt:req.query.priceGt,$lt:req.query.priceLt}
 };
 //利用goods模板調(diào)用mongooseAPI進(jìn)行數(shù)據(jù)庫(kù)查詢、排序、跳到指定頁(yè)
 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將查詢結(jié)果返回
    status:0,
    msg:'',
    result:{
     count:goodsDoc.length,
     list:goodsDoc
    }
   })
  }
 })
});

以上是“Vue+Node如何實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：Vue+Node如何實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車功能
標(biāo)題來(lái)源：http://muchs.cn/article4/ghhhoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、微信公眾號(hào)、、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)