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编程起步(第六课)
Jan 10 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
详解React的回调渲染模式
Sep 10 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
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
js 火狐下取本地路径实现思路
2013/04/02 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
JS数组方法concat()用法实例分析
2020/01/18 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
python可视化实现KNN算法
2019/10/16 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
5s推行计划书
2014/05/06 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
婚姻出轨保证书
2015/05/08 职场文书
入党积极分子群众意见
2015/06/01 职场文书
安全生产奖惩制度
2015/08/06 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
Pytest中conftest.py的用法
2021/06/27 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL