node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例


Posted in Javascript onDecember 23, 2019

本文实例讲述了node.js使用mongoose操作数据库实现购物车的增、删、改、查功能。分享给大家供大家参考,具体如下:

1、数据库操作语句

Mongoose通过model实现对每个集合的操作,在使用前需要先定义model:goods。

①、增加数据:从集合中查询一条记录,并返回doc,对doc操作之后通过save()保存到集合

goods.findOne({productId},(err,goodsDoc)=>{
   goodsDoc.productNum=1;
   goodsDoc.save(err,doc);
});

②、删除数据:

model.remove(conditions,callback(){})

③、修改数据:

model.update(conditions,updates,callback(){})

④、查询数据:

model.find(conditions,callback(){})

2、添加购物车

在mongodb中新建用户user集合,user中有cartList数组,用户点击添加购物车时在前端发出post请求包括用户、商品的id。然后在后端查询到对应的用户,将其cartList中的商品id进行比对,如果在其中,则把商品数量+1,否则从商品集合中查询商品信息,插入到cartList数组中。

前端添加购物车请求:

addCart(productId){//加入购物车
   axios.post('./users/addCart',{
    userId:"100000077",
    productId:productId
   }).then((response)=>{
    let res=response.data;
    console.log(res.msg);
   });
  }

后端处理:

var express = require('express');
var router = express.Router();
const mongoose=require('mongoose');
var user=require('../models/userModel');
var goods=require('../models/productModel');
//连接数据库
mongoose.connect('mongodb://localhost:27017/mall');
mongoose.connection.on('connected',()=>{
 console.log("mongoDB连接成功");
});
//处理添加购物车请求
router.post('/addCart',(req,res,next)=>{
 let userId=req.body.userId;
 let productId=req.body.productId;
 let params={
  userId
 };
 user.findOne(params,(err,userDoc)=>{//查询对应用户信息
  if (err){
   res.json({
    status:1,
    msg:err.message
   });
  }else{
   if(userDoc){
    let inCart=false;
    userDoc.cartList.forEach(function(item){//遍历cartList比对商品id
     if (item.productId==productId){    //若商品在购物车内,数量增加
      inCart=true;
      item.productNum++;
      saveDoc(userDoc,res);
     }
    });
    //所选商品不在购物车内,则从商品列表内查找并添加到购物车
    if(!inCart){
     goods.findOne({productId},(err,goodsDoc)=>{
      if(err){
       res.json({
        status:1,
        msg:err.message
       })
      }else{
       goodsDoc.checked=true;
       goodsDoc.productNum=1;
       userDoc.cartList.push(goodsDoc);//将商品插入到用户cartList数组内
       console.log(userDoc.cartList);
       saveDoc(userDoc,res);
      }
     });
    }
   }
  }
 })
});

利用doc.save将修改后的文档保存到数据库

function saveDoc(doc,res) {
 //保存操作
 doc.save((err,doc)=>{
  if (err){
   res.json({
    status:1,
    msg:err.message
   })
  }else {
   res.json({
    status:0,
    msg:"添加购物车成功",
    result:'success'
   })
  }
 })
}

3、从购物车删除数据

前端点击删除按钮,调用deleteCart()发出post请求,删除成功重新加载购物车列表

deleteCart(){
    axios.post('users/deleteCart',{
     productId:this.productId
    }).then((response,err)=>{
     let res=response.data;
     if(res.status===0){
      this.getCart();
      this.modalShow=false;
     }
    })
   },

后端获取到删除商品的id、用户的id,删除数据库中指定条目

router.post('/deleteCart',(req,res)=>{
 "use strict";
 let productId=req.body.productId;
 let userId=req.cookies.userId;
 user.update({userId:userId},{
  $pull:{
   cartList:{productId:productId}
  }
 },(err,doc)=>{
  if(err){
   res.json({
    status:1,
    msg:'数据库删除失败'
   })
  }else{
   if(doc){
    res.json({
     status:0,
     msg:'购物车删除成功'
    })
   }
  }
 })
});

4、修改购物车

前端对不同的按钮点击,实现购物车数量的增、减、选中的改变,调用editCart(opt,item),然后将修改的数据以post发送

editCart(flag,item){
    if(flag==='check'){
     item.checked=!item.checked;
    }else if(flag==='add'){
     item.productNum++;
    }else if(flag==='sub'){
     item.productNum<=0 ? item.productNum=0 : item.productNum++ ;
    }
    axios.post('users/editCart',{
     productId:item.productId,
     checked:item.checked,
     productNum:item.productNum
    }).then((response,err)=>{
     let res=response.data;
     if(res.status===0){
      this.getCart();
     }else{
      console.log(res.msg);
     }
    })
}

后端接收要修改的数据,并对数据库进行更新:

router.post('/editCart',(req,res)=>{
 "use strict";
 let productId=req.body.productId;
 let checked=req.body.checked;
 let productNum=req.body.productNum;
 let userId=req.cookies.userId;
 user.update({userId:userId,'cartList.productId':productId},{
  $set:{"cartList.$.checked":checked,"cartList.$.productNum":productNum}
 },(err,doc)=>{
  if(err){
   res.json({
    status:1,
    msg:err.message
   })
  }else {
   res.json({
    status:0,
    msg:'购物车更新成功'
   })
  }
 })
});

5、查询购物车

前端发送查询购物车get请求,将结果数据赋予catList,页面遍历cartList渲染数据

getCart(){
    axios.get('users/getCart').then((response,err)=>{
     let res=response.data;
     if(res.status===0){
      this.cartList=res.result.list;
     }else{
      console.log(res.msg);
     }
    })
   },

后端根据用户的cookie,查询指定的用户的购物车

router.get('/getCart',(req,res)=>{
 "use strict";
 user.findOne({userId:req.cookies.userId},(err,doc)=>{
  if(doc){
   res.json({
    status:0,
    msg:'',
    result:{
     list:doc.cartList
    }
   })
  }else{
   res.json({
    status:1,
    msg:"购物车列表查询失败"
   })
  }
 })
});

6、购物车的总价与全选

利用vue的计算属性可以实现属性的随时变化,计算属性只有在相关数据发送改变时才会随之改变,计算属性的实现像函数,但使用类似于一般属性,例如总价totalPrice与判断是否全部选中allSelected:

computed:{
   totalPrice(){
    let total=0;
    this.cartList.forEach((item)=>{
     if(item.checked)
      total+=parseFloat(item.salePrice)*parseInt(item.productNum);
    });
    return total;
   },
   allSelected(){
    let selected=true;
    this.cartList.forEach((item)=>{
     selected=selected&&item.checked;
    });
    console.log(selected);
    return selected;
   }
  },

计算属性totalPrice由每个商品单价*数量而来,当其中有一个改变时,总价会立即改变,显示在页面中。

allSelected由每个商品是否选中作‘与'运算而来,当有其中一个的选中状态发送改变,allSelected也会改变,并改变购物车的全选标志。

希望本文所述对大家node.js程序设计有所帮助。

Javascript 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
Vue实现简单分页器
Dec 29 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
Angular如何由模板生成DOM树的方法
Dec 23 #Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 #Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 #Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 #Javascript
node.js事件轮询机制原理知识点
Dec 22 #Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 #Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 #Javascript
You might like
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
详解async/await 异步应用的常用场景
2019/05/13 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python实现把类当做字典来访问
2019/12/16 Python
python类中super() 的使用解析
2019/12/19 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
师范生自荐信模板
2014/05/28 职场文书
平面设计专业求职信
2014/08/09 职场文书
住房租房协议书
2014/08/20 职场文书
董事长助理岗位职责
2015/02/11 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
2015小学师德工作总结
2015/07/21 职场文书
Mysql基础之常见函数
2021/04/22 MySQL