Vue+Node.js实现商品列表分页、排序、筛选及购物车功能教程

本文通过一个完整的实例，详细讲解如何利用Vue和Node.js技术栈，实现商品列表的分页、排序、筛选以及添加购物车等功能。内容涵盖前后端交互逻辑，旨在为开发者提供可参考的实现方案。

商品列表分页实现

1、分页

商品列表的分页功能由后端主导实现。前端向服务器发送当前页面大小（pageSize）和页码（page）请求，后端根据这些参数从数据库中检索对应位置的数据并返回。例如，若设定每页显示8条数据，请求第3页时，后端将跳过前2*8=16条记录，直接返回接下来的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.js程序设计有所帮助，特别是涉及商品列表的复杂交互功能实现。

Vue+Node.js实现商品列表分页、排序与筛选及购物车功能详解

商品列表分页实现

商品列表排序功能

商品列表价格筛选

实用工具推荐