vue+node 购物车列表功能实现

向右看齐 2022-05-11 14:28 443阅读 0赞

二.路由

购物车列表页面的路由在src/router/index.js里定义

{
      path: '/cart',
      name: 'Cart',
      component:Cart
    },

引入这个cart 这个组件 import Cart from '@/views/Cart'

一.组件的复用

1.要先引入组件

import NavHeader from './../components/NavHeader'

2.要注册这个组件

components:{
      NavHeader,
      NavFooter,
      NavBread,
      Modal
    },

3.要在template里引入这个组件名

</template>

接下来要写server端的cart接口,在server/routes/users.js里书写

键盘事件的书写
    @keyup.enter="login"

**一、渲染购物车列表页面**

新建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. \}

[![688651-20180628042215517-239995101.jpg][]][688651-20180628042215517-239995101.jpg 1]

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

[![688651-20180628042216513-1118485697.jpg][]][688651-20180628042216513-1118485697.jpg 1]

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

[![688651-20180628042217292-158405925.jpg][]][688651-20180628042217292-158405925.jpg 1]

属性没有添加成功，在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)

[![688651-20180628042218217-1246639014.jpg][]][688651-20180628042218217-1246639014.jpg 1]

[![688651-20180628042218660-952631719.jpg][]][688651-20180628042218660-952631719.jpg 1]

**三、购物车商品修改功能**

商品加减和商品勾选

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全选之后，显示正常，但是刷新页面之后全选的图标没有显示全选，因为全选的信息没有存储到数据库保存，所以刷新之后就没有了。

[![688651-20180628042219080-2121845415.jpg][]][688651-20180628042219080-2121845415.jpg 1]

**【解决的办法】**

用到了实时计算的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. \}

页面一刷新就实时计算了

[![688651-20180628042219800-520981257.jpg][]][688651-20180628042219800-520981257.jpg 1]

*  **商品实时计算功能实现**

这里也要用到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.  \},

1.  // 全局过滤器   在main.js里定义
2.  import \{currency\} from './util/currency'
3.  Vue.filter("currency",currency);

[![688651-20180628042220496-2096011162.jpg][]][688651-20180628042220496-2096011162.jpg 1]

[688651-20180628042215517-239995101.jpg]: /images/20220505/b57f3923e0b447028e9a49ca6aac8dfe.png
[688651-20180628042215517-239995101.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/11/1.jpg?raw=true
[688651-20180628042216513-1118485697.jpg]: /images/20220505/27e42b70750b4f4bbe0a0ab3f561fb62.png
[688651-20180628042216513-1118485697.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/11/2.jpg?raw=true
[688651-20180628042217292-158405925.jpg]: /images/20220505/6db136b6302041bbb5a53414738c30aa.png
[688651-20180628042217292-158405925.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/11/3.jpg?raw=true
[688651-20180628042218217-1246639014.jpg]: /images/20220505/2c7cba0f54194b12b238e74ea4c0662b.png
[688651-20180628042218217-1246639014.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/11/4.jpg?raw=true
[688651-20180628042218660-952631719.jpg]: /images/20220505/809b63d889234133b840906f123660a6.png
[688651-20180628042218660-952631719.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/11/5.jpg?raw=true
[688651-20180628042219080-2121845415.jpg]: /images/20220505/2269055d4ea641738ff9837f70448b2a.png
[688651-20180628042219080-2121845415.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/11/6.jpg?raw=true
[688651-20180628042219800-520981257.jpg]: /images/20220505/dcca2671da314f2e8b99e3e4939b1d15.png
[688651-20180628042219800-520981257.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/11/7.jpg?raw=true
[688651-20180628042220496-2096011162.jpg]: /images/20220505/c654cd58c0c741fca8130d40b9b3e57a.png
[688651-20180628042220496-2096011162.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/11/8.jpg?raw=true