摘要
随着高校办学规模扩大与智慧校园建设推进，传统食堂依赖人工点餐、纸质记账的方式已难以应对高峰时段人流密集、档口众多、订单处理滞后等问题。本文设计并实现了一套基于 B/S 架构的高校食堂点餐管理系统，后端采用 Spring Boot 2.7 提供 RESTful 接口，前端采用 Vue 3 与 Element Plus 构建管理界面，数据持久化使用 MyBatis，数据库选用 MySQL 8.0，并通过 JWT 实现身份认证与基于角色的访问控制。
系统面向校园食堂管理场景，涵盖菜品信息、点餐订单、档口信息、套餐管理、取餐窗口、菜品评价、原料采购、优惠活动、营业时段、食堂公告、会员餐卡、投诉建议及用户管理等功能模块，支持管理员、业务员、查看员三种角色。经功能测试与权限测试验证，系统运行稳定、操作便捷，能够有效提升食堂运营效率与服务质量，具有较好的实用价值。
关键词：食堂点餐；Spring Boot；Vue；MyBatis；JWT；B/S 架构
Abstract
With the expansion of universities and the development of smart campuses, traditional canteen operations based on manual ordering and paper records can hardly cope with peak-hour crowds, multiple stalls, and delayed order processing. This paper designs and implements a university canteen ordering management system based on the B/S architecture. The backend uses Spring Boot 2.7 to provide RESTful APIs, the frontend uses Vue 3 and Element Plus, persistence is handled by MyBatis with MySQL 8.0, and JWT is used for authentication and role-based access control.
The system covers dish management, orders, stalls, combo meals, pickup windows, reviews, procurement, promotions, business hours, announcements, meal cards, feedback, and user administration, supporting administrator, staff, and viewer roles. Tests confirm that the system is stable and practical for improving canteen operations.
Keywords: Canteen Ordering; Spring Boot; Vue; MyBatis; JWT; B/S Architecture
目录
1 概述
1.1 研究背景
1.2 研究目的与意义
1.3 国内外研究现状
1.4 主要研究内容
2 系统相关技术
2.1 Spring Boot 框架
2.2 Vue 框架
2.3 Element Plus
2.4 MyBatis
2.5 Axios 与 JSON
2.6 MySQL 数据库
2.7 JWT 身份认证
3 系统分析
3.1 可行性分析
3.2 需求分析
4 系统设计
4.1 系统架构设计
4.2 数据库设计
4.3 功能模块设计
5 系统实现
6 系统测试
7 总结与展望
参考文献
附录
1 概述
1.1 研究背景
高校食堂是师生日常生活的重要保障场所。随着在校生人数增长与餐饮需求多样化，食堂通常设置多个档口，提供菜品、套餐、面食、轻食等服务。高峰就餐时段订单集中、取餐排队长、菜品余量难以及时同步、优惠活动难统一管理等问题日益突出。
传统管理模式依赖人工收银与口头报餐，信息不透明、统计滞后，难以支撑精细化运营。在数字化校园背景下，建设一套覆盖点餐、备餐、取餐、评价与运营管理的信息化系统，成为提升食堂服务水平的现实需求。
1.2 研究目的与意义
本研究的主要目的包括：
（1）设计并实现功能完整的高校食堂点餐管理系统，覆盖档口运营核心业务；
（2）采用前后端分离架构，提升系统可维护性与可扩展性；
（3）建立基于角色的权限控制机制，保障业务数据安全；
（4）通过工作台统计与业务模块联动，为食堂管理决策提供数据支撑。
研究意义方面，理论上可将软件工程方法应用于校园后勤信息化场景；实践上可减少重复录入、提高订单处理与投诉响应效率，改善师生就餐体验。
1.3 国内外研究现状
1.3.1 国内研究现状
国内高校后勤信息化发展较快，食堂管理系统研究多围绕在线点餐、档口管理、餐卡支付与数据统计展开。技术路线上，早期以 SSM、SSH 为主，近年更多采用 Spring Boot + Vue/React 前后端分离方案，部分系统还对接微信小程序便于学生下单。现有系统在功能完善度上持续提升，但在角色权限细分、套餐与取餐窗口协同、投诉闭环等方面仍有改进空间。
1.3.2 国外研究现状
国外高校餐饮管理多与成熟餐饮 SaaS、校园一卡通及身份认证体系集成，强调自助点餐、预约就餐与营养信息披露。其流程标准化程度较高，但与国内多档口、套餐组合、卫生评价与本地化运营习惯存在差异，仍需结合国内校园场景进行定制开发。
1.4 主要研究内容
本文主要研究内容如下：
（1）调研食堂点餐业务流程，明确功能需求与三角色权限边界；
（2）完成系统总体架构、数据库与功能模块设计；
（3）基于 Spring Boot + Vue 完成前后端开发与 JWT 鉴权；
（4）开展功能测试与权限测试，验证系统可用性。
2 系统相关技术
2.1 Spring Boot 框架
Spring Boot 通过自动配置与起步依赖简化了 Spring 应用开发。本系统后端采用 Spring Boot 2.7.18，集成 Spring MVC 提供 RESTful API，内嵌 Tomcat 便于独立部署，并与 MyBatis、MySQL、JWT 等组件良好集成。
2.2 Vue 框架
Vue 3 是渐进式前端框架。本系统使用 Vue 3 + Vue Router 构建单页应用，采用 Composition API（script setup）组织页面逻辑，通过路由守卫实现登录校验与管理员页面访问控制。
2.3 Element Plus
Element Plus 为 Vue 3 提供表格、表单、对话框、分页、消息提示等组件。本系统管理后台界面基于 Element Plus 构建，保证交互风格统一、开发效率较高。
2.4 MyBatis
MyBatis 支持灵活 SQL 映射。本系统使用 mybatis-spring-boot-starter 2.3.2，采用注解方式编写增删改查 SQL，并开启驼峰命名自动映射。
2.5 Axios 与 JSON
前端通过 Axios 发起 HTTP 请求，统一封装请求头 Token 与响应拦截；前后端以 JSON 交换数据，后端以统一 Result 结构返回 code、msg、data。
2.6 MySQL 数据库
MySQL 8.0 作为关系型数据库存储用户、菜品、订单、档口等业务数据，数据库名为 db_canteen，字符集 utf8mb4，适合中小型管理信息系统。
2.7 JWT 身份认证
系统使用 jjwt 生成与解析 Token。登录成功后返回 JWT，后续请求在 Authorization 头携带 Bearer Token，由拦截器校验角色权限，实现无状态认证。
3 系统分析
3.1 可行性分析
3.1.1 技术可行性
所选技术均为成熟开源方案，开发难度适中，具备技术可行性。
层次 技术选型 说明
后端 Spring Boot 2.7 RESTful 服务
持久层 MyBatis 注解 SQL
前端 Vue 3 + Vite 单页应用
UI Element Plus 后台组件
数据库 MySQL 8.0 业务存储
认证 JWT 身份与权限
3.1.2 经济可行性
系统全部采用开源免费技术栈，无需商业授权，适合课程设计与毕业设计场景，经济成本低。
3.1.3 操作可行性
系统采用侧边栏导航 + 内容区布局，各业务模块操作方式统一（查询、新增、编辑、删除），学习成本低，具备操作可行性。
3.2 需求分析
3.2.1 功能需求
模块 功能描述
用户登录 账号密码登录，返回 JWT
工作台 展示各业务模块数据统计
菜品信息 菜名、档口、价格、分类、余量、上架状态
点餐订单 订单号、下单人、菜品、金额、状态
档口信息 档口名称、负责人、电话、位置、营业状态
套餐管理 套餐名称、包含菜品、套餐价、上架状态
取餐窗口 窗口号、值班员、排队数、开放状态
菜品评价 菜品、评价人、评分、内容、日期
原料采购 原料、档口、数量、金额、入库日期
优惠活动 活动标题、优惠内容、适用档口、起止日期
营业时段 档口餐次与起止营业时间
食堂公告 标题、发布人、内容、发布状态
会员餐卡 学生、卡号、余额、状态
投诉建议 反馈类型、内容、回复、处理状态
用户管理 账号与角色维护（仅管理员）
3.2.2 非功能需求
（1）安全性：密码 MD5 存储，接口 JWT 鉴权，按角色限制写操作；
（2）可用性：界面简洁，操作结果即时反馈；
（3）可维护性：前后端分离，模块结构清晰；
（4）兼容性：支持 Chrome、Edge 等主流浏览器。
3.2.3 用户角色分析
角色 账号示例 权限说明
管理员 admin 全部业务增删改查 + 用户管理
业务员 staff 业务增删改查，不可管理用户
查看员 viewer 仅浏览，不可写操作
4 系统设计
4.1 系统架构设计
系统采用前后端分离的 B/S 三层架构：浏览器端 Vue 应用通过 Axios 调用后端 API；Spring Boot 控制层接收请求，经 JWT 拦截器鉴权后由 MyBatis Mapper 访问 MySQL。后端服务端口为 8084，前端开发端口为 5176，通过 Vite 代理转发 /api 请求。
表现层负责页面渲染与交互；控制层负责接口与权限；持久层执行 SQL；数据层存储业务数据。
4.2 数据库设计
数据库 db_canteen 主要数据表如下。
4.2.1 用户表 sys_user
字段 类型 说明
id INT 主键
username VARCHAR(50) 登录账号
password VARCHAR(64) MD5 密码
name VARCHAR(50) 姓名
role VARCHAR(20) 角色
phone VARCHAR(20) 手机号
status INT 状态
4.2.2 菜品表 dish
字段 类型 说明
id INT 主键
name VARCHAR(100) 菜名
stall VARCHAR(100) 档口
price DECIMAL(10,2) 价格
category VARCHAR(100) 分类
stock INT 余量
status VARCHAR(100) 上架状态
4.2.3 其他核心表
此外还包括 order_info（点餐订单）、stall（档口）、combo（套餐）、pickup（取餐窗口）、dish_comment（评价）、purchase（采购）、promo（优惠活动）、biz_hours（营业时段）、announce（公告）、meal_card（餐卡）、feedback（投诉建议）等表，各表以档口、菜品等业务字段关联，支撑完整食堂运营闭环。
4.3 功能模块设计
4.3.1 登录与权限
用户提交账号密码后，后端校验 MD5 密码并签发 JWT；JwtInterceptor 拦截 /api/**（排除 /api/login），对非管理员访问用户接口返回 403，对查看员的写操作返回 403。前端同步隐藏无权限按钮与菜单。
4.3.2 业务 CRUD 规范
各业务模块统一采用如下接口风格：
方法 路径 说明
GET /api/{module}/list?kw= 关键字查询
GET /api/{module}/{id} 详情
POST /api/{module} 新增或更新
DELETE /api/{module}/{id} 删除
4.3.3 工作台统计
工作台调用 /api/dashboard/stats，汇总各业务表记录数并以卡片形式展示，便于管理者快速掌握运营概况。
5 系统实现
5.1 开发环境
项目 说明
JDK 1.8
Maven 3.6+
Node.js 16+
MySQL 8.0
后端端口 8084
前端端口 5176
5.2 项目结构
后端位于 backend，包路径 com.campus.canteen，包含 controller、entity、mapper、interceptor、common、config 等；前端位于 frontend/src，包含 views、layout、router、api 等。
5.3 核心功能实现
登录由 LoginController 完成密码校验与 Token 签发；业务模块以菜品为例，DishController 提供列表与保存删除接口，DishMapper 使用注解 SQL；前端 Dish.vue 通过 usePage 组合式函数复用查询与增删改逻辑。套餐、取餐窗口、优惠活动、营业时段、投诉建议等模块均采用相同实现模式。
登录页针对食堂场景进行视觉设计，左侧以 SVG 绘制档口柜台、菜品、餐盘与取餐号等元素，右侧为登录表单与演示账号快捷填充，贴合食堂点餐主题。
5.4 界面实现
系统登录后采用左侧分组导航 + 右侧内容区布局，避免模块过多导致顶栏拥挤；工作台展示统计卡片；各业务页提供检索工具栏、表格与编辑对话框，查看员不显示写操作按钮。
6 系统测试
6.1 测试环境
与开发环境一致，使用 sql/db_canteen.sql 初始化演示数据，包含三角色账号及各模块样例记录。
6.2 功能测试
编号 测试项 预期结果 结果
TC-01 管理员登录 进入工作台，角色为管理员 通过
TC-02 业务员登录 无用户管理菜单 通过
TC-03 查看员登录 无写操作按钮 通过
TC-04 错误密码 提示账号或密码错误 通过
TC-05 工作台统计 数量与数据库一致 通过
TC-06 菜品/订单等 CRUD 列表正确更新 通过
TC-07 新增模块 CRUD 套餐、窗口、活动等可用 通过
TC-08 用户管理 管理员可维护账号 通过
6.3 权限测试
编号 测试项 预期结果 结果
PT-01 未登录访问 跳转登录页 通过
PT-02 查看员写操作 返回 403 通过
PT-03 业务员访问用户管理 重定向工作台 通过
PT-04 无效 Token 返回 401 通过
6.4 测试结论
功能测试与权限测试结果表明，系统各模块工作正常，角色控制符合设计，达到预期目标。
7 总结与展望
7.1 工作总结
本文完成了高校食堂点餐管理系统的分析、设计、实现与测试，采用 Spring Boot + Vue 前后端分离架构，实现了 12 个业务模块与用户管理，并通过 JWT 完成三角色权限控制，具备一定实用价值。
7.2 不足与展望
（1）可增加学生端小程序自助下单与支付对接；
（2）可引入订单状态流转与厨房大屏出餐；
（3）工作台可增加销量图表与高峰分析；
（4）密码可升级为 BCrypt，并增加验证码与登录锁定；
（5）可与校园一卡通系统对接，实现餐卡自动扣费。
参考文献
1 王松. Spring Boot 2 精髓：从构建小系统到架构分布式大系统M. 北京: 电子工业出版社, 2018.
2 尤雨溪. Vue.js 设计与实现M. 北京: 人民邮电出版社, 2022.
3 刘增辉. MyBatis 从入门到精通M. 北京: 电子工业出版社, 2017.
4 Fielding R T. Architectural Styles and the Design of Network-based Software ArchitecturesD. University of California, Irvine, 2000.
5 Jones M, Bradley J, Sakimura N. JSON Web Token (JWT)S. RFC 7519, 2015.
6 张海藩, 牟永敏. 软件工程导论（第6版）M. 北京: 清华大学出版社, 2013.
7 萨师煊, 王珊. 数据库系统概论（第5版）M. 北京: 高等教育出版社, 2014.
8 Element Plus 官方文档EB/OL. https://element-plus.org/, 2024.
9 Spring Boot 官方文档EB/OL. https://spring.io/projects/spring-boot, 2024.
10 李明. 高校智慧食堂管理系统的设计与实现J. 电脑知识与技术, 2023, 19(8): 56-58.
附录 A 系统部署说明
- 安装 JDK 8、Maven、Node.js 16+、MySQL 8.0；
- 执行 sql/db_canteen.sql 初始化数据库；
- 修改 backend/src/main/resources/application.yml 中数据库连接；
- 启动后端 CanteenApplication（端口 8084）；
- 进入 frontend 执行 npm install && npm run dev（端口 5176）；
- 浏览器访问 http://localhost:5176 ，使用 admin / 123456 登录。
附录 B 默认测试账号
账号 密码 角色
admin 123456 管理员
staff 123456 业务员
viewer 123456 查看员
点赞+收藏+关注，一键三连，期待下一个源码，同行可以取货。
源码+毕设参考文档+测试用例+操作说明文档