基于Vue+SpringBoot的高校宿舍管理系统开发实战

基于Vue+SpringBoot的高校宿舍管理系统开发实战

文章目录

• 基于Vue+SpringBoot的高校宿舍管理系统开发实战
• • 前言
  • 一、需求分析
  • 二、技术选型与架构设计
  • • 2.1 技术栈
    • 2.2 系统架构
    • 2.3 数据库设计
  • 三、核心功能实现
  • • 3.1 用户认证与权限管理
    • • 3.1.1 JWT身份认证
      • 3.1.2 动态路由与菜单
    • 3.2 宿舍分配管理
    • • 3.2.1 楼栋层级管理
      • 3.2.2 宿舍编号设置
      • 3.2.3 宿舍分配
    • 3.3 学生选床功能
    • • 3.3.1 选床规则
      • 3.3.2 实时状态更新
    • 3.4 宿舍调换申请
    • • 3.4.1 调换流程
    • 3.5 报修管理
    • • 3.5.1 报修申请
      • 3.5.2 维修处理
    • 3.6 数据统计与可视化
    • • 3.6.1 首页仪表盘
      • 3.6.2 ECharts图表
  • 四、项目亮点与技术难点
  • • 4.1 项目亮点
    • • 4.1.1 RBAC权限模型
      • 4.1.2 前后端分离架构
      • 4.1.3 响应式UI设计
    • 4.2 技术难点
    • • 4.2.1 宿舍分配算法
      • 4.2.2 动态路由加载
      • 4.2.3 数据一致性保证
  • 五、项目部署
  • • 5.1 前端部署
    • 5.2 后端部署
    • 5.3 数据库部署
  • 六、项目总结与展望
  • • 6.1 项目收获
    • 6.2 存在的不足
    • 6.3 未来优化方向
  • 七、结语
  • 附录
  • • 项目技术栈总结
    • 项目目录结构

前言

我在接单过程中完成了这个高校宿舍管理系统项目。该系统采用前后端分离架构，实现了学生宿舍的全流程数字化管理。本文将详细介绍项目的需求分析、技术选型、核心功能实现以及开发过程中的经验总结。

一、需求分析

管理员端功能需求：

• 系统管理：用户管理、角色管理、菜单权限管理
• 学院管理：学院、专业、班级的层级管理
• 学生管理：学生信息的增删改查、批量导入
• 宿舍管理：楼栋管理、宿舍分配、床位管理
• 报修管理：报修申请处理、维修状态跟踪
• 考勤管理：学生缺勤记录管理
• 公告管理：系统公告发布与管理

学生端功能需求：

• 宿舍选择：在线选择宿舍和床位
• 我的宿舍：查看当前宿舍信息
• 宿舍调换：申请调换宿舍
• 报修申请：提交宿舍维修申请
• 公告查看：查看系统公告

二、技术选型与架构设计

2.1 技术栈

前端技术栈：

• Vue 2.6.10 – 渐进式JavaScript框架
• Element UI 2.13.2 – 基于Vue的UI组件库
• Axios 0.18.1 – HTTP请求库
• Vue Router 3.0.6 – 路由管理
• Vuex 3.1.0 – 状态管理
• ECharts 5.3.2 – 数据可视化图表库

后端技术栈：

• Spring Boot 2.4.4 – 快速开发框架
• MyBatis-Plus 3.4.2 – 持久层框架
• Spring Security – 安全框架
• JWT 3.10.3 – 身份认证
• MySQL 8.0.21 – 关系型数据库
• Druid 1.2.1 – 数据库连接池

2.2 系统架构

系统采用前后端分离的架构设计：

┌─────────────┐ HTTP/JSON ┌─────────────┐
│ Vue前端 │ ◄─────────────────► │ SpringBoot │
│ (端口9528) │ │ 后端服务 │
└─────────────┘ └──────┬──────┘
│
▼
┌─────────────┐
│ MySQL │
│ 数据库 │
└─────────────┘

2.3 数据库设计

系统共设计了20+张数据表，主要包括：

核心业务表：

• school_collage – 学院表
• school_major – 专业表
• school_class – 班级表
• school_student – 学生表
• drom_build – 楼栋表
• drom_storey – 层数表
• drom_room – 宿舍表
• drom_room_bed – 床位表
• select_bed – 选床记录表
• assign_bed – 分配记录表
• apply_change – 调换申请表
• drom_repair – 报修表

系统管理表：

• sys_user – 系统用户表
• sys_role – 角色表
• sys_menu – 菜单表
• sys_user_role – 用户角色关联表
• sys_role_menu – 角色菜单关联表

三、核心功能实现

3.1 用户认证与权限管理

3.1.1 JWT身份认证

系统采用JWT（JSON Web Token）实现无状态的身份认证：

登录流程：

前端登录核心代码：

// 登录提交
const submitForm = () => {
loginForm.value.validate(async (valid) => {
if (valid) {
let res = await loginApi(loginParm)
if (res && res.code == 200) {
// 存储token
store.commit('setToken', res.token)
// 跳转首页
router.push({ path: '/' })
}
}
})
}

3.1.2 动态路由与菜单

系统根据用户角色动态加载菜单和路由：

菜单数据结构：

{
menu_id: 1,
parent_id: 0,
title: '系统管理',
name: 'system',
path: '/system',
icon: 'el-icon-s-tools',
type: '0', // 0:目录 1:菜单 2:按钮
children: […]
}

权限控制指令：

// 按钮级权限控制
<el–button v–permission="'sys:user:add'">新增</el–button>

3.2 宿舍分配管理

3.2.1 楼栋层级管理

系统采用三级结构管理宿舍：楼栋 → 层数 → 宿舍 → 床位

楼栋管理功能：

• 新增楼栋（指定层数、性别、管理员）
• 自动生成层数记录
• 编辑楼栋信息
• 删除楼栋（级联删除层数和宿舍）

数据表关系：

drom_build (楼栋表)
├─ drom_storey (层数表) – 外键: build_id
├─ dorm_room (宿舍表) – 外键: storey_id
└─ drom_room_bed (床位表) – 外键: room_id

3.2.2 宿舍编号设置

管理员可以为每层楼设置宿舍：

设置流程：

床位编号规则：

宿舍编号-床位号
例如：A101-1, A101-2, A101-3, A101-4

3.2.3 宿舍分配

管理员可以按班级批量分配宿舍：

分配流程：

前端核心代码：

<el-transfer
v-model="selectStu"
:data="stuList"
:titles="['未分配学生', '已选学生']"
:props="{
key: 'stuId',
label: 'stuName'
}">
</el-transfer>

3.3 学生选床功能

3.3.1 选床规则

学生登录后可以自主选择宿舍：

选床限制：

• 只能选择与自己性别匹配的楼栋
• 只能选择未被占用的床位
• 每个学生只能选择一个床位
• 已选择的床位可以取消重选

3.3.2 实时状态更新

系统实时显示床位状态：

床位状态标识：

<!– 已选择的床位 –>
<el-tag type="success">已选择</el-tag>

<!– 未选择的床位 –>
<el-button size="small" @click="selectBed(bed)">
选择
</el-button>

3.4 宿舍调换申请

3.4.1 调换流程

学生可以申请与其他学生调换宿舍：

申请流程：

数据表设计：

CREATE TABLE `apply_change` (
`apply_id` int(11) PRIMARY KEY AUTO_INCREMENT,
`apply_user_id` int(11) COMMENT '申请人id',
`apply_bed_id` int(11) COMMENT '申请人床位id',
`change_user_id` int(11) COMMENT '调换人id',
`change_bed_id` int(11) COMMENT '调换人床位id',
`status` varchar(2) COMMENT '0:待审核 1:通过 2:拒绝'
)

3.5 报修管理

3.5.1 报修申请

学生可以在线提交宿舍维修申请：

报修信息：

• 宿舍名称
• 联系人
• 联系电话
• 报修内容
• 报修时间
• 维修状态（待维修/已维修）

前端表单：

<el-form :model="repairForm" :rules="rules">
<el-form-item label="宿舍名称" prop="dromName">
<el-input v-model="repairForm.dromName"></el-input>
</el-form-item>
<el-form-item label="联系人" prop="username">
<el-input v-model="repairForm.username"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model="repairForm.phone"></el-input>
</el-form-item>
<el-form-item label="报修内容" prop="repairText">
<el-input type="textarea" v-model="repairForm.repairText">
</el-input>
</el-form-item>
</el-form>

3.5.2 维修处理

管理员可以查看所有报修记录并处理：

状态管理：

<el-tag v-if="row.status == '0'" type="warning">待维修</el-tag>
<el-tag v-else type="success">已维修</el-tag>

3.6 数据统计与可视化

3.6.1 首页仪表盘

系统首页展示关键数据统计：

统计卡片：

• 学生总数
• 班级总数
• 待维修数量
• 楼宇总数

前端实现：

<el-card class="stat-card">
<div class="stat-icon">
<i class="el-icon-user"></i>
</div>
<div class="stat-content">
<div class="stat-title">学生总数</div>
<div class="stat-value">{{ studentCount }}</div>
</div>
</el-card>

3.6.2 ECharts图表

使用ECharts展示学生统计数据：

柱状图配置：

const chartOption = {
title: { text: '各学院学生统计' },
tooltip: {},
xAxis: {
type: 'category',
data: collegeNames
},
yAxis: {
type: 'value'
},
series: [{
name: '学生数',
type: 'bar',
data: studentCounts,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#4db6ac' },
{ offset: 1, color: '#26a69a' }
])
}
}]
}

四、项目亮点与技术难点

4.1 项目亮点

4.1.1 RBAC权限模型

系统实现了完整的RBAC（基于角色的访问控制）权限模型：

权限层级：

用户 → 角色 → 菜单/按钮权限

特点：

• 支持多角色分配
• 动态菜单加载
• 按钮级权限控制
• 灵活的权限配置

4.1.2 前后端分离架构

优势：

• 前后端独立开发，提高效率
• 前端可以独立部署和优化
• 接口规范化，便于维护
• 支持多端复用（Web、移动端）

4.1.3 响应式UI设计

系统采用现代化的UI设计：

设计特点：

• 渐变色主题（#4db6ac → #26a69a）
• 卡片式布局
• 圆角设计（12px）
• 阴影效果
• 响应式适配

4.2 技术难点

4.2.1 宿舍分配算法

难点：

• 需要考虑性别匹配
• 床位容量限制
• 避免重复分配
• 支持批量操作

解决方案：

// 后端分配逻辑伪代码
public void assignBeds(List<Student> students, List<Bed> beds) {
// 1. 过滤性别匹配的床位
List<Bed> availableBeds = beds.stream()
.filter(bed -> bed.getSex().equals(students.get(0).getSex()))
.filter(bed -> !bed.isOccupied())
.collect(Collectors.toList());

// 2. 检查床位数量是否足够
if (availableBeds.size() < students.size()) {
throw new BusinessException("床位数量不足");
}

// 3. 批量分配
for (int i = 0; i < students.size(); i++) {
assignBed(students.get(i), availableBeds.get(i));
}
}

4.2.2 动态路由加载

难点：

• 后端返回的菜单数据需要转换为Vue Router格式
• 需要递归处理多级菜单
• 组件路径动态导入

解决方案：

// 递归构建路由
function buildRoutes(menus) {
const routes = []
menus.forEach(menu => {
const route = {
path: menu.path,
name: menu.name,
component: loadComponent(menu.url),
meta: {
title: menu.title,
icon: menu.icon
}
}

if (menu.children && menu.children.length > 0) {
route.children = buildRoutes(menu.children)
}

routes.push(route)
})
return routes
}

// 动态导入组件
function loadComponent(url) {
return () => import(`@/views${url}`)
}

4.2.3 数据一致性保证

难点：

• 宿舍调换涉及多表更新
• 需要保证事务一致性
• 并发操作可能导致数据冲突

解决方案：

@Transactional(rollbackFor = Exception.class)
public void approveChange(ApplyChange apply) {
// 1. 更新申请状态
apply.setStatus("1");
applyChangeMapper.updateById(apply);

// 2. 交换床位
SelectBed bed1 = selectBedMapper.selectByBedId(apply.getApplyBedId());
SelectBed bed2 = selectBedMapper.selectByBedId(apply.getChangeBedId());

// 交换学生ID
Integer tempStuId = bed1.getStuId();
bed1.setStuId(bed2.getStuId());
bed2.setStuId(tempStuId);

// 3. 更新数据库
selectBedMapper.updateById(bed1);
selectBedMapper.updateById(bed2);
}

五、项目部署

5.1 前端部署

开发环境运行：

# 安装依赖
npm install

# 启动开发服务器
npm run dev

生产环境打包：

# 打包
npm run build:prod

# 部署到Nginx
将dist目录下的文件复制到Nginx的html目录

5.2 后端部署

配置文件：

# application-test.yml
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3307/dormitory?useUnicode=true&characterEncoding=utf8
username: root
password: root
type: com.alibaba.druid.pool.DruidDataSource

启动命令：

# Maven打包
mvn clean package

# 运行jar包
java -jar itmk-base-web.jar

5.3 数据库部署

导入SQL文件：

# 创建数据库
CREATE DATABASE dormitory DEFAULT CHARACTER SET utf8mb4;

# 导入数据
mysql -u root -p dormitory < dormitory.sql

六、项目总结与展望

6.1 项目收获

通过这个项目的开发，我获得了以下收获：

技术能力提升：

• 掌握了Vue全家桶的实际应用
• 深入理解了Spring Boot微服务架构
• 学会了前后端分离项目的开发流程
• 提升了数据库设计和SQL优化能力

6.2 存在的不足

性能方面：

• 大数据量查询需要优化
• 缓存机制不够完善
• 前端打包体积较大

6.3 未来优化方向

功能扩展：

• 增加移动端H5页面
• 实现WebSocket实时消息推送
• 增加更丰富的数据报表
• 添加宿舍评分功能
• 实现智能宿舍推荐

性能优化：

• 引入Redis缓存
• 数据库查询优化
• 前端代码分割和懒加载
• 图片压缩和CDN加速

七、结语

这个高校宿舍管理系统项目是我在接单过程中完成的一个完整的前后端分离项目。通过这个项目，我不仅提升了技术能力，也积累了宝贵的项目经验。

作为一名本科毕业生，我深知实战经验对于求职的重要性。这个项目让我对Vue、Spring Boot、MySQL等技术栈有了更深入的理解，也让我学会了如何将理论知识应用到实际项目中。

希望这篇文章能够帮助到正在学习Web开发的同学们。如果你对项目有任何疑问，欢迎在评论区留言交流！

附录

项目技术栈总结

项目目录结构

前端目录：

stu-room-web/
├── src/
│ ├── api/ # 接口请求
│ ├── assets/ # 静态资源
│ ├── components/ # 公共组件
│ ├── layout/ # 布局组件
│ ├── router/ # 路由配置
│ ├── store/ # Vuex状态管理
│ ├── styles/ # 全局样式
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── public/ # 公共文件
└── package.json # 依赖配置

后端目录：

itmk-base-web/
├── src/main/java/com/itmk/
│ ├── config/ # 配置类
│ │ ├── jwt/ # JWT配置
│ │ ├── spring-security/ # 安全配置
│ │ └── web/ # Web配置
│ ├── web/ # 业务模块
│ │ ├── school_student/ # 学生管理
│ │ ├── drom_build/ # 楼栋管理
│ │ ├── drom_repair/ # 报修管理
│ │ └── …
│ └── SpringBootApplication.java
└── src/main/resources/
├── mapper/ # MyBatis映射文件
└── application.yml # 配置文件

关键词： Vue、Spring Boot、宿舍管理系统、前后端分离、Element UI、MyBatis-Plus、JWT、权限管理、项目实战

标签： #Vue #SpringBoot #项目实战 #宿舍管理 #前后端分离