一、渲染购物车列表页面

新建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);

Vue node.js商城-购物车模块的更多相关文章

  1. 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  2. 利用Node.js的Net模块实现一个命令行多人聊天室

    1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类:Server和Socket类.工厂方法. Server类 ...

  3. Node.js的Formidable模块的使用

    今天总结了下Node.js的Formidable模块的使用,下面做一些简要的说明. 1)     创建Formidable.IncomingForm对象 var form = new formidab ...

  4. Node.js入门:模块机制

    CommonJS规范      早在Netscape诞生不久后,JavaScript就一直在探索本地编程的路,Rhino是其代表产物.无奈那时服务端JavaScript走的路均是参考众多服务器端语言来 ...

  5. Node.js的net模块

    net模块提供了一个异步网络包装器,用于TCP网络编程,它包含了创建服务器和客户端的方法 创建TCP服务器 net.createServer方法 创建客户端去连接服务器 net.connect方法 简 ...

  6. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  7. node.js中express模块创建服务器和http模块客户端发请求

    首先下载express模块,命令行输入 npm install express 1.node.js中express模块创建服务端 在js代码同文件位置新建一个文件夹(www_root),里面存放网页文 ...

  8. node.js中ws模块创建服务端和客户端,网页WebSocket客户端

    首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...

  9. node.js中net模块创建服务器和客户端(TCP)

    node.js中net模块创建服务器和客户端 1.node.js中net模块创建服务器(net.createServer) // 将net模块 引入进来 var net = require(" ...

随机推荐

  1. DEM、DSM、DOM 名词解释

    1.DEM(Digital Elevation Matrix) 数字高程矩阵. 数字高程模型(Digital Elevation Model,缩写DEM)是一定范围内规则格网点的平面坐标(X,Y)及其 ...

  2. bzoj 5305: [Haoi2018]苹果树

    Description Solution \(n\) 个点的二叉树的方案数是 \(n!\) 证明十分显然:新加入的点占掉了 \(1\) 个位置,新加了 \(2\) 个位置,那么多出来一个位置,所以第 ...

  3. 弱类型dynamic与var

    dynamic与var都可代替任何类型 var关键字是C# 3.0开始新增的特性,称为推断类型. 1.必须在定义时初始化 2.一但初始化完成就不能再给变量赋与初始化值类型不同的值 3.var要求是局部 ...

  4. Spring Cloud Ribbon负载均衡配置类放在Spring boot主类同级增加Exclude过滤后报Field config in com.cloud.web.controller.RibbonConfiguration required a bean of type 'com.netflix.client.config.IClientConfig' that could not b

    环境: Spring Cloud:Finchley.M8 Spring Boot:2.0.0.RELEASE 目录结构: 可以看到代码第13行的注释,我已经在@ComponentScan注解中添加了E ...

  5. 如何angular过滤器进行排序???

    首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...

  6. dhtml

    网页换肤:<div> <button>red</button> <button>blue</button> <button>bl ...

  7. Linux下利用script命令录制并回放终端会话

    Linux下利用script命令录制并回放终端会话 核心命令 script 和 scriptreplay 录制屏幕 script -t 2>timescript typescript 命令解释: ...

  8. ahp层次分析法软件

    http://www.jz5u.com/Soft/trade/Other/58808.html 权重计算 归一化 本组当前数 - 本组最小 / 本组最大-本组最小 http://blog.csdn.n ...

  9. 【Spring实战】—— 13 AspectJ注解切面

    前面了解了典型的AOP基于配置的使用方法,下面介绍下如何依赖于注解来实现AOP. 基于注解降低了配置文件的复杂程度,但是引入了程序间的耦合,其中的优劣待用户自己判断了. 需要注意的是,确定Aspect ...

  10. spring-4.3.16+xfire-spring-1.2.6版本升级

    最近爆了个spring的漏洞,然后公司整体要求升级spring到最新版本,然后搞四了一大批猿人. spring-4.*的最新版本是4.3.16(稳定版) xfire-spring-1.2.6(最新版- ...