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 相关文章推荐
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
Vue实现图书管理小案例
Dec 03 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上传、管理照片示例
2006/10/09 PHP
php 破解防盗链图片函数
2008/12/09 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python字符串对象实现原理详解
2019/07/01 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Python中return函数返回值实例用法
2020/11/19 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
材料物理专业大学毕业生求职信
2013/10/15 职场文书
给老师的检讨书
2014/02/11 职场文书
《画》教学反思
2014/04/14 职场文书
消防安全责任书范本
2014/04/15 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
数学系毕业生求职信
2014/05/29 职场文书
见习报告的格式
2014/10/31 职场文书
给老婆道歉的话
2015/01/20 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
delete in子查询不走索引问题分析
2022/07/07 MySQL