当前位置: 首页 > 编程笔记 >

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

华俊弼
2023-03-14
本文向大家介绍node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例,包括了node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍Node.js操作mysql数据库增删改查,包括了Node.js操作mysql数据库增删改查的使用技巧和注意事项,需要的朋友参考一下 关于node.js操作mysql数据库的相关介绍请阅读全文吧。下文介绍的非常详细,具体内容如下所示:  安装mysql模块 数据库准备 mysql server所在的机器IP地址是192.168.0.108,登录账户就用root@123456 在mys

  • 本文向大家介绍Python实现的购物车功能示例,包括了Python实现的购物车功能示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Python实现的购物车功能。分享给大家供大家参考,具体如下: 这里尝试用python实现简单的购物车程序。。。 基本要求: 用户输入工资,然后打印购物菜单 用户可以不断的购买商品,直到余额不够为止 退出时打印用户已购买的商品和剩余金额。。。 代码: 运行效

  • 本文向大家介绍layui使用数据表格实现购物车功能,包括了layui使用数据表格实现购物车功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码,供大家参考,具体内容如下 html部分 css部分 js部分 功能核心知识: 通过一个全局数组来存储,点击商品后,拿到的商品信息,用数据来驱动购物车表格显示。 以上就是本文的全部内容,希望对大家的

  • 本文向大家介绍Android实现购物车功能,包括了Android实现购物车功能的使用技巧和注意事项,需要的朋友参考一下 最近看了一些淘宝购物车的demo,于是也写了一个。 效果图如下: 主要代码如下: actvity中的代码: actvity中XML的代码: -XML中头部可以到网上找一个这里就不放上来了 .checkbox和button的样式可以根据个人喜好设置。 Adaper中的代码: Ada

  • 本文向大家介绍vant实现购物车功能,包括了vant实现购物车功能的使用技巧和注意事项,需要的朋友参考一下 做一些电商或者支付页面,肯定少不了购物车功能,一方面正反选,另一方面动态价格,全选之后再去加减商品数量(这里必须考虑 里面有很多蛋疼的问题)猛的一想,感觉思路很清晰,但是,真正动起手来就各种bug出来了,说实话 搞这个购物车,浪费我整整一下午的时间,当我回过头捋一遍,其实,半小时就能完事。就

  • 本文向大家介绍Python3实现购物车功能,包括了Python3实现购物车功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Python3实现购物车功能的具体代码,供大家参考,具体内容如下 购物车要求: 1、启动程序后,输入用户名密码后,如果是第一次登录,让用户输入工资,然后打印商品列表 2、允许用户根据商品编号购买商品 3、用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒