🖥? 一、系統架構概覽

1.1 技術選型

為了確保開發效率和系統穩定性，我們采用以下技術棧：

模塊	技術選型
后臺服務	SpringBoot + MyBatis-Plus + MySQL
用戶端（點餐小程序）	UniApp（Vue 語法）
師傅端（廚房管理）	UniApp（Vue 語法）
管理后臺（運營端）	Vue + ElementUI

1.2 業務流程

整體流程如下：

1. 用戶端：用戶通過 UniApp 小程序瀏覽菜品，加入購物車并提交訂單；

2. 后臺服務：SpringBoot 處理訂單邏輯，并存儲至 MySQL；

3. 師傅端：后廚通過 UniApp 查看待處理訂單，準備餐品；

4. 管理后臺：運營人員通過 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?處理訂單通知	優點：提升性能；缺點：調試復雜

???常見誤區

1. 數據庫索引濫用：錯誤使用索引會導致性能下降。

2. 前端數據未分頁：一次性加載大量數據影響體驗。

3. Redis 緩存未更新：數據過期策略需要合理設計。

---

🔚 結語

本篇文章完整介紹了基于?SpringBoot + UniApp + Vue + MySQL?的餐廳點餐小程序，涵蓋?數據庫設計、API 開發、前端實現及性能優化。

開放問題：

• 你在開發類似系統時遇到了哪些問題？

• 你認為 Redis 適用于所有訂單數據的緩存嗎？

💬?歡迎在評論區交流你的想法！?🚀