商品列表分页和排序功能实现

一、实现接口分页功能：需要拿到前端的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);
       },

 

来源：https://www.cnblogs.com/psxiao/p/12010143.html