实战 | 餐厅点餐小程序技术解析：SpringBoot + UniApp 高效开发指南

🖥️ 一、系统架构概览

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` 处理订单通知	优点：提升性能；缺点：调试复杂