# dorm-system **Repository Path**: cwj258/dorm-system ## Basic Information - **Project Name**: dorm-system - **Description**: 学生宿舍管理系统 （springboot3+vue3+vite） - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 4 - **Created**: 2025-11-12 - **Last Updated**: 2025-11-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 宿舍管理系统 一个基于 Spring Boot 3 + Vue 3 + Ant Design Vue 的现代化宿舍管理系统。 ## ✨ 技术栈 ### 后端 - **Spring Boot 3.2.0** - Java 企业级开发框架 - **MyBatis-Plus 3.5.5** - 增强的 MyBatis 持久层框架 - **MySQL** - 关系型数据库 - **JWT** - 用户认证和授权 - **Lombok** - 简化 Java 代码 - **Hutool** - Java 工具类库 ### 前端 - **Vue 3** - 渐进式 JavaScript 框架 - **Vite 5** - 下一代前端构建工具 - **Ant Design Vue 4** - 企业级 UI 组件库 - **Pinia** - Vue 状态管理 - **Axios** - HTTP 客户端 - **Vue Router 4** - 路由管理 - **ECharts 5** - 数据可视化图表库 - **Vue-ECharts** - Vue 3 的 ECharts 组件封装 ## 📦 功能模块 ### 1. 登录与权限 - ✅ JWT Token 认证 - ✅ 用户登录/退出 - ✅ 路由守卫 ### 2. 学生管理 - ✅ 学生信息增删改查 - ✅ 按学号、姓名、班级搜索 - ✅ 批量删除 - ✅ 分页展示 ### 3. 宿舍管理 - ✅ 宿舍楼信息维护 - ✅ 房间信息管理 - ✅ 床位统计 - ✅ 宿舍分配 ### 4. 报修管理 - ✅ 报修单提交 - ✅ 维修人员分配 - ✅ 状态跟踪（待处理/处理中/已完成） - ✅ 报修记录查询 ### 5. 考勤管理 - ✅ 晚归/缺寝记录登记 - ✅ 按时间、学生查询 - ✅ 考勤统计 ### 6. 公告管理 - ✅ 公告发布与编辑 - ✅ 公告查看统计 - ✅ 草稿箱功能 ### 7. 用户管理 - ✅ 管理员账号管理 - ✅ 角色权限设置 ### 8. 主题切换 - ✅ 亮色/暗黑主题切换 - ✅ 主题持久化 ### 9. 数据可视化（新增） - ✅ 精美的统计卡片（渐变色设计） - ✅ 学生性别分布饼图 - ✅ 报修状态统计柱状图 - ✅ 考勤趋势折线图 - ✅ 宿舍入住率仪表盘 - ✅ 快捷入口导航 - ✅ 所有图表支持响应式和动画效果 ## 🚀 快速开始 ### 环境要求 - **JDK 17+** - **Maven 3.8+** - **MySQL 8.0+** - **Node.js 16+** ### 后端启动 1. 创建数据库并导入数据 ```bash # 创建数据库 mysql -u root -p # 在 MySQL 中执行 source backend/sql/init.sql ``` 2. 修改数据库配置（如需要） ```yaml # backend/src/main/resources/application.yml spring: datasource: url: jdbc:mysql://localhost:3306/dorm_system username: root password: root # 修改为你的密码 ``` 3. 启动后端服务 ```bash cd backend mvn clean install mvn spring-boot:run ``` 后端服务将在 `http://localhost:8080/api` 启动 ### 前端启动 1. 安装依赖（包含新增的 ECharts） ```bash cd frontend npm install ``` > 注意：新版本已添加 ECharts 可视化图表，请确保运行 `npm install` 安装最新依赖。 2. 启动开发服务器 ```bash npm run dev ``` 前端服务将在 `http://localhost:3000` 启动 3. 构建生产版本 ```bash npm run build ``` ## 📱 默认账号 - 账号：`admin` - 密码：`123456` ## 📂 项目结构 ``` dorm-system/ ├── backend/ # 后端项目 │ ├── src/ │ │ ├── main/ │ │ │ ├── java/ │ │ │ │ └── com/dorm/ │ │ │ │ ├── common/ # 公共类 │ │ │ │ ├── config/ # 配置类 │ │ │ │ ├── controller/ # 控制器 │ │ │ │ ├── entity/ # 实体类 │ │ │ │ ├── mapper/ # Mapper 接口 │ │ │ │ ├── service/ # 服务层 │ │ │ │ ├── utils/ # 工具类 │ │ │ │ └── DormApplication.java │ │ │ └── resources/ │ │ │ ├── application.yml # 配置文件 │ │ │ └── mapper/ # XML 映射文件 │ │ └── test/ │ ├── sql/ │ │ └── init.sql # 数据库初始化脚本 │ └── pom.xml # Maven 配置 │ ├── frontend/ # 前端项目 │ ├── src/ │ │ ├── api/ # API 接口 │ │ ├── assets/ # 静态资源 │ │ ├── components/ # 公共组件 │ │ ├── layout/ # 布局组件 │ │ ├── router/ # 路由配置 │ │ ├── stores/ # 状态管理 │ │ ├── styles/ # 全局样式 │ │ ├── utils/ # 工具函数 │ │ ├── views/ # 页面组件 │ │ ├── App.vue │ │ └── main.js │ ├── index.html │ ├── package.json │ └── vite.config.js │ └── README.md # 项目说明 ``` ## 🎨 界面预览 ### 登录页面 - 现代化渐变背景 - 流畅的动画效果 - 响应式设计 ### 主界面 - 侧边栏导航（白色简洁风格） - 顶部工具栏 - 主题切换按钮 - 用户信息下拉菜单 ### Dashboard 首页（新升级） - 🎨 4个精美渐变色统计卡片（悬停动画效果） - 📊 学生性别分布环形饼图 - 📈 报修状态统计渐变柱状图 - 📉 近7天考勤趋势面积折线图 - ⭕ 宿舍入住率仪表盘环形图 - 🚀 快捷入口导航（渐变色图标） - ✨ 所有图表支持响应式和动画效果 ### 数据表格 - 高级搜索功能 - 分页展示 - 批量操作 - 快捷操作按钮 ## 🔧 接口说明 ### 认证接口 - `POST /api/auth/login` - 用户登录 - `POST /api/auth/logout` - 退出登录 - `GET /api/auth/info` - 获取当前用户信息 - `POST /api/auth/register` - 用户注册（测试用） ### 学生管理 - `GET /api/student/page` - 分页查询学生 - `GET /api/student/{id}` - 根据ID查询 - `POST /api/student` - 新增学生 - `PUT /api/student` - 修改学生 - `DELETE /api/student/{id}` - 删除学生 - `DELETE /api/student/batch` - 批量删除 ### 宿舍楼管理 - `GET /api/building/page` - 分页查询 - `POST /api/building` - 新增 - `PUT /api/building` - 修改 - `DELETE /api/building/{id}` - 删除 - `GET /api/building/list` - 查询所有 ### 房间管理 - `GET /api/room/page` - 分页查询 - `POST /api/room` - 新增 - `PUT /api/room` - 修改 - `DELETE /api/room/{id}` - 删除 - `GET /api/room/list` - 查询所有 ### 报修管理 - `GET /api/repair/page` - 分页查询 - `POST /api/repair` - 新增报修 - `POST /api/repair/assign/{id}` - 分配维修人员 - `POST /api/repair/complete/{id}` - 完成报修 - `DELETE /api/repair/{id}` - 删除 ### 考勤管理 - `GET /api/attendance/page` - 分页查询 - `POST /api/attendance` - 新增记录 - `PUT /api/attendance` - 修改记录 - `DELETE /api/attendance/{id}` - 删除 ### 公告管理 - `GET /api/notice/page` - 分页查询 - `GET /api/notice/{id}` - 查看详情 - `POST /api/notice` - 新增公告 - `PUT /api/notice` - 修改公告 - `POST /api/notice/publish/{id}` - 发布公告 - `DELETE /api/notice/{id}` - 删除 ### 用户管理 - `GET /api/user/page` - 分页查询 - `POST /api/user` - 新增用户 - `PUT /api/user` - 修改用户 - `DELETE /api/user/{id}` - 删除用户 ## 📝 开发说明 ### 密码加密 系统使用 MD5 对密码进行加密存储，默认密码 `123456` 加密后为 `e10adc3949ba59abbe56e057f20f883e` ### JWT Token - Token 有效期：24小时 - 请求头格式：`Authorization: Bearer {token}` - Token 失效后需要重新登录 ### 逻辑删除 所有数据表都支持逻辑删除，`deleted` 字段： - 0：未删除 - 1：已删除 ### 分页参数 - `pageNum`：当前页码，默认 1 - `pageSize`：每页条数，默认 10 ## 🌟 特色功能 ### 1. RESTful API 设计 遵循 REST 架构风格，接口设计清晰规范 ### 2. 统一响应格式 ```json { "code": 200, "message": "操作成功", "data": {} } ``` ### 3. 全局异常处理 统一捕获和处理异常，返回友好的错误信息 ### 4. 跨域支持 后端配置 CORS，支持前后端分离开发 ### 5. 自动填充 创建时间、更新时间自动填充 ### 6. 主题切换 支持亮色/暗黑主题切换，主题偏好自动保存 ### 7. 数据可视化（新增） 基于 ECharts 5 的专业数据可视化： - 环形饼图展示数据占比 - 渐变柱状图展示统计数据 - 面积折线图展示趋势变化 - 仪表盘展示百分比数据 - 所有图表响应式适配 - 流畅的动画过渡效果 ## 🔒 安全性 - JWT Token 认证 - 密码 MD5 加密存储 - 路由权限控制 - 请求拦截器统一处理认证 - XSS 防护 ## 📈 后续扩展 - [ ] Excel 批量导入导出 - [x] 数据可视化大屏（已完成） - [ ] 移动端适配 - [ ] 消息通知功能 - [ ] 文件上传功能 - [ ] 数据备份与恢复 - [ ] 操作日志记录 - [ ] 角色权限细分 - [ ] 更多ECharts图表类型（雷达图、地图等） ## 📄 许可证 MIT License ## 👥 作者 AI Assistant ## 🤝 贡献 欢迎提交 Issue 和 Pull Request！ --- **注意**：本项目仅供学习参考使用，生产环境使用前请进行充分测试和安全加固。