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 清空form表单中某种元素的值
Dec 26 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
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 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
试用php中oci8扩展
2015/06/18 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python实现的多线程端口扫描工具分享
2015/01/21 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
使用python模拟高斯分布例子
2019/12/09 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
线程同步的方法
2016/11/23 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
大学三年的自我评价
2013/12/25 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
高中语文课后反思
2014/04/27 职场文书
五好关工委申报材料
2014/05/31 职场文书
云台山导游词
2015/02/03 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
python多次执行绘制条形图
2022/04/20 Python
python 学习GCN图卷积神经网络
2022/05/11 Python