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程序设计有所帮助。

(0)

相关推荐

  • Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解

    本文实例讲述了Vue+Node实现商品列表的分页.排序.筛选,添加购物车功能.分享给大家供大家参考,具体如下: 1.分页 商品列表的分页实现是后台根据前端请求的页面大小.页码位置,去数据库中查询指定位置的数据然后返回给前端.比如页面大小为8,要查第3页的数据,则跳过2*8条数据,然后返回接下来的8条数据. 实现滚动加载:页面刚一加载完成并不需要请求所有数据,只显示一部分.当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中.通过vue-infinite-scroll插件实现滚动加载,在框架

  • MongoDB用Mongoose得到的对象不能增加属性完美解决方法(两种)

    一,先定义了一个goods(商品)的models var mongoose = require('mongoose'); var Schema = mongoose.Schema; var productSchema = new Schema({ "productId":String, "producName": String, "salePrice":Number, "productImage":String }); mod

  • Node.js的MongoDB驱动Mongoose基本使用教程

    使用mongoose可以让我们更好使用mongodb数据库,而不需要写繁琐的业务逻辑. 安装 npm install mongoose 初始化使用 使用mongoose前,需安装node和mongodb,这里不讲node和mongodb的安装方法. var mongoose = require("mongoose"); var Schema = mongoose.Schema; var db = mongoose.connection; mongoose.connect('mongod

  • 详解Nodejs基于mongoose模块的增删改查的操作

    MongoDB MongoDB是基于Javascript语言的数据库,存储格式是JSON,而Node也是基于JavaScript的环境(库),所以node和mongoDB的搭配能减少因为数据转换带来的时间空间开销. Mongoose 是MongoDB的一个对象模型工具,它将数据库中的数据转换为JavaScript对象以供你在应用中使用,封装了MongoDB对文档的的一些增删改查等常用方法,让NodeJS操作Mongodb数据库变得更加灵活简单. 安装模块mongoose npm install

  • 利用Mongoose让JSON数据直接插入或更新到MongoDB

    前言 Nodejs基于Javascript,MongoDB脚步同样也是基于Javascript.而且他们的数据存储格式都是JSON,这就是为什么要把他们放在一起的原因了.如果程序前后端能直接处理JSON,我想数据处理过程又可以极大的减化了,代码量又将低少1/5.多么的兴奋啊!让我们来动手验证一下想法吧. 本文重点介绍web前端通过JQuery发起POST提交JSON数据,通过Mongoose直接插入或更新到MongoDB. 工程目录沿用nodejs-demo,增加/mongoose路径及对应文件

  • 详解Nodejs mongoose

    前言 Mongoose 是在nodejs环境下,对mongodb进行便捷操作的对象模型工具.本文介绍解(翻)密(译)Mongoose插件. Schema 开始我们就要讲到Schema,一个Schema对应的是mongodb的collection(相当于SQL table),并且定义其结构. var mongoose = require('mongoose'); var Schema = mongoose.Schema; //定义一个博客结构 var blogSchema = new Schema

  • Mongodb 数据类型及Mongoose常用CURD

    前言 看完了Node.js实战,其中在数据存储部分提到了Redis.Mongodb,我自己也根据书中的介绍写了几个简单的demo,在demo的过程首先遇到的问题就是数据类型和常见的CURD写法. mongodb的常见操作有两种方式,一个是直接使用API,也就相当于你在SQL Server客户端中使用T-SQL编写SQL语句来操作数据一样,其次就是在程序中使用mongoose驱动来操作数据,相当于我们在程序里用ADO.NET或EF来操作数据,如果你已经写了几个调用API的demo,那么我建议再回过

  • Mongoose实现虚拟字段查询的方法详解

    前言 不知道大家知不知道,mongoose为数据模型提供了虚拟属性, 借此可以更加一致地.方便地读写模型属性,类似于C#或Java中的访问器. 我们知道虚拟属性在Query阶段一定是查不到的,因为事实上MongoDB并没有存储这些属性. 但是否可以通过一个拦截器来实现虚拟属性的查询呢? 这个问题很有趣,而且在很多场景下都相当方便.例如: 实现一个暴力的全文检索时,需要对多个字段匹配统一查询词,该查询词可抽象为虚拟属性: 多处都需要进行同一个复杂条件的查询时,可以用虚拟属性封装该查询条件. 事实上

  • Node.js中使用mongoose操作mongodb数据库的方法

    如何利用mongoose将数据写入mongodb数据库? 1.利用npm下载安装mongoose; npm install mongoose 2.建立js文件,引入mongoose var mongoose = require('mongoose'); 3.mongoose.connect连接数据库 //连服务器 mongoose.connect('mongodb://127.0.0.1:27017/test'); //数据库的名字 var connection = mongoose.conne

  • Mongoose学习全面理解(推荐)

    一.创建schemas 创建schemas的方式: var userSchema = new mongoose.Schema({ name: String, email: String, createdOn: Date }); schemas中的数据类型有以下几种: String Number Date Boolean Buffer ObjectId Mixed Array 特别需要说明一下ObjectId类型和Mixed类型以及Array类型,在schemas中声明这几种类型的方式如下: //

  • 用vue和node写的简易购物车实现

    项目介绍 这是用vue写前端,用node来接收前端发来的请求,然后进行相应的数据操作,例如数据的存取和删除等.这是个人的练习项目,目前功能做的比较简单,主要是展示商品列表,把商品加入购物车,从购物车删除商品三个小功能. 搭建本地环境 因为是用vue,需要用babel把es6语法转为es5语法. 1.配置.babelrc文件 { "presets": [ "es2015", "stage-2" ], "plugins": [&q

随机推荐