Vue nodejs商城项目-商品列表价格过滤和加入购物车功能

一、价格过滤功能

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. });

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

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.                 "){
19.                     ......
20.                 }
21.             })
22.         }
23.     }
24. }

二、加入购物车功能

dumall数据库建立users集合导入resource文件夹的dumall-users 

与商品列表接口一样，先建立用户数据的模型 
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:"",
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:"",
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:"",
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:"",
58.                       msg:err2.message
59.                     })
60.                   }else{
61.                     res.json({
62.                       status:"",
63.                       msg:'',
64.                       result:'suc'
65.                     })
66.                   }
67.                 })
68.               }
69.             }
70.           })
71.         }
72.       }
73.     }
74.   })
75. })

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

1. <!--传入商品id参数-->
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. }

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

• © 2018 GitHub, Inc.