SpringBoot+Vue宿舍管理系统毕业设计实战指南

又是一个宿舍管理系统，做毕业设计的同学十个里有三四个都奔这个题目去。这题看着不新鲜，但真正动手做起来，把前端、后端、数据库、论文、部署整套串起来，能在两三天内跑通一套能演示、能答辩、能写进论文的项目，其实没想象中那么简单。这篇东西我按自己带过的项目经验来写，思路、源码结构、表设计、部署命令、答辩常见坑一次说清，适合拿来直接参考着做。

1. 毕业设计选题与项目全景：宿舍管理系统为什么是"万金油"

1.1 选题逻辑：为什么大家扎堆做宿舍管理

选这个题目最大的优势是"需求清晰、边界可控"。学生、宿舍楼、房间、床位、报修、访客、公告、查寝，这些业务场景全都来自真实校园生活，不用额外调研就能画出数据流图。而且功能量级刚好卡在本科毕设的标准线上——既有CRUD，又有权限区分，还能加一点统计图表和导出功能，工作量不至于少到被导师觉得划水，也不至于多到做不完。

更重要的是，SpringBoot + Vue + MySQL 这套组合本身就是当前企业级前后端分离开发最主流的技术栈之一。答辩的时候，老师问一句"为什么选这个技术栈"，你可以非常理直气壮地说：SpringBoot 简化了 Spring 的配置复杂度，内嵌 Tomcat 让部署变成一条 jar 命令；Vue 的组件化开发适合这种中后台管理系统；MySQL 开源免费、生态成熟，配 MyBatis 操作数据库非常顺手。这套话术既是技术选型的真实理由，也是答辩时最稳妥的答案。

1.2 系统整体角色与核心流程

宿舍管理系统从使用者角度分三类角色：管理员、宿管员、学生。管理员管全局，维护宿舍楼和房间信息、分配学生床位、发布公告；宿管员负责日常查寝记录、处理报修工单、登记访客；学生端主要是查看自己所在宿舍信息、提交报修申请、查看公告通知。

核心业务流程其实是两条线。一条是"学生入住流程"：管理员创建宿舍楼→创建房间和床位→录入学生信息→分配宿舍→生成入住记录。另一条是"报修闭环流程"：学生提交报修→宿管员接单→维修完成→学生确认→归档。毕设答辩时把这两条线画清楚，整个系统的价值就立住了。不要小看这两条流程，很多同学做系统时功能一堆但逻辑混乱，导师一问"这个报修单什么时候算完结"就答不上来，直接扣分。

1.3 技术栈全景与版本推荐

这里有一个非常关键的实操建议：版本不要追新，要追稳。我自己早期做项目时吃过大亏——用了 Spring Boot 3.x，结果配套的 MyBatis 依赖、某些第三方工具类全都要求 JDK 17，本机 JDK 8 环境跑都跑不起来，折腾一整天光换版本了。

所以我推荐这套经过大量实战验证的组合：

提示：如果你在 IDEA 里新建项目时看到 Spring Boot 版本默认是 3.x，记得手动改成 2.7.x。这不是固执，而是为了让你把精力放在业务功能上，而不是耗在环境适配上。

2. 系统功能拆解与数据库设计：表结构设计决定后期开发效率

2.1 功能模块清单与优先级排序

做毕业设计最忌讳一上来就写代码。我的习惯是先列功能清单，标出哪些是核心功能、哪些是加分项。核心功能保证系统"像样"，加分项用来在论文里写"创新点"。

核心功能（必须完成）：

• 登录与角色权限：管理员、宿管员、学生三种角色，登录后显示不同菜单
• 学生信息管理：学生信息的增删改查、按学号/姓名/专业搜索、导入导出
• 宿舍楼与房间管理：楼栋信息维护、房间床位管理、入住状态可视化
• 学生入住分配：给未分配宿舍的学生分配房间，支持调整与退宿
• 报修管理：学生提交报修、宿管接单、状态流转、历史记录
• 公告管理：管理员发布公告，学生和宿管员可见

加分项（有精力再做）：

• 查寝记录：宿管员批量标记学生在寝情况
• 访客登记：记录外来人员进出
• 数据统计：按楼栋、院系维度统计入住率、报修率图表
• 导出Excel：学生名单导出，方便纸质归档

功能模块建议按"登录→宿舍资源→学生→报修→公告→统计"的顺序开发，这正好也是数据库表依赖的顺序——先有宿舍和房间，才能分配学生。

2.2 数据库表设计：关键表结构与字段说明

宿舍管理系统的数据库设计不算复杂，但有几个细节容易踩坑。我先给出一套经过验证的核心表结构，再讲坑在哪里。

第一张是用户表 sys_user，负责登录认证。

sql复制CREATE TABLE `sys_user` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL COMMENT '登录账号',
  `password` varchar(100) NOT NULL COMMENT '密码(MD5加密后)',
  `role` tinyint NOT NULL DEFAULT '3' COMMENT '角色:1管理员 2宿管员 3学生',
  `real_name` varchar(50) DEFAULT NULL COMMENT '真实姓名',
  `phone` varchar(20) DEFAULT NULL COMMENT '手机号',
  `status` tinyint DEFAULT '1' COMMENT '状态:1正常 0禁用',
  `create_time` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统用户表';

第二张是学生信息表 student，注意这里不要跟 sys_user 合并成一张表。学生基础信息很多，如果全塞进用户表，登录认证和业务查询就会互相干扰。分开以后，sys_user 只管账号密码，student 管学号院系等基础资料，通过 user_id 关联。

sql复制CREATE TABLE `student` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint DEFAULT NULL COMMENT '关联sys_user.id',
  `student_no` varchar(30) NOT NULL COMMENT '学号',
  `name` varchar(50) NOT NULL COMMENT '姓名',
  `gender` char(2) DEFAULT NULL COMMENT '性别',
  `college` varchar(100) DEFAULT NULL COMMENT '学院',
  `major` varchar(100) DEFAULT NULL COMMENT '专业',
  `class_name` varchar(100) DEFAULT NULL COMMENT '班级',
  `phone` varchar(20) DEFAULT NULL COMMENT '联系方式',
  `dorm_id` bigint DEFAULT NULL COMMENT '宿舍房间id，为空表示未分配',
  `bed_no` varchar(20) DEFAULT NULL COMMENT '床位号',
  `status` tinyint DEFAULT '0' COMMENT '0在读 1已毕业/退宿',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_student_no` (`student_no`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='学生信息表';

第三张是宿舍资源表。这里我强烈建议拆成 dorm_building（宿舍楼）和 dorm_room（房间）两张表，不要一张表硬扛。因为后续统计入住率、按楼栋查房间都要用到楼栋维度，拆开了 SQL 更好写。

sql复制CREATE TABLE `dorm_building` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL COMMENT '楼栋名称，如A栋、B栋',
  `manager_name` varchar(50) DEFAULT NULL COMMENT '宿管员姓名',
  `manager_phone` varchar(20) DEFAULT NULL COMMENT '宿管员电话',
  `floor_count` int DEFAULT NULL COMMENT '楼层数',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='宿舍楼栋表';

CREATE TABLE `dorm_room` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `building_id` bigint NOT NULL COMMENT '所属楼栋id',
  `room_no` varchar(20) NOT NULL COMMENT '房间号，如301',
  `floor` int DEFAULT NULL COMMENT '楼层',
  `capacity` int NOT NULL DEFAULT '4' COMMENT '可住人数',
  `current_count` int DEFAULT '0' COMMENT '当前已住人数',
  `gender_type` char(2) NOT NULL COMMENT '男/女宿舍',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='宿舍房间表';

报修表 repair 是业务闭环的核心，也是论文里画流程图的重头戏。字段要能体现完整状态流转：待处理→处理中→已完成→已确认。

sql复制CREATE TABLE `repair` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `student_id` bigint NOT NULL COMMENT '报修学生id',
  `room_id` bigint NOT NULL COMMENT '房间id',
  `content` varchar(500) NOT NULL COMMENT '报修内容',
  `images` varchar(500) DEFAULT NULL COMMENT '报修图片URL',
  `status` tinyint DEFAULT '0' COMMENT '0待处理 1处理中 2已完成 3已确认',
  `create_time` datetime DEFAULT NULL,
  `handle_time` datetime DEFAULT NULL COMMENT '接单时间',
  `finish_time` datetime DEFAULT NULL COMMENT '完成时间',
  `remark` varchar(500) DEFAULT NULL COMMENT '维修备注',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='报修记录表';

除了这几张主表，还需要公告表 notice、访客表 visit_log、查寝表 check_record。整套下来大概 8~10 张表，对毕设来说刚合适。表设计这里有两个经验教训：一是所有业务表都要有 create_time，很多同学做完才发现系统里没法按时间排序；二是后面会做统计功能，所以 dorm_room 里要单独存一个 current_count 冗余字段，虽然可以直接 count 学生表，但高频查询时冗余字段性能更好，这个点在论文里还可以写"合理冗余提升查询效率"。

3. 后端核心实现：SpringBoot 工程结构与业务开发要点

3.1 工程结构规范：分包思路与常见错误

后端工程的包结构我建议按"controller→service→mapper→entity"四层来分，这是最标准的写法，导师看起来也熟悉。

code复制com.example.dorm
├── controller        // 接收前端请求
│   ├── AuthController.java
│   ├── StudentController.java
│   ├── DormRoomController.java
│   └── RepairController.java
├── service           // 业务逻辑
│   ├── StudentService.java
│   └── impl/
├── mapper            // MyBatis 数据访问层
│   ├── StudentMapper.java
│   └── xml/
├── entity            // 数据库实体类
│   ├── Student.java
│   ├── DormRoom.java
│   └── SysUser.java
├── common            // 通用返回结果、异常处理、工具类
├── config            // 配置类（跨域、拦截器、WebMVC）
└── DormApplication.java   // 启动类

这个结构看似简单，但很多人会在这里犯一个特别坑的错误：把 common 里的统一返回结果类写得很随意，导致每个接口返回格式五花八门。前端拿到的数据一会儿是 {code:200, data:{}}，一会儿是 {code:200, data:[]}，对不上字段，调接口调得想哭。

我习惯定义一个 Result<T> 统一返回体：

java复制@Data
public class Result<T> {
    private Integer code;
    private String message;
    private T data;

    public static <T> Result<T> success(T data) {
        Result<T> result = new Result<>();
        result.setCode(200);
        result.setMessage("操作成功");
        result.setData(data);
        return result;
    }

    public static <T> Result<T> error(String message) {
        Result<T> result = new Result<>();
        result.setCode(500);
        result.setMessage(message);
        return result;
    }
}

所有 Controller 的返回值都封装成 Result，前端 axios 拦截器里统一处理 code，整个人就清爽了。这是我从正规团队项目里带回来的习惯，毕业论文的技术实现章节也可以写上"统一后端返回格式，提高前后端协作效率"。

3.2 关键业务接口实现：宿舍分配与报修状态流转

宿舍分配是后端最有业务含量的接口。基本逻辑是：传入学生 id 和房间 id，先判断房间有没有满员，满了返回错误提示；再判断学生当前有没有已分配的宿舍，有就需要先退宿；最后更新房间的 current_count 和学生的 dorm_id。这里必须用事务，不然房间显示住了 3 人，实际数据里住着 4 人，答辩演示翻车现场。

用 MyBatis-Plus 实现的话，代码非常简洁：

java复制@Transactional(rollbackFor = Exception.class)
public boolean assignDorm(Long studentId, Long roomId) {
    DormRoom room = dormRoomMapper.selectById(roomId);
    if (room.getCurrentCount() >= room.getCapacity()) {
        throw new RuntimeException("该房间已满员");
    }

    Student student = studentMapper.selectById(studentId);
    if (student.getDormId() != null) {
        // 自动退掉原宿舍
        DormRoom oldRoom = dormRoomMapper.selectById(student.getDormId());
        oldRoom.setCurrentCount(oldRoom.getCurrentCount() - 1);
        dormRoomMapper.updateById(oldRoom);
    }

    student.setDormId(roomId);
    studentMapper.updateById(student);

    room.setCurrentCount(room.getCurrentCount() + 1);
    dormRoomMapper.updateById(room);
    return true;
}

@Transactional 注解这里不能忘。我见过一个同学就漏了这个注解，学生换了宿舍，房间人数对不上，前台页面越看越乱，最后排查半天才发现是事务没有生效。

报修接口的状态流转也是同样的道理。每次状态变更时除了更新 status，还要同时更新对应的 handle_time 或 finish_time 字段，这样页面可以展示"什么时候接单的""什么时候修完的"，答辩时这个故事讲出来非常完整。

3.3 登录认证与权限控制：JWT + 拦截器

宿舍管理系统不需要复杂的 Spring Security 框架，那东西配置量太大，毕业设计完全没必要。用 JWT（JSON Web Token）加拦截器就够了，原理也好讲清楚：用户登录成功后，后端签发一个 token 字符串返回前端，前端存到 localStorage 里，每次请求在 header 里带着，后端拦截器校验 token 有效才放行。

核心代码分两部分。第一部分是 JWT 工具类：

java复制public class JwtUtil {
    // 密钥，实际项目放配置文件里
    private static final String SECRET = "dorm-manage-secret";
    private static final long EXPIRE = 1000 * 60 * 60 * 24; // 24小时

    public static String createToken(Long userId, String role) {
        return Jwts.builder()
                .claim("userId", userId)
                .claim("role", role)
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRE))
                .signWith(SignatureAlgorithm.HS256, SECRET)
                .compact();
    }

    public static Claims parseToken(String token) {
        return Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token).getBody();
    }
}

第二部分是拦截器，在请求进 Controller 之前统一校验：

java复制public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 放行登录接口
        String uri = request.getRequestURI();
        if (uri.contains("/auth/login")) {
            return true;
        }
        String token = request.getHeader("token");
        if (token == null || token.isEmpty()) {
            response.setStatus(401);
            return false;
        }
        try {
            Claims claims = JwtUtil.parseToken(token);
            request.setAttribute("userId", claims.get("userId"));
            return true;
        } catch (Exception e) {
            response.setStatus(401);
            return false;
        }
    }
}

前端的对应逻辑是在 axios 请求拦截器里加：

javascript复制axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.token = token
  }
  return config
})

这里有一个小坑要提醒：拦截器放行登录接口的判断条件，记得把 /auth/login 写清楚。很多人抄网上代码时漏了这一步，结果登录接口自己都进不去，一调用就 401，卡半天才反应过来。

4. 前端工程与实现：Vue 组件化开发到前后端联调

4.1 前端工程初始化：Vite 创建与 Element Plus 引入

前端我建议直接用 Vue3 + Vite + Element Plus 这套组合，虽然 Vue2 更简单，但都 2024 年了，新项目用 Vue3 写简历上也更好看。Vite 的启动速度快到让你怀疑人生，开发体验比 Vue CLI 好太多。

创建项目很简单，一条命令的事情：

bash复制npm create vite@latest dorm-frontend -- --template vue
cd dorm-frontend
npm install

然后按需引入 Element Plus，在 main.js 里配置：

javascript复制import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(ElementPlus, { locale: zhCn })
app.use(router)
app.mount('#app')

刚接触 Vue 的同学最容易被"安装依赖"这一步卡住。npm install 跑半天不动，要么是网络问题，要么是镜像源问题。我的经验是直接把镜像源切到淘宝源，国内下载速度立刻起飞：

bash复制npm config set registry https://registry.npmmirror.com

4.2 前端核心页面实现：登录页与宿舍管理页

登录页是前端第一个要写的页面，也是整个系统的门面。我习惯把登录做成表单校验 + 调用 /auth/login 接口 + 存 token + 跳转路由四步。这里有个细节：登录成功后要根据角色跳转不同首页，管理员进管理后台，学生进自己的宿舍信息页。路由配置用动态路由或者路由守卫实现都可以，答辩时能说清楚"根据角色动态加载菜单"就是加分项。

javascript复制const login = async () => {
  // 表单校验通过后调用接口
  const { data } = await axios.post('/api/auth/login', form.value)
  if (data.code === 200) {
    localStorage.setItem('token', data.data.token)
    localStorage.setItem('role', data.data.role)
    localStorage.setItem('userName', data.data.realName)
    router.push(data.data.role === 3 ? '/student' : '/dashboard')
  }
}

宿舍管理页面是系统功能最密集的页面，列表展示、搜索、弹窗编辑、宿舍分配操作全在这里。用 Element Plus 的 el-table 加 el-dialog 配合，开发效率很高。我的习惯是列表页统一封装成"搜索区 + 表格区 + 分页区 + 弹窗表单区"四块，每个模块做成独立的组件或者直接在页面里分区，代码阅读性比一团乱麻强很多。

前端调后端接口时，跨域问题几乎必然遇到。开发环境配置 Vite 的代理最省事：

javascript复制// vite.config.js
export default defineConfig({
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

这样前端请求 /api/student/list，Vite 会自动转发到后端 8080 端口。后端接口路径记得也统一加 /api 前缀，两边约定好，联调速度快很多。

4.3 前后端接口联调经验：axios 封装与状态码统一处理

联调阶段是出 bug 最多的阶段，但大部分问题都是低级错误。我在实际项目中封装 axios 时，会统一在响应拦截器里处理 token 过期和业务错误码，前端每个页面只管写业务逻辑，不用到处 try-catch。

javascript复制axios.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code === 200) {
      return res
    }
    if (res.code === 401) {
      localStorage.clear()
      router.push('/login')
      ElMessage.error('登录已过期，请重新登录')
    }
    ElMessage.error(res.message || '请求失败')
    return Promise.reject(new Error(res.message))
  },
  error => {
    ElMessage.error('网络异常或服务器错误')
    return Promise.reject(error)
  }
)

这种统一处理的模式特别适合毕设系统，它能把你从无穷无尽的 if (res.code === 200) 判断里解放出来。而且论文里可以写"通过 Axios 拦截器统一处理异常响应，提升系统健壮性"，这就是一个很实在的技术亮点。

5. 本地环境搭建与部署落地：从 0 到 1 跑通整套系统

5.1 开发环境准备：JDK、MySQL、Node 的安装与踩坑

我见过太多人第一步就卡在环境上，所以这部分尽量写细。先说 MySQL 安装，如果你用 Windows，直接去官网下载 MySQL Installer 选 5.7 版本即可。安装过程中有一个最关键的步骤是选择认证方式，MySQL 8.0 默认用的是 caching_sha2_password，而很多老旧 JDBC 驱动不支持这种认证方式，会导致后端连接时报 Unable to load authentication plugin 错误。所以我一直推荐用 5.7，省心。如果你非要装 8.0，那记得在 5.7 中选 Use Legacy Password Authentication，或者在后端连接串里加上 allowPublicKeyRetrieval=true 参数。

JDK 环境配置没什么好说的，装 1.8，配置好 JAVA_HOME 和 PATH 就算完事。可以在命令行里验证一下：

bash复制java -version

Node.js 推荐装 16 或 18 LTS 版本，太新的 20 版本配某些老 npm 包也可能有兼容性问题。装完同样验证：

bash复制node -v
npm -v

5.2 数据库初始化：SQL 导入与配置修改

拿到项目源码后，第一步不是急着启动后端，而是先把数据库建好。用 Navicat 或者命令行执行项目 sql 目录下的 dorm.sql 脚本即可。导入完成后，检查下有没有这三张核心表：sys_user、student、dorm_room。

然后修改后端配置文件 application.yml，里面最需要改的就是数据库连接串。这里有个坑：数据库地址别写成 localhost，写成 127.0.0.1 更稳。有几个版本的 MySQL 驱动对 localhost 解析有问题，换成 IP 地址立刻正常。

yaml复制spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/dorm_db?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 你的密码
    driver-class-name: com.mysql.jdbc.Driver

5.3 后端启动：Maven 打包与 jar 包运行

后端启动有两种方式。开发阶段直接在 IDEA 里运行 DormApplication.java 主类就行，第一次运行记得让它自动下载 Maven 依赖。如果下载太慢，在 settings.xml 里配置阿里云镜像，速度提升不止一个量级。

生产部署阶段，需要把项目打成 jar 包：

bash复制mvn clean package -DskipTests

在 target 目录下就能看到 dorm-backend-0.0.1-SNAPSHOT.jar，然后直接运行：

bash复制java -jar dorm-backend-0.0.1-SNAPSHOT.jar

看到 Started DormApplication 的日志，说明后端启动成功了，默认端口 8080，浏览器访问 http://localhost:8080/api/auth/login 能出现 JSON 响应就基本没问题。

这里有一个非常经典的启动失败场景：端口被占用。如果日志里报 Port 8080 was already in use，在 Windows 下用命令查占用：

bash复制netstat -ano | findstr 8080

找到 PID 后，先去任务管理器确认是不是什么残留进程。如果是你自己的 Java 进程，直接 taskkill /pid 进程号 /f 杀掉即可。

5.4 前端构建与部署：打包 dist 后的两种部署方式

前端开发模式下用 npm run dev 启动，默认端口 5173，浏览器访问 http://localhost:5173。如果开发模式下需要调后端接口，记得 Vite 代理配好后接口路径要统一以 /api 开头。

真正要部署到服务器或者交付给导师演示时，需要构建生产包：

bash复制npm run build

构建完成后，dist 目录里就是纯静态文件。部署方式有两种常见选择。

第一种是部署到 Nginx，这是目前最主流的方式。Nginx 配置文件里设置静态文件路径和反向代理：

nginx复制server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html/dist;
    index index.html;

    location /api/ {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

第二种是直接把 dist 目录丢进后端的 static 资源目录，SpringBoot 会自动托管静态资源。这种方式适合毕设演示，因为只需要启动一个 jar 包就能同时访问前端页面和后端接口，省去 Nginx 的配置。

注意：不管哪种方式，前端路由如果使用了 Vue Router 的 history 模式，服务器都需要配置"所有未匹配路径回退到 index.html"，否则刷新页面会 404。Nginx 下加一行 try_files $uri $uri/ /index.html; 即可解决。

6. 常见问题排查与项目交付：不踩坑的毕设避坑指南

6.1 高频问题速查表：启动失败、白屏、接口报错

我把自己做过、带过的项目里最容易遇到的问题整理成一张速查表，每个问题都附上排查方向，可以当工具用：

6.2 MyBatis-Plus 与 Mapper XML 的经典坑：