温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片1. 项目背景与需求分析随着校园生活节奏的加快传统食堂排队点餐方式已难以满足师生的就餐需求。本项目基于 SpringBoot3 与 Vue3 技术栈设计并实现一套校园点餐小程序覆盖用户点餐、商家接单、后台管理等核心业务场景旨在提升校园餐饮服务的数字化水平与就餐效率。2. 技术选型与架构设计本项目采用前后端分离架构前端基于 Vue3 构建小程序端与管理后台后端基于 SpringBoot3 提供 RESTful API 服务数据存储选用 MySQL 与 Redis 组合方案。2.1 后端技术栈SpringBoot3核心框架提供自动配置与快速开发能力。Spring Security JWT实现用户认证与接口鉴权。MyBatis-Plus简化数据持久层开发。Redis缓存热点数据如菜品列表、购物车信息。MySQL存储用户、菜品、订单等核心业务数据。2.2 前端技术栈Vue3采用组合式 API 构建用户界面。Vite前端构建与开发服务器。Pinia全局状态管理维护用户登录态与购物车数据。uni-app跨端开发框架一套代码编译到微信小程序与 H5。Element Plus管理后台 UI 组件库。2.3 系统架构图flowchart TD A[微信小程序端] -- B[Nginx 反向代理] B -- C[SpringBoot3 后端服务] C -- D[MySQL 数据库] C -- E[Redis 缓存] C -- F[对象存储 OSS] G[管理后台 Vue3] -- B3. 数据库设计系统核心数据表包括用户表、商家表、菜品表、订单表、订单明细表与购物车表。以下为关键表结构设计。3.1 用户表 user字段名类型说明idbigint主键自增openidvarchar(64)微信小程序唯一标识nicknamevarchar(50)用户昵称avatarvarchar(255)头像地址phonevarchar(20)手机号roletinyint角色0 用户1 商家2 管理员create_timedatetime创建时间3.2 菜品表 dish字段名类型说明idbigint主键自增merchant_idbigint所属商家 IDnamevarchar(50)菜品名称imagevarchar(255)菜品图片pricedecimal(10,2)单价stockint库存数量statustinyint状态0 下架1 上架3.3 订单表 orders字段名类型说明idbigint主键自增order_novarchar(32)订单编号user_idbigint下单用户 IDmerchant_idbigint接单商家 IDtotal_amountdecimal(10,2)订单总金额statustinyint状态0 待支付1 已支付2 制作中3 待取餐4 已完成5 已取消create_timedatetime下单时间4. 后端核心实现4.1 项目初始化与依赖配置创建 SpringBoot3 项目在 pom.xml 中引入核心依赖。dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.5/version /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-data-redis/artifactId /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency4.2 用户登录接口实现用户通过微信小程序授权登录后端调用微信接口换取 openid并签发 JWT Token。RestController RequestMapping(/api/user) public class UserController { Resource private UserService userService; PostMapping(/login) public Resultlt;Stringgt; login(RequestBody LoginDTO dto) { String openid userService.getOpenid(dto.getCode()); User user userService.findOrCreate(openid); String token JwtUtil.generateToken(user.getId(), user.getRole()); return Result.success(token); } }4.3 菜品查询接口实现小程序首页展示商家与菜品列表接口支持按商家 ID 过滤与关键词搜索。GetMapping(/list) public ResultPageDishVO list(RequestParam Long merchantId, RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size) { PageDishVO result dishService.queryPage(merchantId, page, size); return Result.success(result); }4.4 下单与支付流程用户提交订单后后端校验库存并扣减生成订单记录随后调用微信支付统一下单接口。Transactional public OrderVO createOrder(OrderDTO dto) { // 1. 校验菜品库存 // 2. 计算订单总金额 // 3. 扣减库存 // 4. 生成订单记录 // 5. 调用微信支付接口 return orderVO; }5. 前端小程序端实现5.1 项目创建与目录结构使用 uni-app 创建 Vue3 项目目录结构如下。src/ ├── pages/ │ ├── index/ // 首页 │ ├── category/ // 分类页 │ ├── cart/ // 购物车 │ ├── order/ // 订单列表 │ └── mine/ // 个人中心 ├── store/ // Pinia 状态管理 ├── api/ // 接口请求封装 ├── utils/ // 工具函数 └── App.vue5.2 首页菜品展示首页通过接口拉取商家与菜品数据使用卡片式布局展示。template view classdish-card v-fordish in dishList :keydish.id image :srcdish.image classdish-image / view classdish-info text classdish-name{{ dish.name }}/text text classdish-price¥{{ dish.price }}/text button clickaddToCart(dish)加入购物车/button /view /view /template5.3 购物车状态管理使用 Pinia 管理购物车数据支持添加、删除与数量修改。export const useCartStore defineStore(cart, { state: () ({ items: [] }), actions: { addItem(dish) { const exist this.items.find(item item.id dish.id); if (exist) { exist.count; } else { this.items.push({ ...dish, count: 1 }); } }, removeItem(id) { this.items this.items.filter(item item.id ! id); } } });6. 管理后台实现管理后台基于 Vue3 与 Element Plus 构建面向商家与平台管理员提供菜品管理、订单处理、数据统计等能力。6.1 菜品管理页面商家可对菜品进行上架、下架、编辑与库存调整操作。el-table :datadishList el-table-column propname label菜品名称 / el-table-column propprice label价格 / el-table-column propstock label库存 / el-table-column label操作 template #defaultscope el-button clickeditDish(scope.row)编辑/el-button el-button clicktoggleStatus(scope.row)上架/下架/el-button /template /el-table-column /el-table6.2 订单处理流程商家在后台查看新订单依次执行接单、制作完成、通知取餐等操作订单状态实时同步至小程序端。7. 系统测试与部署7.1 功能测试对用户登录、菜品浏览、下单支付、订单管理等核心流程进行功能测试确保各模块交互正常。7.2 部署方案后端打包为 Jar 包部署至云服务器前端小程序通过微信开发者工具上传审核管理后台构建为静态资源部署至 Nginx。# 后端打包 mvn clean package -DskipTests # 启动服务 java -jar campus-order.jar --spring.profiles.activeprod8. 总结与展望本项目完整实现了校园点餐小程序的核心业务流程前后端分离架构清晰具备良好的扩展性。后续可进一步引入推荐算法、排队叫号、营养分析等增值功能持续提升校园餐饮服务体验。