🖥️ 一、系统架构概览
1.1 技术选型
为了确保开发效率和系统稳定性，我们采用以下技术栈：
| 模块 | 技术选型 |
|---|---|
| 后台服务 | SpringBoot + MyBatis-Plus + MySQL |
| 用户端（点餐小程序） | UniApp（Vue 语法） |
| 师傅端（厨房管理） | UniApp（Vue 语法） |
| 管理后台（运营端） | Vue + ElementUI |
1.2 业务流程
整体流程如下：
-
用户端：用户通过 UniApp 小程序浏览菜品，加入购物车并提交订单；
-
后台服务：SpringBoot 处理订单逻辑，并存储至 MySQL；
-
师傅端：后厨通过 UniApp 查看待处理订单，准备餐品；
-
管理后台：运营人员通过 Vue + ElementUI 进行菜品管理、订单监控。
📊 二、数据库设计
数据库采用 MySQL，表结构设计如下：
sql
复制编辑
-- 用户表 CREATE TABLE user ( id BIGINT PRIMARY KEY AUTO_INCREMENT, openid VARCHAR(50) UNIQUE NOT NULL, nickname VARCHAR(50), phone VARCHAR(20), create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- 菜品表 CREATE TABLE dish ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, price DECIMAL(10,2) NOT NULL, category_id BIGINT NOT NULL, image_url VARCHAR(255), create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- 订单表 CREATE TABLE orders ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL, total_price DECIMAL(10,2) NOT NULL, status ENUM('PENDING', 'PROCESSING', 'COMPLETED', 'CANCELLED') DEFAULT 'PENDING', create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP );
🛠️ 三、SpringBoot 后台开发
3.1 搭建 SpringBoot + MyBatis-Plus
我们使用 SpringBoot + MyBatis-Plus 来管理数据库交互，并借助 Lombok 简化代码。
📌 依赖引入
在 pom.xml 中加入依赖：
xml
复制编辑
<dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.1</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency>
📌 配置数据源
在 application.yml 配置 MySQL：
yaml
复制编辑
spring: datasource: url: jdbc:mysql://localhost:3306/restaurant?serverTimezone=UTC username: root password: password driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: mapper-locations: classpath:/mapper/*.xml
📌 订单管理 API
（1）订单实体
java
复制编辑
@Data @TableName("orders") public class Order { @TableId(type = IdType.AUTO) private Long id; private Long userId; private BigDecimal totalPrice; private String status; // PENDING, PROCESSING, COMPLETED, CANCELLED private LocalDateTime createTime; }
（2）订单 Mapper
java
复制编辑
@Mapper public interface OrderMapper extends BaseMapper<Order> { }
（3）订单 Service
java
复制编辑
@Service public class OrderService { @Autowired private OrderMapper orderMapper; public List<Order> getOrdersByUser(Long userId) { return orderMapper.selectList(new QueryWrapper<Order>().eq("user_id", userId)); } }
（4）订单 Controller
java
复制编辑
@RestController @RequestMapping("/orders") public class OrderController { @Autowired private OrderService orderService; @GetMapping("/user/{userId}") public List<Order> getUserOrders(@PathVariable Long userId) { return orderService.getOrdersByUser(userId); } }
📱 四、UniApp 小程序开发
4.1 用户端（点餐界面）
📌 商品列表
vue
复制编辑
<template> <view> <view v-for="dish in dishes" :key="dish.id"> <image :src="dish.image_url"></image> <text>{{ dish.name }} - ¥{{ dish.price }}</text> <button @click="addToCart(dish)">加入购物车</button> </view> </view> </template> <script> export default { data() { return { dishes: [] }; }, async onLoad() { const res = await uni.request({ url: "https://api.restaurant.com/dishes", method: "GET" }); this.dishes = res.data; }, methods: { addToCart(dish) { // 购物车逻辑 } } }; </script>
🚀 五、性能优化
| 优化方案 | 实现方式 | 优缺点 |
|---|---|---|
| 数据库索引优化 | 给 user_id、status 添加索引 | 优点：查询快；缺点：占用索引存储 |
| Redis 缓存 | 订单数据缓存至 Redis，减少数据库查询 | 优点：高效；缺点：数据一致性需处理 |
| 异步处理 | 使用 @Async 处理订单通知 | 优点：提升性能；缺点：调试复杂 |
⚠️ 常见误区
-
数据库索引滥用：错误使用索引会导致性能下降。
-
前端数据未分页：一次性加载大量数据影响体验。
-
Redis 缓存未更新：数据过期策略需要合理设计。
🔚 结语
本篇文章完整介绍了基于 SpringBoot + UniApp + Vue + MySQL 的餐厅点餐小程序，涵盖 数据库设计、API 开发、前端实现及性能优化。
开放问题：
-
你在开发类似系统时遇到了哪些问题？
-
你认为 Redis 适用于所有订单数据的缓存吗？
💬 欢迎在评论区交流你的想法！ 🚀