四、node系列之购物车的业务逻辑

6 篇文章 1 订阅
1 篇文章 0 订阅


在第 二个章节中讲解了用户的登陆注册,在第 三个章节中讲解了产品的相关接口设计,本章节中讲解的购物车的相关逻辑

1、加入购物车业务逻辑

1.1 创建购物车模块 myapp/routes/cart.js

var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
  res.send('购物车')
});

module.exports = router;

1.2 app.js中注册路由

var cartRouter = require('./routes/cart');
app.use('/cart', cartRouter);

1.3 设计购物车的数据库集合

// sql/collection/carts.js
const mongoose = require('../db.js'); // 引入数据库连接模块
const Schema = mongoose.Schema; // 拿到当前数据库相应的集合对象

const cartSchema = new Schema({ 
  cartid: {type: String },
  userid: { type: String },
  proid: { type: String },
  num: { type: Number }
})

module.exports = mongoose.model('Cart', cartSchema);

1.4 加入购物车业务逻辑

如果用户之前添加过当前商品需要更新数量
加入购物车需要参数用户id、产品id以及商品数量

// 加入购物车 购物车数据id 产品id 用户id  产品的数量num
router.get('/add', (req, res, next) => {
  // 1、获取数据
  let { userid, proid, num } = req.query;
  num = num * 1 || 1 // 设定默认数量
  // 2、加入购物车 
  // 如果当前用户的购物车中有这个产品,数量加1,否则加入
  sql.find(Cart, { userid, proid }, { _id: 0 }).then(data => {
    if (data.length === 0) {
      // 2.1没有改数据 --- 插入数据库操作
      sql.insert(Cart, {
        cartid: 'cart_' + uuid.v1(),
        userid,
        proid,
        num
      }).then(() => {
        res.send({
          code: '200',
          message: '加入购物车成功'
        })
      })
    } else {
      // 2.2更新数据库中购物车产品的数量
      sql.update(Cart, { userid, proid }, { $inc: { num: 1 } }).then(() => {
        res.send({
          code: '200',
          message: '加入购物车成功'
        })
      })
    }
  })
})

2、查看购物车业务逻辑

依据用户id获取所有该用户的购物车数据,然后依据产品id依次查询产品集合,获取购物车需要的数据,最后返回

router.get('/', function(req, res, next) {
  // 1、获取用户id
  let { userid } = req.query;
  let cartarr = []
  // 2、依据用户id查询购物车的数据
  sql.find(Cart, { userid }, { _id: 0 }).then(data => {
    // 如果没有数据,告诉用户没有数据
    if (data.length === 0) {
      // 2.1 没有数据
      res.send(utils.cartnull)
    } else {
      cartarr = data
      let promise1 = data.map(item => {
        return sql.find(Pro, { proid: item.proid}, { _id: 0})
      })
      return Promise.all(promise1)
    }
  }).then(list => {
    console.log('list', list)
    console.log('cartarr', cartarr)
    let arr = []
    list.map((item, index) => {
      arr.push({
        proid: item[0].proid,
        proname: item[0].proname,
        proimg: item[0].proimg,
        price: item[0].price,
        cartid: cartarr[index].cartid,
        userid: cartarr[index].userid,
        num: cartarr[index].num
      })
    })
    res.send({
      code: '200',
      data: arr
    })
  })
});

3、删除购物车数据

删除哪个用户添加的哪个商品

// 删除购物车
router.get('/delete', (req, res, next) => {
  // 1、获取删除的条件
  let { userid, proid } = req.query
  // 2、删除
  sql.delete(Cart, { userid, proid }).then(() => {
    res.send(utils.deletesuccess)
  })
})

4、更新购物车数据

根据购物车的id 修改商品的数量

// 更新购物车
router.get('/update', (req, res, next) => {
  // 1、获取更新的数据
  let { cartid, num } = req.query
  // 2、更新数据
  sql.update(Cart, { cartid }, { $set: { num: num } }).then(() => {
    res.send(utils.updatesuccess)
  })
  
})

5、预告

下次分享node系列之订单接口的实现

好的,下面我将为您提供一个简单的购物车示例,使用Vue.js和Node.js构建。在这个示例中,我们将使用Vue.js来呈现购物车的用户界面,使用Node.js来处理购物车业务逻辑数据库交互。 首先,我们将创建一个名为“shopping-cart”的文件夹,并在其中创建另外两个文件夹:client和server。在client文件夹中,我们将使用Vue.js创建一个简单的前端应用程序,而在server文件夹中,我们将使用Node.js创建一个后端服务器来处理购物车相关的逻辑。 **1. 前端部分** 在client文件夹中,我们将创建以下文件和文件夹: - **index.html** - 这是我们的主页面,用于呈现购物车的用户界面。 - **app.js** - 这是我们的Vue.js应用程序的主要JavaScript文件,用于管理购物车的状态和交互。 - **assets**文件夹 - 这个文件夹包含一些图像和CSS文件,用于美化我们的用户界面。 下面是index.html的代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shopping Cart</title> <link rel="stylesheet" href="assets/style.css"> </head> <body> <div id="app"> <h1>Shopping Cart</h1> <ul> <li v-for="(item, index) in cartItems" :key="index"> {{ item.name }} - {{ item.price }} - {{ item.quantity }} <button @click="removeItem(index)">Remove</button> </li> </ul> <p>Total: {{ total }}</p> <hr> <form @submit.prevent="addItem"> <input type="text" v-model="newItem.name" placeholder="Item Name"> <input type="number" v-model="newItem.price" placeholder="Price"> <input type="number" v-model="newItem.quantity" placeholder="Quantity"> <button>Add Item</button> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="app.js"></script> </body> </html> ``` 在这个HTML文件中,我们使用了Vue.js的指令v-for和v-model来呈现购物车中的所有物品,并使用v-on指令来绑定删除和添加物品的事件。我们还定义了一个form元素,用于添加新物品。 下面是app.js的代码: ```javascript var app = new Vue({ el: '#app', data: { cartItems: [], newItem: { name: '', price: '', quantity: '' } }, computed: { total: function() { var sum = 0; for (var i = 0; i < this.cartItems.length; i++) { sum += this.cartItems[i].price * this.cartItems[i].quantity; } return sum; } }, methods: { addItem: function() { this.cartItems.push({ name: this.newItem.name, price: this.newItem.price, quantity: this.newItem.quantity }); this.newItem.name = ''; this.newItem.price = ''; this.newItem.quantity = ''; }, removeItem: function(index) { this.cartItems.splice(index, 1); } } }); ``` 在这个JavaScript文件中,我们使用Vue.js的实例来定义购物车的数据和方法。我们使用cartItems数组来存储购物车中的物品,并使用newItem对象来存储新物品的信息。我们还定义了一个计算属性来计算购物车的总价值,并使用addItem和removeItem方法来添加和删除物品。 **2. 后端部分** 在server文件夹中,我们将创建以下文件和文件夹: - **package.json** - 这是我们的Node.js应用程序的配置文件,用于管理依赖项和脚本。 - **index.js** - 这是我们的Node.js应用程序的主要JavaScript文件,用于创建服务器并处理购物车相关的逻辑。 - **routes**文件夹 - 这个文件夹包含一些路由文件,用于处理不同的HTTP请求。 下面是package.json的代码: ```json { "name": "shopping-cart", "version": "1.0.0", "description": "A simple shopping cart app using Vue.js and Node.js", "main": "index.js", "dependencies": { "body-parser": "^1.19.0", "express": "^4.17.1" }, "scripts": { "start": "node index.js" } } ``` 在这个文件中,我们定义了我们的应用程序的名称、版本、描述、依赖项和脚本。我们使用了express和body-parser模块来创建服务器和解析HTTP请求体。 下面是index.js的代码: ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); const port = 3000; app.use(bodyParser.json()); let cartItems = []; app.get('/cartItems', (req, res) => { res.send(cartItems); }); app.post('/cartItems', (req, res) => { const newItem = req.body; cartItems.push(newItem); res.send('Item added to cart'); }); app.delete('/cartItems/:id', (req, res) => { const id = req.params.id; cartItems.splice(id, 1); res.send('Item removed from cart'); }); app.listen(port, () => { console.log(`Server running on port ${port}`); }); ``` 在这个JavaScript文件中,我们使用了express模块来创建一个HTTP服务器,并使用body-parser模块来解析HTTP请求体。我们定义了一个名为cartItems的数组来存储购物车中的物品,并使用GET、POST和DELETE方法来处理不同的HTTP请求。我们使用GET方法来获取购物车中的物品,使用POST方法来添加新物品,使用DELETE方法来删除物品。 **3. 运行应用程序** 现在我们已经完成了我们的购物车应用程序的前端和后端部分。我们可以使用以下命令来启动我们的应用程序: ``` cd shopping-cart/server npm install npm start ``` 这将启动我们的Node.js服务器,并在端口3000上监听请求。接下来,我们可以使用以下命令来启动我们的Vue.js应用程序: ``` cd shopping-cart/client npm install npm run serve ``` 这将启动我们的Vue.js应用程序,并在端口8080上运行。现在,我们可以在浏览器中访问http://localhost:8080,以查看我们的购物车应用程序的用户界面。 在用户界面中,我们可以添加新物品、删除物品和查看总价值。当我们添加或删除物品时,我们的Vue.js应用程序将向我们的Node.js服务器发送HTTP请求,并更新购物车的状态。我们的Node.js服务器将根据HTTP请求的类型和参数来更新cartItems数组,并返回HTTP响应以告知客户端操作是否成功。 以上就是一个简单的购物车示例,使用Vue.js和Node.js构建。您可以根据自己的需求和偏好来扩展和改进这个示例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值