这次我们来看一个基于 Spring Boot 和 Vue.js 开发的高校学生宿舍管理系统。对于高校后勤管理、学生工作信息化或者计算机专业毕业设计来说这是一个非常典型且实用的项目。它不是一个概念原型而是一个功能完整、前后端分离、可直接部署运行的 Web 应用系统。这个系统的核心是解决高校宿舍管理中的实际问题学生信息管理、宿舍分配、访客登记、报修处理、费用管理等。它采用 Spring Boot 作为后端 API 服务框架Vue.js 作为前端用户界面实现了前后端解耦和模块化开发。对于开发者而言最关心的不是概念有多复杂而是这个项目能不能在自己的开发环境如 IDEA、VSCode中顺利跑起来数据库配置是否清晰前后端联调是否顺畅以及功能是否完整可用。本文将带你从零开始完成这个宿舍管理系统的环境搭建、项目启动、功能测试和常见问题排查。我们会重点关注项目的技术栈构成、数据库设计、前后端启动方式、核心接口的调用以及如何基于现有代码进行二次开发。无论你是想学习 Spring Boot Vue 前后端分离开发还是需要一个现成的宿舍管理系统作为课程设计或毕业设计的基础这篇文章都能提供直接的、可落地的操作指南。1. 核心能力速览在深入代码之前我们先通过一个表格快速了解这个项目的核心规格和功能边界这有助于你判断它是否符合你的需求。能力项说明项目类型前后端分离的 Web 管理系统技术栈后端Spring Boot, MyBatis/MyBatis-Plus, MySQL前端Vue.js, Element UI, Axios主要功能模块学生信息管理、宿舍楼/房间管理、住宿分配、访客登记、报修管理、费用管理、系统权限管理部署方式本地开发环境运行、可打包为 Jar/War 部署启动方式后端通过 IDE 运行或mvn spring-boot:run前端npm run serve接口能力提供完整的 RESTful API支持 JSON 数据交互数据库MySQL需预先创建数据库并执行 SQL 脚本适合场景高校信息化课程设计、毕业设计、小型宿舍管理原型系统、前后端分离技术学习硬件门槛普通开发电脑即可无需特殊 GPU。主要依赖 Java 运行环境和 Node.js 环境。2. 适用场景与使用边界这个宿舍管理系统主要适用于以下几种场景高校计算机专业学生作为《软件工程》、《Web开发》、《数据库原理》等课程的课程设计或毕业设计项目。项目结构清晰功能模块典型是学习企业级应用开发的优秀范例。高校后勤部门信息化初期对于尚未实现数字化管理或使用老旧系统的高校此项目可作为一个功能原型验证管理流程并在此基础上进行定制化开发。全栈开发学习者希望系统学习 Spring Boot Vue 前后端分离开发模式、RESTful API 设计、权限控制如基于角色的访问控制 RBAC的开发者。使用边界与注意事项非生产级作为一个教学或原型项目它在高并发、数据安全、系统监控、灾备等方面可能未做深度优化。直接用于大规模、高并发的生产环境需要进一步的架构改造和安全加固。功能完整性它涵盖了宿舍管理的核心流程但各高校的具体管理规章、审批流程、报表格式可能不同需要根据实际情况进行功能增删和流程调整。数据合规性系统涉及学生个人信息、住宿信息等敏感数据。在实际部署使用时必须严格遵守《个人信息保护法》等相关法律法规做好数据加密、访问日志、权限隔离等措施。版权与二次开发作为开源或共享项目使用时请注意其许可证如 MIT, GPL等。在二次开发并用于商业用途前请确认版权条款。3. 环境准备与前置条件要成功运行这个项目你的开发环境需要满足以下条件。请务必在开始前逐一检查。3.1 后端环境 (Spring Boot)JDK: 版本 1.8 或更高推荐 JDK 8, 11, 17。使用java -version命令验证。Maven: 版本 3.6 或更高用于项目构建和依赖管理。使用mvn -v命令验证。IDE: IntelliJ IDEA推荐或 Eclipse。确保已安装 Spring Boot 相关插件。数据库: MySQL 5.7 或 8.0。确保 MySQL 服务已启动。3.2 前端环境 (Vue.js)Node.js: 版本 14.x 或更高推荐 16.x, 18.x LTS。使用node -v和npm -v命令验证。包管理器: npm 或 yarn本文以 npm 为例。IDE: Visual Studio Code推荐或 WebStorm。3.3 项目资源准备获取项目源码从指定的仓库如 Gitee, GitHub下载或克隆项目代码。解压后项目目录结构通常如下dormitory-management/ ├── backend/ # Spring Boot 后端项目 │ ├── src/ │ ├── pom.xml │ └── ... ├── frontend/ # Vue.js 前端项目 │ ├── public/ │ ├── src/ │ ├── package.json │ └── ... └── database/ # 数据库SQL脚本 └── dormitory.sql准备数据库使用 MySQL 客户端如 Navicat, MySQL Workbench 或命令行创建一个新的数据库例如dormitory_db字符集建议为utf8mb4。CREATE DATABASE dormitory_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;4. 安装部署与启动方式环境就绪后我们分步启动后端和前端服务。4.1 数据库初始化找到项目中的database/dormitory.sql文件在你的dormitory_db数据库中执行这个 SQL 脚本。这将创建所有必要的表结构和初始数据如管理员账号。-- 在MySQL客户端中执行 USE dormitory_db; SOURCE /你的路径/dormitory.sql;执行成功后检查是否生成了student,dorm_building,dorm_room,repair,visitor等表。4.2 后端 Spring Boot 项目配置与启动导入项目使用 IntelliJ IDEA 打开backend文件夹。IDEA 会自动识别为 Maven 项目并开始下载依赖。修改配置文件找到backend/src/main/resources/application.yml或application.properties文件。关键配置项是数据库连接。# application.yml 示例 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/dormitory_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root # 改为你的MySQL用户名 password: yourpassword # 改为你的MySQL密码 jackson: time-zone: GMT8 server: port: 8080 # 后端服务端口可自定义启动后端服务方式一IDE启动在 IDEA 中找到主启动类通常名为XxxApplication包含SpringBootApplication注解右键点击Run。方式二命令行启动在backend目录下打开终端执行mvn clean spring-boot:run验证启动控制台出现Started ...Application in ... seconds日志且无报错。打开浏览器访问http://localhost:8080如果配置了接口文档如 Swagger可能是http://localhost:8080/swagger-ui.html能正常看到接口文档或提示页面说明后端启动成功。4.3 前端 Vue 项目配置与启动安装依赖在终端中进入frontend目录执行以下命令安装项目依赖包。这个过程可能会持续几分钟。cd frontend npm install # 或使用淘宝镜像加速 # npm install --registryhttps://registry.npmmirror.com配置代理可选但重要前端开发服务器需要代理 API 请求到后端。检查frontend/vue.config.js文件。如果没有则在项目根目录创建该文件并添加以下内容module.exports { devServer: { port: 8081, // 前端开发服务器端口可自定义避免冲突 proxy: { /api: { // 拦截以 /api 开头的请求 target: http://localhost:8080, // 后端服务地址 changeOrigin: true, pathRewrite: { ^/api: // 重写路径去掉 /api 前缀根据后端接口实际情况调整 } } } } }同时检查frontend/src目录下的 API 请求文件如api/request.js或utils/request.js确保其baseURL设置正确通常设置为/api或http://localhost:8080。启动前端服务在frontend目录下执行npm run serve验证启动终端输出App running at:信息通常为http://localhost:8081。用浏览器访问此地址应能看到系统登录界面。5. 功能测试与效果验证前后端都启动成功后我们进入系统进行核心功能测试。默认的超级管理员账号密码通常在数据库初始化脚本中设置常见为admin / 123456。5.1 登录与权限验证测试目的验证系统基础访问控制、会话管理及前后端通信是否正常。操作步骤在浏览器打开前端地址如http://localhost:8081输入管理员账号密码登录。预期结果登录成功跳转到系统主仪表盘或首页。浏览器开发者工具F12的Network标签中应能看到登录请求/login成功返回 token 或 session 信息。判断成功能看到包含菜单导航的主界面并且不同菜单项可以点击。常见失败登录失败提示“用户名或密码错误”检查数据库user表初始数据确认账号密码。登录后页面空白或报错检查前端代理配置和后端 CORS 配置。确保前端请求的 API 地址正确。5.2 学生信息管理模块测试测试目的验证对学生信息的增删改查CRUD操作。操作步骤点击“学生管理”菜单。点击“新增”按钮填写学生学号、姓名、性别、学院、班级等信息后保存。在列表中找到刚添加的学生尝试“编辑”修改其信息然后“保存”。尝试“删除”一条测试数据或使用逻辑删除。使用搜索框按姓名或学号进行查询。预期结果所有操作均有明确成功/失败提示。列表数据能实时刷新。新增和编辑后数据能正确持久化到数据库student表中。接口观察在开发者工具的Network中观察对应的GET /api/students,POST /api/student,PUT /api/student/{id},DELETE /api/student/{id}等请求是否成功。5.3 宿舍分配与房间管理测试测试目的验证宿舍资源管理、学生入住/调换/退宿流程。操作步骤进入“宿舍楼管理”和“房间管理”先添加一栋楼和若干房间如“1号楼”房间“101”、“102”设置床位数量、类型、状态空闲/已满。进入“住宿分配”或“学生入住”功能选择一个空闲房间和一名学生办理入住。查看该房间状态是否变为“已满”或占用床位增加学生信息中是否关联了房间号。尝试“调换宿舍”或“退宿”操作。预期结果房间状态随入住退宿动态更新。学生与房间的关联关系在数据库中正确体现通常通过一个关联表如student_dorm。数据一致性检查直接查询数据库核对dorm_room表的occupied_beds和total_beds字段以及关联表的数据是否正确。5.4 报修与访客登记流程测试报修流程测试以学生或管理员身份提交一个报修单选择房间、填写报修内容。以维修员或管理员身份处理报修单接单、维修中、已完成。观察报修单状态流转和通知如有是否正常。访客登记测试登记一条访客信息访客姓名、身份证号、访问房间、被访学生、预计进出时间。模拟访客离开进行“签离”操作。测试访客记录查询和统计。预期结果业务流程闭环状态字段repair_status,visitor_status按预期变化。时间戳记录准确。5.5 数据导出与报表测试许多管理系统需要数据导出功能。测试目的验证系统数据导出能力如 Excel 导出。操作步骤在“学生列表”、“访客记录”等页面寻找“导出”或“导出Excel”按钮并点击。预期结果浏览器下载一个.xlsx或.xls文件用办公软件打开后数据与页面列表一致。技术点这通常依赖后端 POI 或 EasyExcel 库前端发起一个GET或POST请求后端设置响应头Content-Type: application/vnd.ms-excel和Content-Disposition: attachment; filenamexxx.xlsx。6. 接口 API 与批量任务理解系统的 API 设计是进行二次开发和集成测试的关键。6.1 核心 API 接口概览系统通常提供 RESTful 风格的 API。你可以通过以下方式探查Swagger UI如果后端集成了 Swagger 或 Knife4j访问http://localhost:8080/doc.html或http://localhost:8080/swagger-ui.html即可看到所有接口文档。浏览器开发者工具在前端操作时观察Network面板中的请求。常见 API 接口分类认证授权POST /api/login,POST /api/logout,GET /api/user/info学生管理GET /api/students,POST /api/student,PUT /api/student/{id},DELETE /api/student/{id},GET /api/student/export宿舍管理GET /api/buildings,GET /api/rooms?buildingId1,POST /api/room/assign(分配宿舍)报修管理GET /api/repairs,POST /api/repair,PUT /api/repair/{id}/handle(处理报修)访客管理GET /api/visitors,POST /api/visitor,PUT /api/visitor/{id}/leave(签离)6.2 使用 Postman 或 Curl 测试 API脱离前端界面直接测试 API 是验证后端功能的有效方式。示例登录并获取 Token# 使用 curl 测试登录 curl -X POST http://localhost:8080/api/login \ -H Content-Type: application/json \ -d {username:admin, password:123456}如果返回包含token字段则登录成功。示例携带 Token 获取学生列表# 假设登录返回的 token 是 eyJhbGciOiJ... curl -X GET http://localhost:8080/api/students?page1size10 \ -H Authorization: Bearer eyJhbGciOiJ... \ -H Content-Type: application/json示例使用 Python requests 库测试import requests import json # 1. 登录 login_url http://localhost:8080/api/login login_data {username: admin, password: 123456} login_resp requests.post(login_url, jsonlogin_data) token login_resp.json().get(data).get(token) # 根据实际返回结构调整 print(fToken: {token}) # 2. 使用 Token 获取学生列表 headers { Authorization: fBearer {token}, Content-Type: application/json } student_url http://localhost:8080/api/students student_resp requests.get(student_url, headersheaders, params{page: 1, size: 10}) print(json.dumps(student_resp.json(), indent2, ensure_asciiFalse))6.3 批量任务处理系统本身可能不包含复杂的异步批量任务队列如 RabbitMQ, Kafka。但对于数据初始化、批量导入等需求可以编写一次性脚本使用 Java 编写一个 Spring Boot 的CommandLineRunner或PostConstruct方法读取 Excel/CSV 文件批量插入数据。通过 API 批量调用编写外部脚本循环调用创建学生、房间等 API。注意这种方式效率较低且需处理网络错误和重复提交。直接操作数据库对于海量初始数据最稳妥的方式是编写复杂的 SQL 插入脚本或使用数据库导入工具。7. 资源占用与性能观察作为本地开发或课程设计项目性能通常不是首要瓶颈但了解其资源消耗模式对学习有帮助。7.1 后端服务 (Spring Boot)内存占用启动后一个基本的 Spring Boot 应用进程内存占用通常在 200MB - 500MB 之间具体取决于引入的依赖如 Redis, Elasticsearch 等。使用 JVM 参数如-Xmx512m可以限制最大堆内存。CPU 占用在空闲状态下 CPU 占用极低。在进行数据库查询、Excel 导出等操作时会有短暂峰值。观察工具IDE 内置监控IntelliJ IDEA 有运行进程的内存指示器。系统任务管理器观察 Java 进程的消耗。Spring Boot Actuator如果项目引入了spring-boot-starter-actuator可以通过http://localhost:8080/actuator/metrics端点查看更详细的 JVM 指标。7.2 前端服务 (Vue Dev Server)内存占用npm run serve启动的开发服务器内存占用较小通常几十 MB 到一百多 MB。CPU 占用主要在代码热重载Hot Module Replacement时会有波动。浏览器资源打开系统页面后浏览器内存占用会增加。一个管理页面可能占用 100MB - 300MB 内存取决于页面复杂度和数据量。7.3 数据库 (MySQL)对于课程设计级别的数据量几千条记录MySQL 资源消耗可以忽略不计。可以通过 MySQL 命令行或管理工具查看连接数和慢查询日志如果启用。性能优化提示如需数据库索引为经常用于查询和关联的字段如student_id,room_number,create_time添加索引可大幅提升查询速度。前端懒加载与分页确保列表数据使用了分页查询避免一次性加载海量数据到前端。接口响应缓存对于不常变动的数据如学院列表、楼栋列表可以考虑在后端使用 Spring Cache如 Redis进行缓存。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供排查思路。问题现象可能原因排查方式解决方案后端启动失败端口被占用8080 端口已被其他程序如另一个 Spring Boot 应用、Tomcat使用。1. 查看启动日志中的错误信息。2. 使用命令netstat -ano | findstr :8080(Windows) 或lsof -i:8080(Mac/Linux) 查找占用进程。1. 终止占用端口的进程。2. 修改application.yml中的server.port为其他端口如8082。前端npm install失败或极慢1. 网络问题无法连接 npm 官方仓库。2. Node.js 版本与项目不兼容。3. 项目依赖包有冲突。1. 检查网络连接。2. 查看错误日志确认是哪个包失败。3. 使用node -v检查版本。1. 使用淘宝镜像npm config set registry https://registry.npmmirror.com然后重试。2. 尝试使用yarn安装。3. 删除node_modules和package-lock.json重试npm install。4. 确保 Node.js 版本符合要求。前端能访问但所有 API 请求都 404前端代理配置错误请求未正确转发到后端。1. 检查浏览器开发者工具Network看请求的 URL 是什么。2. 检查vue.config.js中的proxy配置。3. 直接访问后端接口地址如http://localhost:8080/api/students看是否正常。1. 确保vue.config.js中target指向正确的后端地址和端口。2. 确保前端请求的baseURL设置正确通常设为/api以触发代理。3. 重启前端开发服务器。前端能访问API 请求返回 403/4011. 未登录或 Token 过期。2. 请求未携带 Token 或 Token 格式错误。3. 用户权限不足。1. 检查登录状态尝试重新登录。2. 查看请求头中Authorization字段是否正确携带了Bearer token。3. 检查后端控制台关于权限拦截的日志。1. 确保登录流程正确并保存了返回的 Token。2. 在前端请求拦截器如axios.interceptors.request.use中正确设置 Token。3. 检查数据库用户角色权限配置。数据库连接失败1. MySQL 服务未启动。2.application.yml中数据库配置URL, 用户名, 密码错误。3. 数据库驱动版本不匹配。1. 查看 Spring Boot 启动日志会有明确的连接错误信息。2. 使用数据库客户端工具测试连接。3. 检查pom.xml中 MySQL 驱动版本。1. 启动 MySQL 服务。2. 仔细核对application.yml中的数据库配置。3. 对于 MySQL 8.0驱动类应为com.mysql.cj.jdbc.DriverURL 中需要时区参数serverTimezone。页面样式错乱或 Element UI 组件不显示1. 前端依赖未正确安装。2. Element UI 未正确引入或版本冲突。3. 浏览器缓存。1. 检查package.json中element-ui版本。2. 检查main.js或插件文件中 Element UI 的引入语句。3. 查看浏览器控制台是否有 JS 或 CSS 加载错误。1. 重新执行npm install。2. 核对 Element UI 官方文档的引入方式。3. 使用浏览器无痕模式或清除缓存后访问。新增/编辑数据后列表不刷新1. 前端未在操作成功后重新调用查询接口。2. 后端操作成功但未返回正确状态码前端未处理。3. Vue 响应式数据未更新。1. 查看浏览器Network确认保存操作是否成功成功后是否有触发列表查询请求。2. 查看前端代码中表单提交后的回调函数。1. 在保存成功的回调函数中手动调用获取列表数据的方法。2. 确保后端返回统一的响应格式如{code: 200, msg: “成功”, data: ...}前端根据code判断。9. 最佳实践与使用建议基于此项目进行学习和开发时遵循以下建议可以事半功倍代码阅读与理解先行在动手修改前花时间理解项目结构。重点看后端controller接口层、service业务层、mapper/dao数据层、entity/model实体层的分层结构。前端src/api接口定义、src/views页面组件、src/router路由、src/store状态管理如用了 Vuex的划分。版本控制立即将项目纳入 Git 管理。在修改任何核心代码前先创建一个新的分支如feat-add-new-module。配置分离将数据库密码等敏感信息从application.yml移到application-dev.yml开发环境或使用环境变量并将application-dev.yml加入.gitignore避免密码泄露。接口文档化如果原项目没有强烈建议集成 Swagger 或 Knife4j。这能极大方便前后端协作和 API 测试。在pom.xml添加依赖在主类或配置类上添加EnableSwagger2或EnableKnife4j注解即可。前端组件化对于重复使用的 UI 部分如搜索栏、表格操作栏将其抽取为独立的 Vue 组件提高代码复用性。数据验证在前端使用 Element UI 的表单验证规则在后端使用 Spring Boot 的Valid注解和 BindingResult 进行数据校验确保数据有效性。错误处理与日志在后端使用全局异常处理器ControllerAdvice和ExceptionHandler统一处理异常并返回友好的错误信息。使用Slf4j注解记录关键操作日志。安全性考虑如需部署修改默认管理员密码。检查 SQL 注入风险确保 MyBatis 中使用了#{}而非${}如果直接写 SQL。对重要操作如删除、权限修改增加确认提示或操作日志。扩展功能思路添加图表统计集成 ECharts在仪表盘展示住宿率、报修类型统计、访客时段分布等图表。添加消息通知集成 WebSocket 或邮件服务实现报修处理通知、访客到达通知等。移动端适配考虑使用 Vant 等移动端 UI 库或开发 Uni-app 版本实现学生端的移动报修、访客预约等功能。这个基于 Spring Boot 和 Vue 的高校学生宿舍管理系统提供了一个非常扎实的前后端分离开发实战样本。它最值得尝试的点在于其完整的业务闭环和清晰的技术分层让你能直观地看到一个管理系统的骨架是如何搭建的。对于初次接触者最先应该验证的功能就是“登录-学生管理-宿舍分配”这个核心链路。只要这条链路跑通就证明你的基础环境、数据库、前后端通信都已就绪。最容易踩的坑通常是数据库连接配置、前端代理设置以及依赖包版本冲突按照本文第 8 部分的排查方法大部分问题都能快速定位。下一步你可以尝试在现有框架内添加一个新模块例如“物品损坏赔偿管理”或“卫生检查评分”以此来深入理解从数据库设计、后端接口开发到前端页面联调的完整流程。也可以尝试将其部署到云服务器体验从开发到上线的全过程。建议将本文和项目源码一起收藏作为 Spring Boot Vue 全栈学习路上的一个实用参考。