Vuenode.js商城购物车模块

**** 在这里发现一个bug,在商品列表页点击"加入购物车"&＃xff0c;购物车页面新添加的商品数量和总价格是未定义。mongoose添加属性问题

这是后端接口处理的问题&＃xff0c;在server/routes/goods.js的加入到购物车接口中&＃xff0c;是从mongodb的数据库dumall的goods表根据商品id获取对应数据&＃xff0c;再对此商品数据添加productNum和checked属性&＃xff0c;之后再插入到users表的购物车列表中的。

属性没有添加成功&＃xff0c;在Goods模型中添加属性&＃xff0c;要去models/goods.js的Schema添加这两个属性。

1. server/models/goods.js
2. // 定义一个Schema
3. var produtSchema &＃61; new Schema({
4.    &＃39;productId&＃39;:String,
5.    &＃39;productName&＃39;:String,
6.    &＃39;salePrice&＃39;:Number,
7.    &＃39;productImage&＃39;:String,
9.     // 添加的属性
10.     "checked":String,
11.     "productNum":Number
12. })
13. module.exports &＃61; mongoose.model(&＃39;good&＃39;,produtSchema);

重新启动express(node server/bin/www)

三、购物车商品修改功能

商品加减和商品勾选

server/routes/users.js

1. //修改商品数量接口
2. router.post("/cartEdit",function(req,res,next){
3.     var userId &＃61; req.COOKIEs.userId,
4.         productId &＃61; req.body.productId,
5.         productNum &＃61; req.body.productNum,
6.         checked &＃61; req.body.checked;
7.     User.update({ // 查询条件
8.         "userId":userId,
9.         "cartList.productId":productId
10.     },{ // 修改的数据
11.         "cartList.$.productNum":productNum,
12.         "cartList.$.checked":checked
13.     },function(err,doc){
14.         if(err){
15.           res.json({
16.             status:&＃39;1&＃39;,
17.             msg:err.message,
18.             result:&＃39;&＃39;
19.           });
20.         }else{
21.           res.json({
22.             status:&＃39;0&＃39;,
23.             msg:&＃39;&＃39;,
24.             result:&＃39;suc&＃39;
25.           });
26.         }
27.     });
28. })

src/views/Cart.vue

2. javascipt:;" class&＃61;"checkbox-btn item-check-btn" v-bind:class&＃61;"{&＃39;check&＃39;:item.checked&＃61;&＃61;&＃39;1&＃39;}" &＃64;click&＃61;"editCart(&＃39;checked&＃39;,item)">
3.     &＃61;"icon icon-ok">
4.         #icon-ok">
5.     
8. class&＃61;"input-sub" &＃64;click&＃61;"editCart(&＃39;minu&＃39;,item)">-
9. class&＃61;"input-add" &＃64;click&＃61;"editCart(&＃39;add&＃39;,item)">
11. methods:{
12.     editCart(flag,item){
13.         if(flag &＃61;&＃61; &＃39;add&＃39;){ // 添加商品数量
14.           item.productNum ;
15.         }else if(flag &＃61; &＃39;minu&＃39;){ // 减少商品数量
16.           if(item.productNum <&＃61; 1){
17.             return;
18.           }
19.           item.productNum--;
20.         }else{ // 商品控制选中
21.           item.checked &＃61; (item.checked&＃61;&＃61;&＃39;1&＃39;) ? &＃39;0&＃39; : &＃39;1&＃39;;
22.         }
23.         axios.post(&＃39;/users/cartEdit&＃39;,{
24.           productId:item.productId,
25.           productNum:item.productNum,
26.           checked:item.checked
27.         }).then((response)&＃61;>{
28.           let res &＃61; response.data;
29.         })
30.       }
31. }

购物车全选和商品实时计算功能

• 全选和取消全选

server/routes/users.js

1. //全选和取消全选
2. router.post(&＃39;/editCheckAll&＃39;,function(req,res,next){
3.     var userId &＃61; req.COOKIEs.userId,
4.       checkAll &＃61; req.body.checkAll?&＃39;1&＃39;:&＃39;0&＃39;;
5.     User.findOne({userId:userId},function(err,user){
6.         if(err){
7.           res.json({
8.             status:&＃39;1&＃39;,
9.             msg:err.message,
10.             result:&＃39;&＃39;
11.           });
12.         }else{
13.           if(user){
14.             user.cartList.forEach((item)&＃61;>{
15.               item.checked &＃61; checkAll;
16.             })
17.             user.save(function (err1,doc) {
18.                 if(err1){
19.                   res.json({
20.                     status:&＃39;1&＃39;,
21.                     msg:err1,message,
22.                     result:&＃39;&＃39;
23.                   });
24.                 }else{
25.                   res.json({
26.                     status:&＃39;0&＃39;,
27.                     msg:&＃39;&＃39;,
28.                     result:&＃39;suc&＃39;
29.                   });
30.                 }
31.             })
32.           }
33.         }
34.     })
35. })

src/views/Cart.vue

1. javascipt:;" &＃64;click&＃61;"toggleCheckAll">
2.     class&＃61;"checkbox-btn item-check-btn" v-bind:class&＃61;"{&＃39;check&＃39;:checkAllFlag}">
3.         &＃61;"icon icon-ok">#icon-ok"/>
4.     
5.     Select all
8. export default {
9.     data(){
10.         return {
11.           checkAllFlag:false // 控制全选
12.         }
13.     },
14.     methods:{
15.       toggleCheckAll(){ // 全选和取消全选
16.         this.checkAllFlag &＃61; !this.checkAllFlag; // 取反
17.         this.cartList.forEach((item)&＃61;>{
18.           item.checked &＃61; this.checkAllFlag;
19.         })
20.         axios.post(&＃39;/users/editCheckAll&＃39;,{
21.           checkAll:this.checkAllFlag
22.         }).then((response)&＃61;>{
23.           let res &＃61; response.data;
24.           if(res.status&＃61;&＃61;&＃39;0&＃39;){
25.             console.log("update suc");
26.           }
27.         })
28.       }
29.     }
30. }

这里出现一个问题&＃xff0c;在点击select All全选之后&＃xff0c;显示正常&＃xff0c;但是刷新页面之后全选的图标没有显示全选&＃xff0c;因为全选的信息没有存储到数据库保存&＃xff0c;所以刷新之后就没有了。

【解决的办法】

用到了实时计算的computed功能&＃xff0c;实时计算的是属性&＃xff0c;只不过是函数的写法&＃xff0c;data里面就不用在声明了。

src/views/Cart.vue

1. export default {
2.     data(){
3.         return {
4.           // checkAllFlag:false // 控制全选
5.         }
6.     },
7.     computed:{ // 实时计算的是属性&＃xff0c;只不过是函数的写法&＃xff0c;data里面就不用在声明了
8.       checkAllFlag(){ // 是否全选属性
9.         return this.checkedCount &＃61;&＃61; this.cartList.length; // 勾选的商品种数&＃61;购物车商品列表的商品种数时&＃xff0c;返回true代表全选。
10.       },
11.       checkedCount(){ // 获取已勾选的商品种数(几种商品已勾选)
12.         var i &＃61; 0;
13.         this.cartList.forEach((item)&＃61;>{
14.           if(item.checked&＃61;&＃61;&＃39;1&＃39;)i ;
15.         });
16.         return i;
17.       }
18.     },
19.     methods:{
20.       toggleCheckAll(){ // 全选和取消全选
21.         // this.checkAllFlag &＃61; !this.checkAllFlag;
22.         // 不能使用这种写法了&＃xff0c;checkAllFlag是实时计算的属性&＃xff0c;如果true取反变成false之后&＃xff0c;还没来得及执行下面的所有商品取消勾选&＃xff0c;就实时计算了检测到勾选的商品种数&＃61;购物车商品列表的商品种数,就又变成全选了。
23.         var flag &＃61; !this.checkAllFlag; // 声明变量取代
24.         this.cartList.forEach((item)&＃61;>{
25.           item.checked &＃61; flag ?&＃39;1&＃39;:&＃39;0&＃39;;
26.         })
27.         axios.post(&＃39;/users/editCheckAll&＃39;,{
28.           checkAll:flag
29.         }).then((response)&＃61;>{
30.           let res &＃61; response.data;
31.           if(res.status&＃61;&＃61;&＃39;0&＃39;){
32.             console.log("update suc");
33.           }
34.         })
35.       }
36.     }
37. }

页面一刷新就实时计算了

• 商品实时计算功能实现

这里也要用到computed计算属性

1. class&＃61;"item-total">
2.   Item total: class&＃61;"total-price">{{totalPrice}}