如何用Vue和Node实现商品列表的分页、排序、筛选及购买功能？

本文共计1188个文字，预计阅读时间需要5分钟。

本案例展示了Vue+Node实现商品列表的分页、排序、筛选和添加购物车功能。适用于商家供应商和大商参考，具体如下：

1. 分页实现：商品列表的分页是通过后台根据前端请求发送的页码和每页显示数量进行数据分页。前端页面通过请求获取当前页数据和总页数，实现分页效果。

2. 排序功能：商品列表可以根据价格、销量、评价等字段进行排序。后端接收到排序参数后，对数据进行排序，前端展示排序后的商品列表。

3. 筛选功能：用户可以通过商品类目、品牌、价格区间等条件筛选商品。后端接收到筛选条件后，对数据进行筛选，前端展示筛选后的商品列表。

4. 添加购物车功能：用户可以将商品添加到购物车。后端接收到添加购物车请求后，将商品信息存储在用户购物车中，前端展示购物车数量。

示例代码：

javascript// Vue前端代码methods: { // 获取商品列表 getProducts(page, limit) { axios.get('/api/products', { params: { page, limit } }).then(response=> { this.products=response.data; }); }, // 获取分页数据 getPagination(page, limit) { axios.get('/api/products', { params: { page, limit } }).then(response=> { this.pagination=response.data.pagination; }); }, // 排序商品 sortProducts(orderBy, orderDirection) { axios.get('/api/products', { params: { orderBy, orderDirection } }).then(response=> { this.products=response.data; }); }, // 添加商品到购物车 addToCart(productId) { axios.post('/api/cart', { productId }).then(response=> { this.cartCount++; }); }}

javascript// Node后端代码router.get('/api/products', (req, res)=> { const { page, limit, orderBy, orderDirection }=req.query; // 获取分页数据 const skip=(page - 1) * limit; const options={ skip, limit, sort: { [orderBy]: orderDirection } }; Product.find(options).then(products=> { res.json(products); });});

本文实例讲述了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.js程序设计有所帮助。