一、项目背景
高校自习室长期存在"占座难、找座难、管理难"的问题：学生到馆后不知道哪里有空位，管理员也无法实时掌握座位使用情况。本文介绍一套前后端分离的自习室座位预约系统，用一套完整的预约业务闭环，把"选座—预约—签到—签退—统计"全流程搬到线上。
二、系统功能
系统区分管理员与学生两种角色，围绕预约业务主流程设计，主要模块如下：
- 登录：账号密码登录，JWT 签发令牌
- 首页：数据统计大盘，展示自习室、座位、预约等核心指标
- 自习室管理：自习室列表维护、座位管理
- 座位预约：座位预约、我的预约（取消预约、签到、签退）
- 预约管理：预约记录查询
- 学生管理：学生列表、分配角色
- 系统管理：账号管理、角色管理、菜单管理
管理员负责自习室、座位、预约记录与学生信息的管理；学生负责查看自习室、预约座位与管理个人预约。
三、技术栈
| 层次 | 技术选型 |
|---|---|
| 后端 | Node.js 20 + Express |
| 前端 | Vue 3 + Element Plus |
| 数据库 | MySQL 8.0 |
| 状态管理 | Pinia |
| 构建工具 | Vite |
| 数据可视化 | ECharts |
| 开发工具 | VSCode / WebStorm |
四、技术实现要点
1. 前后端分离 + RESTful API
后端基于 Express 构建 RESTful 接口，前端通过 Axios 交互，接口职责清晰、易于扩展与联调。
2. MVC 分层架构
后端按 Routes、Controller、Service、Model 分层拆分，配合统一响应结构、异步错误处理与软删除机制，让业务逻辑与数据访问解耦，代码可维护性更高。
3. JWT 认证与接口鉴权
登录后签发 JWT，请求携带令牌完成身份识别；结合权限校验与数据归属校验，保证不同角色只能访问和操作自己权限范围内的数据。
4. RBAC 权限控制体系
通过账号、角色、菜单、按钮权限的关联，实现基于角色的访问控制，做到"菜单可见、按钮可控、接口可拦"。
5. 业务状态机驱动流程
以预约状态、座位状态、自习室状态驱动业务流转，实现预约创建、取消、签到、签退过程中的状态自动变更，避免状态混乱与并发冲突。
6. 数据库设计与多表关联
涉及自习室、座位、预约记录、签到记录、学生、管理员、角色、菜单等多表关联，覆盖索引设计、多表查询与关联操作等实战场景。
五、解决的问题
- 找座难：学生可在线查看自习室与座位情况，直接预约目标座位，减少盲目找座。
- 占座乱：通过预约 + 签到 + 签退的状态流转，让座位资源可追踪、可回收。
- 管理难：管理员可统一维护自习室、座位与预约记录，实时掌握使用情况。
- 权限乱：RBAC + JWT 双重保障，管理员与学生各司其职，数据边界清晰。
- 统计弱：首页数据大盘结合 ECharts 可视化，让运营数据一目了然。
六、总结
本系统以真实校园场景为蓝本，覆盖了从选座预约到签到签退的完整业务闭环，同时把前后端分离、MVC 分层、JWT 认证、RBAC 权限、状态机流转、多表关联等企业级开发要点落到具体业务中，是一套适合 Node.js 全栈方向学习与实践的完整项目。
演示站： test.wwwoop.com/?s=/zi-xi-s…
有需要可以查看预览！
