价格过滤功能的实现

曾经终败给现在 2022-05-11 13:22 140阅读 0赞

### 一、价格过滤功能 ###

GoodsList.vue

1.  >>点击价格区间时发送请求
2.  methods:\{
3.      getGoodsList(flag)\{
4.          var param = \{
5.              // 请求时传点击的价格区间数据给后台
6.              priceLevel:this.priceChecked // 点击的价格区间
7.          \}
8.          ......
9.      \},
10.     setPriceFilter(index)\{ // 点击价格
11.         this.priceChecked = index;
12.         this.closePop();
13.         this.getGoodsList(); // 发送请求
14.     \},
15. \}

server/routes/goods.js   
获取传过来的参数，对价格参数进行处理，查询价格区间内的数据库数据

1.  // 二级路由
2.  /\* GET goods page. \*/
3.  router.get('/', function(req, res, next) \{
4.     // express获取请求参数
5.     let priceLevel = req.param("priceLevel"); // 传过来的价格区间
6.     var priceGt = '',priceLte = '';
7.     let params = \{\};
8.     if(priceLevel != 'all')\{ // 价格区间过滤功能
9.        switch (priceLevel)\{
10.          case '0':priceGt=0;priceLte =100;break;
11.          case '1':priceGt=100;priceLte =500;break;
12.          case '2':priceGt=500;priceLte =1000;break;
13.          case '3':priceGt=1000;priceLte =5000;break;
14.       \}
15.       params = \{
16.          salePrice:\{
17.             $gt:priceGt,
18.             $lte:priceLte
19.          \}
20.       \}
21.    \}
22.    ......
23. \});

[![688651-20180628040217655-1274814012.jpg][]][688651-20180628040217655-1274814012.jpg 1]

往下滚动分页加载图标效果

1.  
2.  <img v-show="loading" src="/static/loading-svg/loading-spinning-bubbles.svg" alt="">
3.   
4.  export default \{
5.      data()\{
6.          return \{
7.              loading:false // 往下滚动"加载图标"的出现效果:默认不出现
8.          \}
9.      \},
10.     methods:\{
11.         getGoodsList(flag)\{
12.             this.loading = true; // 请求前出现
13.             axios.get("/goods",\{
14.               params:param // 传参
15.             \}).then((res)=>\{
16.                 var res = res.data;
17.                 this.loading = false; // 请求到数据图标消失
18.                 if(res.status == "0")\{
19.                     ......
20.                 \}
21.             \})
22.         \}
23.     \}
24. \}

### 二、加入购物车功能 ###

dumall数据库建立users集合导入resource文件夹的dumall-users   
[![688651-20180628040218836-392080134.jpg][]][688651-20180628040218836-392080134.jpg 1]

与商品列表接口一样，先建立用户数据的模型   
server/models/users.js

1.  // 对应数据库用户数据在resource文件夹的dumall-users
2.  var mongoose = require('mongoose');
3.  var Schema = mongoose.Schema;
4.   
5.  // 定义一个Schema
6.  var userSchema = new Schema(\{
7.     'userId':String, // 或者 'userId':\{type:String\}
8.     'userName':String,
9.     'userPwd':String,
10.    'orderList':Array,
11.     'cartList':\[ // 购物车列表
12.         \{
13.             "productId":String,
14.             "productName":String,
15.             "salePrice":Number,
16.             "productImage":String,
17.             "checked":String, // 是否选中
18.             "productNum":String // 商品数量
19.         \}
20.     \],
21.     "addressList":Array
22. \})
23.  
24. // 输出(导出)
25. module.exports = mongoose.model('user',userSchema); // 定义一个user模型，可以根据这个模型调用其API方法。
26. // 这个模型定义的是数据库dumall的users集合数据，所以这个model取名user是对应这个集合，连接数据库之后，这个模型会根据名字的复数形式"users"来查找数据集合。
27. // module.exports = mongoose.model('user',userSchema,'users'); 也可以后面注明链接的是数据库的goods集合

数据库链接(之前商品列表页已连接)，查询操作用户数据，建立接口，实现加入购物车功能 server/routes/goods.js

1.  // 加入到购物车
2.  // 是二级路由，一级路由在app.js
3.  router.post("/addCart",function(req, res, next)\{
4.    var userId = '100000077',
5.      productId = req.body.productId; // post请求拿到res参数：req.body
6.    var User = require('../models/users.js'); // 引入user模型
7.   
8.    // 查询第一条:拿到用户信息
9.    User.findOne(\{
10.     userId:userId // 查询条件
11.   \},function(err,userDoc)\{
12.     if(err)\{
13.       res.json(\{
14.         status:"1",
15.         msg:err.message
16.       \})
17.     \}else\{
18.       console.log("userDoc"+userDoc); // 用户数据
19.       if(userDoc)\{
20.         let goodsItem = '';
21.         userDoc.cartList.forEach(function(item)\{ // 遍历用户购物车，判断加入购物车的商品是否已经存在
22.           if(item.productId == productId)\{
23.             goodsItem = item;
24.             item.productNum++; // 购物车这件商品数量+1
25.           \}
26.         \})
27.         if(goodsItem)\{ // 若购物车商品已存在
28.           userDoc.save(function (err2,doc2) \{
29.             if(err2)\{
30.                 res.json(\{
31.                     status:"1",
32.                     msg:err2.message
33.                 \})
34.             \}else\{
35.                 res.json(\{
36.                     status:'0',
37.                     msg:'',
38.                     result:'suc'
39.                 \})
40.             \}
41.           \})
42.         \}else\{ // 若购物车商品不存在，就添加进去
43.           Goods.findOne(\{productId:productId\},function(err1,doc)\{ // 从商品列表页Goods查询点击加入购物车的那件商品信息
44.             if(err1)\{
45.               res.json(\{
46.                 status:"1",
47.                 msg:err1.message
48.               \})
49.             \}else\{
50.               if(doc)\{
51.                 doc.productNum = 1;
52.                 doc.checked = 1;
53.                 userDoc.cartList.push(doc); // 添加信息到用户购物车列表中
54.                 userDoc.save(function(err2,doc2)\{ // 保存数据库
55.                   if(err2)\{
56.                     res.json(\{
57.                       status:"1",
58.                       msg:err2.message
59.                     \})
60.                   \}else\{
61.                     res.json(\{
62.                       status:"0",
63.                       msg:'',
64.                       result:'suc'
65.                     \})
66.                   \}
67.                 \})
68.               \}
69.             \}
70.           \})
71.         \}
72.       \}
73.     \}
74.   \})
75. \})

页面实现加入购物车请求实现 GoodsList.vue

1.  
2.  <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
3.   
4.  methods:\{
5.      addCart(productId)\{ // 点击加入购物车
6.          axios.post("/goods/addCart",\{ // 接口设置在server/routes/goods.js
7.              productId:productId
8.          \}).then((res)=>\{
9.              var res = res.data;
10.             if(res.status==0)\{
11.                 alert("加入成功")
12.             \}else\{
13.                 alert("msg:"+res.msg)
14.             \}
15.         \})
16.     \}
17. \}

运行项目，点击购物车，请求成功，数据库购物车列表变化

[![688651-20180628040219477-82606040.jpg][]][688651-20180628040219477-82606040.jpg 1]

[![688651-20180628040220439-432178444.jpg][]][688651-20180628040220439-432178444.jpg 1]

[688651-20180628040217655-1274814012.jpg]: /images/20220505/7d45c0734b8a467a8b3d036b159dc361.png
[688651-20180628040217655-1274814012.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/09/9.jpg?raw=true
[688651-20180628040218836-392080134.jpg]: /images/20220505/8027e15cf32b4cdb90f262a7c532702c.png
[688651-20180628040218836-392080134.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/09/10.jpg?raw=true
[688651-20180628040219477-82606040.jpg]: /images/20220505/48c5c136f57b44c5be09674212520ac1.png
[688651-20180628040219477-82606040.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/09/11.jpg?raw=true
[688651-20180628040220439-432178444.jpg]: /images/20220505/9094e277034e4c63ad4d35ea90f2725e.png
[688651-20180628040220439-432178444.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/09/12.jpg?raw=true