商品列表分頁和排序功能實現

一、實現接口分頁功能：需要拿到前端的pageSize，page,sort參數

router.get("/", function (req, res, next) {
    //注意，通過req.param拿到的數據都是字符串，如果需要數字的話，就需要進行轉換
     

    // 拿到頁面參數
    let page = parseInt(req.param("page"));
    // 拿到當前一頁有多少條數據
    let pageSize = parseInt(req.param("pageSize"));
    // 通過req.param獲取前端傳過來的sort參數
    let sort = req.param("sort");
    //分頁的公式，skip就相當於索引值
    let skip = (page-1)*pageSize;
    let params = {};//定義一個空對象，假設find查詢是有條件的 
    // find可以返回一個模型，params作為查詢條件,,skip表示默認跳過多少條數據,limit獲取多少條數據
    let goodsModel = Goods.find(params).skip(skip).limit(pageSize);
    // console.log(goodsModel)
    // 調用sort方法，mongodb中，每一個條件都必須是對象
    goodsModel.sort({'salePrice':sort});
    // 不是普通的查詢，所以不能用find
    goodsModel.exec(function(err, doc) {
        if(err) {
            res.json({
                status: '1',
                msg: err.message
            });
        } else {
            res.json({
                status: '0',
                msg: '',
                result: {
                    count: doc.length,
                    list: doc
                }
            })
        }
    })
});

前端實現分頁和排序功能功能：

 data() {
        return {
            goodsList: [],
            priceFilter: [
              {
                startPrice: '0.00',
                endPrice: '500.00'
              },
              {
                startPrice: '500.00',
                endPrice: '1000.00'
              },
              {
                startPrice: '1000.00',
                endPrice: '3000.00'
              }
            ],
            // 控制當前選中的是哪一項
            priceChecked: 'all',
            filterBy: false, 
            overLayFlag: false ,//遮罩層

            sortFlag: true,//升序
            page:1,
            pageSize:8,//當前頁為八條數據
            busy: true
        }
    },

 

 //商品列表
       getGoodsList(){
        //定義param對象為想后台傳遞的參數
          var param = {
            page: this.page,
            pageSize: this.pageSize,
            sort: this.sortFlag ? 1 : -1
          }
          
        //  var url = "http://localhost:3000";
        //this.url + '/goods' 指的就是請求后端的http://localhost:3000/goods/
          axios.get(this.url + '/goods',{
            params: param
          }).then((response)=>{
            var res = response.data; 
            if(res.status == "0") {             
                  this.goodsList = res.result.list;
            } else {
              this.goodsList = [];
            }
          })      
       },
      //  商品列表排序
       sortGoods(){
          this.sortFlag = !this.sortFlag;
          this.page = 1;
          this.pageSize = 8;
          //調用getGoodsList向后台傳遞參數
          this.getGoodsList();
       },

三、利用vue-infinite-scroll插件實現無限加載功能（可以npmjs網址找到給插件）

//商品列表
       getGoodsList(flag){
        //定義param對象為想后台傳遞的參數
          var param = {
            page: this.page,
            pageSize: this.pageSize,
            sort: this.sortFlag ? 1 : -1
          }
          
        //  var url = "http://localhost:3000";
        //this.url + '/goods' 指的就是請求后端的http://localhost:3000/goods/
          axios.get(this.url + '/goods',{
            params: param
          }).then((response)=>{
            var res = response.data;
            // console.log(res)
            //  this.goodsList = res.result;
            //  console.log(this.goodsList)
            if(res.status == "0") {
              // this.goodsList = res.result.list;
              if(flag){
                //分頁數據需要累加
                  this.goodsList = this.goodsList.concat(res.result.list);
                  console.log(this.goodsList)
                  if(res.result.count == 0){
                      // 如果當前頁的數據條數為0，則停止加載
                      this.busy = true;
                  }else{
                      //否則
                      this.busy = false;
                  }
              }else{
                  //普通加載數據
                  this.goodsList = res.result.list;
                  this.busy = false;
              }
            } else {
              this.goodsList = [];
            }
          })      
       },
   
       //無限加載列表
       loadMore(){
         //在請求完成之前禁止瀏覽器再滾動加載
         console.log(1111)
         this.busy = true;  
         setTimeout(() => {
            this.page ++;
            //  傳遞true參數就是為了告訴getGoodsList函數，我們的分頁需要進行累加
            this.getGoodsList(true)
         },500);
       },