外卖系统开发实战：从架构设计到代码实现
开发一套外卖系统，需要在架构设计、技术选型以及核心功能开发等方面下功夫。这篇文章将通过代码实例，展示如何构建一个基础的外卖系统，从需求梳理到核心模块的实现，帮助你快速掌握开发要点。
一、系统架构设计
一个完整的外卖系统通常分为以下几个模块：
用户端：提供下单、支付和订单状态查看。
商家端：用于菜单管理、订单管理和统计分析。
配送端：负责订单接单、路径规划、实时状态更新。
后台管理系统：管理用户、订单和财务数据。
为了保证系统的扩展性和性能，这里采用前后端分离架构：
前端使用 Vue.js，结合 Element UI 进行页面开发。
后端使用 Node.js (Express) 搭配 MongoDB 实现 RESTful API 服务。
部署使用 Docker 和 Nginx，支持负载均衡和容器化管理。
二、技术选型与开发环境
前端技术栈：Vue 3、Axios、Vue Router、Vuex。
后端技术栈：Node.js、Express、Mongoose。
数据库：MongoDB（用于订单、用户等数据存储）。
其他工具：Postman（API 调试）、VS Code（开发工具）。
三、用户端核心功能开发示例
1. 登录与注册模块
用户需要通过手机号码或邮箱登录，这里以 JWT（JSON Web Token） 实现认证机制。
后端代码实现：
// server.js
const express = require('express');
const jwt = require('jsonwebtoken');
const bodyParser = require('body-parser');
const bcrypt = require('bcrypt');
const User = require('./models/User'); // 用户模型
const app = express();
app.use(bodyParser.json());
// 用户登录
app.post('/login', async (req, res) => {
const { email, password } = req.body;
const user = await User.findOne({ email });
if (!user || !bcrypt.compareSync(password, user.password)) {
return res.status(401).json({ message: '用户名或密码错误' });
}
const token = jwt.sign({ id: user._id }, 'SECRET_KEY', { expiresIn: '1h' });
res.json({ token });
});
// 用户注册
app.post('/register', async (req, res) => {
const { email, password } = req.body;
const hashedPassword = bcrypt.hashSync(password, 10);
const newUser = new User({ email, password: hashedPassword });
await newUser.save();
res.status(201).json({ message: '注册成功' });
});
app.listen(3000, () => console.log('Server running on http://localhost:3000'));
2. 商品列表与购物车
用户可以浏览商品列表，并添加商品到购物车中。
前端代码实现：
<template>
<div>
<h1>商品列表</h1>
<div v-for="product in products" :key="product.id">
<h3>{{ product.name }} - ￥{{ product.price }}</h3>
<button @click="addToCart(product)">加入购物车</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
products: [],
};
},
methods: {
async fetchProducts() {
const response = await axios.get('/api/products');
this.products = response.data;
},
addToCart(product) {
this.$store.commit('ADD_TO_CART', product);
},
},
mounted() {
this.fetchProducts();
},
};
</script>
Vuex 存储购物车数据：
// store.js
export default {
state: {
cart: [],
},
mutations: {
ADD_TO_CART(state, product) {
state.cart.push(product);
},
},
getters: {
cartTotal(state) {
return state.cart.reduce((sum, item) => sum + item.price, 0);
},
},
};
3. 订单支付功能
支付功能需要对接第三方支付接口（如支付宝、微信支付）。
后端代码实现支付接口：
const express = require('express');
const router = express.Router();
const axios = require('axios');
router.post('/pay', async (req, res) => {
const { orderId, amount } = req.body;
try {
const paymentResponse = await axios.post('https://payment-gateway.com/api/pay', {
orderId,
amount,
});
res.json(paymentResponse.data);
} catch (error) {
res.status(500).json({ message: '支付失败' });
}
});
module.exports = router;
四、商家端功能实现示例
1. 订单管理
商家可以查看订单状态并进行接单操作。
后端代码实现：
app.get('/orders', async (req, res) => {
const orders = await Order.find({ status: 'pending' });
res.json(orders);
});
app.patch('/orders/:id', async (req, res) => {
const { id } = req.params;
const updatedOrder = await Order.findByIdAndUpdate(id, { status: 'accepted' });
res.json(updatedOrder);
});
五、部署与上线
使用 Docker 进行部署：
Dockerfile
# 基础镜像
FROM node:14
# 设置工作目录
WORKDIR /app
# 拷贝项目文件
COPY . .
# 安装依赖
RUN npm install
# 启动应用
CMD ["npm", "start"]
EXPOSE 3000
执行以下命令完成构建和启动：
docker build -t food-delivery-app .
docker run -d -p 3000:3000 food-delivery-app
总结
本文通过代码实例展示了外卖系统开发的部分核心模块，包括用户登录注册、商品列表、订单支付以及商家端订单管理。实际开发中，你可以根据业务需求扩展更多功能模块，并在上线前完成全面测试。
希望本文能为你的外卖系统开发提供实用参考！