node.js使用mongoose操作數(shù)據(jù)庫實現(xiàn)購物車的增、刪、改、查功能示例

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

本文實例講述了node.js使用mongoose操作數(shù)據(jù)庫實現(xiàn)購物車的增、刪、改、查功能。分享給大家供大家參考，具體如下：

1、數(shù)據(jù)庫操作語句

Mongoose通過model實現(xiàn)對每個集合的操作，在使用前需要先定義model:goods。

①、增加數(shù)據(jù)：從集合中查詢一條記錄，并返回doc，對doc操作之后通過save()保存到集合

goods.findOne({productId},(err,goodsDoc)=>{
   goodsDoc.productNum=1;
   goodsDoc.save(err,doc);
});

②、刪除數(shù)據(jù)：

model.remove(conditions,callback(){})

③、修改數(shù)據(jù)：

model.update(conditions,updates,callback(){})

④、查詢數(shù)據(jù)：

model.find(conditions,callback(){})

2、添加購物車

在mongodb中新建用戶user集合，user中有cartList數(shù)組，用戶點擊添加購物車時在前端發(fā)出post請求包括用戶、商品的id。然后在后端查詢到對應的用戶，將其cartList中的商品id進行比對，如果在其中，則把商品數(shù)量+1，否則從商品集合中查詢商品信息，插入到cartList數(shù)組中。

前端添加購物車請求：

  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');
//連接數(shù)據(jù)庫
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){    //若商品在購物車內(nèi)，數(shù)量增加
      inCart=true;
      item.productNum++;
      saveDoc(userDoc,res);
     }
    });
    //所選商品不在購物車內(nèi)，則從商品列表內(nèi)查找并添加到購物車
    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數(shù)組內(nèi)
       console.log(userDoc.cartList);
       saveDoc(userDoc,res);
      }
     });
    }
   }
  }
 })
});

利用doc.save將修改后的文檔保存到數(shù)據(jù)庫

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、從購物車刪除數(shù)據(jù)

前端點擊刪除按鈕，調(diào)用deleteCart()發(fā)出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，刪除數(shù)據(jù)庫中指定條目

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:'數(shù)據(jù)庫刪除失敗'
   })
  }else{
   if(doc){
    res.json({
     status:0,
     msg:'購物車刪除成功'
    })
   }
  }
 })
});

4、修改購物車

前端對不同的按鈕點擊，實現(xiàn)購物車數(shù)量的增、減、選中的改變，調(diào)用editCart(opt,item)，然后將修改的數(shù)據(jù)以post發(fā)送

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);
     }
    })
}

后端接收要修改的數(shù)據(jù)，并對數(shù)據(jù)庫進行更新：

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、查詢購物車

前端發(fā)送查詢購物車get請求，將結(jié)果數(shù)據(jù)賦予catList，頁面遍歷cartList渲染數(shù)據(jù)

   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);
     }
    })
   },

后端根據(jù)用戶的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的計算屬性可以實現(xiàn)屬性的隨時變化，計算屬性只有在相關(guān)數(shù)據(jù)發(fā)送改變時才會隨之改變，計算屬性的實現(xiàn)像函數(shù)，但使用類似于一般屬性，例如總價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由每個商品單價*數(shù)量而來，當其中有一個改變時，總價會立即改變，顯示在頁面中。

allSelected由每個商品是否選中作‘與'運算而來，當有其中一個的選中狀態(tài)發(fā)送改變，allSelected也會改變，并改變購物車的全選標志。

希望本文所述對大家node.js程序設計有所幫助。

上一篇：Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳

欄目：JavaScript

下一篇：javascript實現(xiàn)鼠標點擊生成文字特效

本文標題：node.js使用mongoose操作數(shù)據(jù)庫實現(xiàn)購物車的增、刪、改、查功能示例

本文地址：http://mengdiqiu.com.cn/a1/JavaScript/9412.html

更多JavaScript