夜雨聆风
锋哥用CursorAI编程20分钟开发了SpringBoot4+Vue3会议室预约管理系统
高清视频+源码+领取。
扫描下方公众号【小锋学AI 】回复：888，
可获取下载链接
👇👇👇
👆长按上方二维码 2 秒 回复「888」即可获取
B站在线学习地址：
https://www.bilibili.com/video/BV1zURYBcEpW/
1. 项目介绍
本项目是一套前后端分离的会议室预约与后台管理系统，面向普通用户提供会议室浏览、在线预约与个人中心；面向管理员提供部门与会议室维护、预约审批、公告与反馈管理、操作日志与数据可视化看板。
核心价值： 统一管理会议室资源，通过预约与时间冲突校验减少场地冲突；审批流保证资源合理分配；公告与反馈增强信息触达与运维闭环。
1.1 主要功能模块
| 维度 | 能力说明 |
|---|---|
| 组织架构 | 部门维护；会议室分类维护 |
| 资源管理 | 会议室信息维护（含状态、设备等） |
| 预约流程 | 用户提交预约、时间重叠校验；管理员通过/驳回；用户取消 |
| 内容运营 | 公告发布（草稿/上架）、前台列表与详情、浏览计数 |
| 用户互动 | 意见反馈提交与管理员回复 |
| 运维审计 | 操作日志记录与查询 |
| 数据分析 | 管理后台仪表盘：会议室数、今日预约、待审批、用户总量及 ECharts 统计图 |
1.2 仓库结构概览
-
server/：Spring Boot 后端 API 与持久层 -
client/：Vue 3 单页应用（用户前台 + 管理后台共用工程） -
doc/：辅助脚本等文档类资源 -
server/src/main/resources/db/：MySQL 初始化脚本（库db_meeting）
2. 技术栈总览
| 层级 | 技术选型 | 说明 |
|---|---|---|
| 前端框架 | Vue 3 | Composition API，pinia 状态，vue-router 路由 |
| 前端构建 | Vite | 开发与生产构建，@vitejs/plugin-vue |
| UI 组件 | Element Plus | 中文 locale，图标 @element-plus/icons-vue |
| 前端图表 | ECharts | 数据看板等统计可视化 |
| 前端请求 | Axios | 封装统一请求、Authorization 头 |
| 时间与样式 | dayjs、Sass | 日期处理与全局 SCSS（含变量注入） |
| 后端框架 | Spring Boot 4.x | JDK 17，Web MVC、Validation |
| 安全 | Spring Security（最小放行） + 自研 JWT 拦截器 | 无 Session；/api/** 由拦截器校验 Token |
| 持久层 | MyBatis + XML Mapper | map-underscore-to-camel-case |
| 分页 | PageHelper | 列表分页 |
| 数据库 | MySQL 8.x | JDBC 驱动 mysql-connector-j |
| Token | JJWT | HS256，Authorization: Bearer <token> |
| JSON | FastJSON2 | 拦截器等场景序列化 |
运行与端口约定（本地开发）：
-
后端：
http://localhost:8088 -
前端：
http://localhost:5173（Vite 将/api、/uploads代理到后端） -
MySQL：示例脚本使用
db_meeting库、端口 3308（可在application.yml修改）
3. 系统架构设计
3.1 逻辑架构
采用经典 Browser / SPA ↔ REST API ↔ 数据库 三层结构；静态上传文件由后端映射本地目录并以 /uploads/** 提供访问。
3.2 认证与权限模型
-
登录/注册：
POST /api/auth/login、/api/auth/register不经过 JWT 拦截器。 -
公开浏览：
/api/public/**、/api/notice/front/**白名单放行。 -
其余 `/api/
**：须在请求头携带Authorization: Bearer <JWT>；拦截器解析后将userId、username、role写入UserContext`，供 Controller/Service 使用。 -
前端路由：
-
meta.needAuth：需登录（如「我的预约」「个人中心」「意见反馈」）。 -
meta.admin：需管理员角色（/admin/**整段）。
Spring Security：当前配置为关闭 CSRF、无 Session、anyRequest().permitAll()，实际鉴权以 JwtInterceptor 为准，与 README 所述一致。
3.3 接口约定
统一响应封装 R，形态为：{ code, message, data }。业务异常由全局异常处理器转换为一致错误结构。
4. 后端架构细化
4.1 分层与包职责（com.java1234）
| 包/类型 | 职责 |
|---|---|
controller |
REST 入口，参数校验与组装返回 R |
service |
事务与业务规则（预约冲突、权限判断等） |
mapper + resources/mapper/*.xml |
SQL 与结果映射 |
entity |
与表字段对应的持久化模型 |
dto / vo |
入参对象与视图对象 |
config |
WebMvcConfig（CORS、静态资源、拦截器）、JwtProperties、UploadProperties 等 |
interceptor |
JwtInterceptor |
common |
R、PageResult、ResultCode、异常类型 |
4.2 主要 REST 控制器（按领域）
包括但不限于：AuthController、UserController、DepartmentController、CategoryController、RoomController、ReservationController、NoticeController、FeedbackController、StatsController、LogController、UploadController、PublicController（具体路径以源码为准）。
4.3 文件上传
application.yml 中配置 upload.path（默认 D:/uploads/）与 upload.url-prefix；WebMvcConfig 将 /uploads/** 映射到该目录；单文件上限由 spring.servlet.multipart 约束。
5. 前端架构细化
5.1 目录与关注点
| 路径 | 说明 |
|---|---|
src/views/user/** |
用户前台页面（首页、会议室、预约、公告、反馈、登录注册等） |
src/views/admin/** |
管理后台各模块 |
src/layouts/ |
UserLayout、AdminLayout 布局骨架 |
src/api/ |
按模块划分的 Axios 封装 |
src/store/user.js |
Pinia：token、用户信息、isAdmin 等 |
src/router/index.js |
路由守卫与 meta 权限 |
src/styles/ |
全局样式与 SCSS 变量 |
5.2 开发与联调
vite.config.js 中为 /api、/uploads 配置反向代理至后端 8088，避免浏览器跨域与不统一端口问题。
6. 数据架构
6.1 命名规范
与本项目脚本一致：数据库名 db_ 前缀（db_meeting）；物理表名 t_ 前缀。
6.2 核心表（概念）
包含但不限于：t_user（用户与角色）、t_department、t_category、t_room、t_reservation、t_notice、t_feedback、t_log（操作日志）。初始化与种子数据见 server/src/main/resources/db/db_meeting.sql；可按需追加统计种子脚本。
6.3 预约与时间
预约表存储 start_time、end_time 等字段，并建立与时间、房间相关的索引以支持冲突检测与列表查询。界面展示时间的格式可在前端通过 dayjs 等格式化为项目约定样式（例如日期 YYYY-MM-DD、日期时间 YYYY-MM-DD HH:mm:ss）。
高清视频+源码+领取。
扫描下方公众号【小锋学AI 】回复：888，
可获取下载链接
👇👇👇
👆长按上方二维码 2 秒 回复「888」即可获取
