Vue node.js商城-購物車模塊

 

一、渲染購物車列表頁面

新建src/views/Cart.vue
獲取cartList購物車列表數據就可以在頁面中渲染出該用戶的購物車列表數據

1. data(){
2.   return {
3.      cartList:[] // 購物車商品列表
4.   }
5. },
6. mounted:function(){
7.   this.init();
8. },
9. methods:{
10.   init(){ // 初始化商品數據
11.     axios.get('/users/cartList').then((response)=>{
12.       let res = response.data;
13.       this.cartList = res.result;
14.     })
15.   }
16. }

購物車接口：server/routes/users.js

1. // 查詢當前用戶的購物車數據
2. router.get('/cartList',function(req,res,next){
3.     var userId = req.cookies.userId;
4.     User.findOne({userId:userId},function(err,doc){
5.         if(err){
6.             res.json({
7.                 status:'1',
8.                 msg:err.message,
9.                 result:''
10.             });
11.         }else{
12.             if(doc){
13.                 res.json({
14.                     status:'0',
15.                     msg:'',
16.                     result:doc.cartList
17.                 })
18.             }
19.         }
20.     })
21. })

建立路由src/router/index.js

1. import Cart from '@/views/Cart' // 購物車列表
2. export default new Router({
3.   routes: [
4.     {
5.       path: '/cart', // 購物車列表路由
6.       name: 'Cart',
7.       component: Cart
8.     }
9.  
10.   ]
11. })

二、購物車商品刪除功能

購物車刪除接口：server/routes/users.js

1. // 購物車刪除功能
2. router.post('/cartDel',function(req,res,next){
3.     var userId = req.cookies.userId,productId = req.body.productId;
4.     User.update({
5.         userId:userId
6.     },{
7.         $pull:{
8.             'cartList':{
9.                 'productId':productId
10.             }
11.         }
12.     },function(err,doc){
13.         if(err){
14.             res.json({
15.                 status:'1',
16.                 msg:err.message,
17.                 result:''
18.             });
19.         }else{
20.             res.json({
21.                 status:'0',
22.                 msg:'',
23.                 result:'suc'
24.             });
25.         }
26.     })
27. });

src/views/Cart.vue

1. 點擊刪除圖標模態框出現(導入模態Modal.vue子組件)
2. <!-- 刪除圖標 -->
3. <a href="javascript:;" class="item-edit-btn" @click="delCartConfirm(item.productId)">
4.     <svg class="icon icon-del">
5.         <use xlink:href="#icon-del"></use>
6.     </svg>
7. </a>
8.  
9. <!-- 模態框 -->
10. <Modal :mdShow="modalConfirm" @close="closeModal">
11.     <p slot="message">你確認要刪除此條數據嗎？</p>
12.     <div slot="btnGroup">
13.         <a href="javascript:;" class="btn btn--m" @click="delCart">確認</a>
14.         <a href="javascript:;" class="btn btn--m" @click="modalConfirm = false">關閉</a>
15.     </div>
16. </Modal>
17. import Modal from '@/components/Modal.vue' // 模態框
18. export default {
19.     data(){
20.         return {
21.           productId:'',
22.           modalConfirm:false // 模態框是否顯示
23.         }
24.     },
25.     components:{
26.       Modal
27.     },
28.     methods:{
29.       delCartConfirm(productId){ // 點擊刪除圖標
30.         this.productId = productId;
31.         this.modalConfirm = true; // 模態框顯示
32.       },
33.       closeModal(){ // 關閉模態框
34.         this.modalConfirm = false;
35.       },
36.       delCart(){ // 確認刪除此商品
37.         axios.post('/users/cartDel',{
38.           productId:this.productId
39.         }).then((response) => {
40.           let res = response.data;
41.           if(res.status = '0'){
42.             this.modalConfirm = false; // 關閉模態框
43.             this.init(); // 重新初始化購物車數據
44.           }
45.         })
46.       }
47.     }
48. }

**** 在這里發現一個bug,在商品列表頁點擊"加入購物車"，購物車頁面新添加的商品數量和總價格是未定義。mongoose添加屬性問題

這是后端接口處理的問題，在server/routes/goods.js的加入到購物車接口中，是從mongodb的數據庫dumall的goods表根據商品id獲取對應數據，再對此商品數據添加productNum和checked屬性，之后再插入到users表的購物車列表中的。

屬性沒有添加成功，在Goods模型中添加屬性，要去models/goods.js的Schema添加這兩個屬性。

1. server/models/goods.js
2. // 定義一個Schema
3. var produtSchema = new Schema({
4.    'productId':String,
5.    'productName':String,
6.    'salePrice':Number,
7.    'productImage':String,
8.  
9.     // 添加的屬性
10.     "checked":String,
11.     "productNum":Number
12. })
13. module.exports = mongoose.model('good',produtSchema);

 

重新啟動express(node server/bin/www)

三、購物車商品修改功能

商品加減和商品勾選

server/routes/users.js

1. //修改商品數量接口
2. router.post("/cartEdit",function(req,res,next){
3.     var userId = req.cookies.userId,
4.         productId = req.body.productId,
5.         productNum = req.body.productNum,
6.         checked = 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:'1',
17.             msg:err.message,
18.             result:''
19.           });
20.         }else{
21.           res.json({
22.             status:'0',
23.             msg:'',
24.             result:'suc'
25.           });
26.         }
27.     });
28. })

src/views/Cart.vue

1. <!--選中圖標-->
2. <a href="javascipt:;" class="checkbox-btn item-check-btn" v-bind:class="{'check':item.checked=='1'}" @click="editCart('checked',item)">
3.     <svg class="icon icon-ok">
4.         <use xlink:href="#icon-ok"></use>
5.     </svg>
6. </a>
7. <!--加減圖標-->
8. <a class="input-sub" @click="editCart('minu',item)">-</a>
9. <a class="input-add" @click="editCart('add',item)">+</a>
10.  
11. methods:{
12.     editCart(flag,item){
13.         if(flag == 'add'){ // 添加商品數量
14.           item.productNum++;
15.         }else if(flag = 'minu'){ // 減少商品數量
16.           if(item.productNum <= 1){
17.             return;
18.           }
19.           item.productNum--;
20.         }else{ // 商品控制選中
21.           item.checked = (item.checked=='1') ? '0' : '1';
22.         }
23.         axios.post('/users/cartEdit',{
24.           productId:item.productId,
25.           productNum:item.productNum,
26.           checked:item.checked
27.         }).then((response)=>{
28.           let res = response.data;
29.         })
30.       }
31. }

購物車全選和商品實時計算功能

• 全選和取消全選

server/routes/users.js

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

src/views/Cart.vue

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

 

這里出現一個問題，在點擊select All全選之后，顯示正常，但是刷新頁面之后全選的圖標沒有顯示全選，因為全選的信息沒有存儲到數據庫保存，所以刷新之后就沒有了。

【解決的辦法】

用到了實時計算的computed功能，實時計算的是屬性，只不過是函數的寫法，data里面就不用在聲明了。

src/views/Cart.vue

1. export default {
2.     data(){
3.         return {
4.           // checkAllFlag:false // 控制全選
5.         }
6.     },
7.     computed:{ // 實時計算的是屬性，只不過是函數的寫法，data里面就不用在聲明了
8.       checkAllFlag(){ // 是否全選屬性
9.         return this.checkedCount == this.cartList.length; // 勾選的商品種數=購物車商品列表的商品種數時，返回true代表全選。
10.       },
11.       checkedCount(){ // 獲取已勾選的商品種數(幾種商品已勾選)
12.         var i = 0;
13.         this.cartList.forEach((item)=>{
14.           if(item.checked=='1')i++;
15.         });
16.         return i;
17.       }
18.     },
19.     methods:{
20.       toggleCheckAll(){ // 全選和取消全選
21.         // this.checkAllFlag = !this.checkAllFlag;
22.         // 不能使用這種寫法了，checkAllFlag是實時計算的屬性，如果true取反變成false之后，還沒來得及執行下面的所有商品取消勾選，就實時計算了檢測到勾選的商品種數=購物車商品列表的商品種數,就又變成全選了。
23.         var flag = !this.checkAllFlag; // 聲明變量取代
24.         this.cartList.forEach((item)=>{
25.           item.checked = flag ?'1':'0';
26.         })
27.         axios.post('/users/editCheckAll',{
28.           checkAll:flag
29.         }).then((response)=>{
30.           let res = response.data;
31.           if(res.status=='0'){
32.             console.log("update suc");
33.           }
34.         })
35.       }
36.     }
37. }

 

頁面一刷新就實時計算了

• 商品實時計算功能實現

這里也要用到computed計算屬性

1. <div class="item-total">
2.   Item total: <span class="total-price">{{totalPrice}}</span>
3. </div>
4.  
5. computed:{
6.     totalPrice(){ // 總價格屬性
7.         var money = 0;
8.         this.cartList.forEach((item)=>{
9.             if(item.checked=='1'){
10.                 money += parseFloat(item.salePrice)*parseInt(item.productNum);
11.             }
12.         });
13.         return money;
14.     }
15. }

 

接下來要對價格進行格式化，vuex官網github有一個對購物車將格式化的函數https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/currency.js 可以拿過來對價格格式化，在src/util/currency.js

格式化要用到過濾器：可以在src/views/Cart.vue導入使用局部過濾器，也可以在main.js使用全局過濾器

1. <span class="total-price">{{totalPrice | currency('$')}}</span>
2.  
3. // 局部過濾器
4. import {currency} from '@/util/currency.js'
5. filters:{
6.   currency:currency // currency.js傳過來的本就是函數
7. },
8.  
9. // 全局過濾器
10. import {currency} from './util/currency'
11. Vue.filter("currency",currency);