基于 Spring Boot + Vue3 的校园自习室座位预约系统实战

源码：点头像–个人简介

一、项目背景

高校自习室长期存在"占座难、找座难、管理难"的问题：学生到馆后靠肉眼找空位，管理员靠纸质登记或 Excel 记录，座位使用状态无法实时同步，纠纷与资源浪费并存。

本文介绍一套前后端分离的校园自习室座位预约系统，用一套统一的管理后台，把"选座—预约—签到—签退—统计"整条链路搬到线上，同时用角色权限把管理员与学生的操作边界彻底分开。

二、系统功能

系统围绕自习室座位预约的核心业务闭环设计，主要模块如下：

• 登录：账号密码登录，登录后按角色动态下发菜单与按钮权限
• 首页：数据概览，展示自习室、座位、预约等关键指标
• 自习室管理：自习室列表维护、座位管理（批量生成座位、启用/停用）
• 座位预约：可视化选座预约、我的预约（取消预约、签到、签退）
• 预约管理：全量预约记录查询与状态跟踪
• 学生管理：学生列表维护
• 系统管理：菜单管理、角色管理、账号管理

管理员与学生共用同一套界面，登录后看到的菜单与可操作按钮各不相同，学生只能操作自己的预约数据。

三、技术选型

后端对外提供统一的 RESTful API，前端通过 Axios 交互，前后端彻底解耦，可独立开发、独立部署。

四、关键技术实现

1. 前后端分离架构

后端只负责数据与业务逻辑，输出标准 JSON 接口；前端负责路由、状态与视图渲染。接口层统一封装响应结构，前端统一拦截处理，降低联调成本，也让前端可以脱离后端用 Mock 数据先行开发。

2. RBAC 权限控制体系

系统采用基于角色的访问控制模型，核心表结构为：账号—角色—菜单三级关联（含管理员角色关联表、角色菜单关联表）。

• 菜单管理维护权限点，权限粒度下沉到按钮级
• 角色管理为角色分配菜单与按钮权限
• 账号管理为账号分配角色
• 登录后由后端根据角色计算权限集合，前端据此动态生成路由与菜单，后端接口同步做权限校验，避免"前端隐藏、后端裸奔"

这套设计让新增角色、调整权限无需改代码，只需配置数据。

3. 座位预约业务闭环

预约流程覆盖完整生命周期：

1. 学生选择自习室，查看座位布局与实时状态
2. 选择空闲座位提交预约，系统校验时间冲突与座位占用
3. 到馆后签到，状态流转为"使用中"
4. 离座签退，释放座位
5. 未按时到场可取消预约，管理员可查看全部预约记录

状态机式的流转设计保证了座位不会被重复占用，也让每一次状态变更都有据可查。

4. 数据库设计

涉及自习室、座位、预约记录、签到记录、学生、管理员、角色、菜单、管理员角色关联、角色菜单关联等多表关联设计。通过合理的索引与关联查询，支撑座位状态实时查询与预约记录统计。

五、解决的问题

• 找座效率低：座位状态线上可视化，学生到馆前即可完成选座，减少无效走动
• 占座与纠纷：预约 + 签到 + 签退的闭环约束，超时未签到自动释放，杜绝"人不到座被占"
• 管理成本高：自习室、座位、学生、预约记录全部线上化管理，替代纸质登记与 Excel
• 权限混乱：RBAC 精细化控制，管理员与学生各司其职，数据隔离清晰
• 数据不可用：预约记录全量留存，为自习室使用率分析、座位资源调配提供数据支撑

六、总结

这套系统用成熟稳定的技术栈（Spring Boot 2.7 + Vue 3 + MySQL 8.0）实现了一个业务闭环完整、权限体系清晰的校园自习室座位预约平台。它既解决了真实场景下的座位管理痛点，也是一份覆盖后端接口开发、前端管理系统开发、RBAC 权限设计、数据库建模的完整全栈实践。