1. 项目概述SpringBootVue宿舍管理系统核心价值这个基于SpringBootVue的学生宿舍管理系统本质上是一个针对高校后勤管理的数字化解决方案。我在实际开发这类系统时发现传统Excel表格管理宿舍的方式存在数据孤岛、流程混乱、统计滞后等痛点。而采用前后端分离架构实现的这套系统能够将宿舍分配、维修申报、访客登记等高频场景全部线上化。从技术选型来看SpringBootVue的组合堪称当前企业级应用开发的黄金搭档。SpringBoot简化了后端服务的配置和部署Vue则提供了现代化的前端交互体验。MyBatis作为持久层框架在复杂SQL查询场景下比JPA更灵活而MySQL作为关系型数据库的经典选择完全能够满足学生宿舍管理这类结构化数据存储需求。这套系统特别适合两类人群一是计算机相关专业学生作为毕业设计或课程实践项目二是高校信息化部门需要快速搭建轻量级宿舍管理平台。对于前者项目涵盖了权限管理、数据可视化、前后端交互等典型开发场景对于后者系统开箱即用的特性可以快速部署到生产环境。2. 技术架构解析与设计思路2.1 前后端分离架构优势采用SpringBootVue的前后端分离架构我在实际项目中验证过几个显著优势开发效率提升前后端可以并行开发只需约定好API接口性能优化空间大前端资源可以单独部署CDN后端服务可集群化技术栈灵活前端可替换为React等框架后端服务可被多种客户端调用典型的数据流转路径是 Vue组件触发API请求 → Axios发送HTTP请求 → SpringBoot控制器接收 → MyBatis处理数据库操作 → 返回JSON数据 → Vue渲染页面2.2 数据库设计关键点宿舍管理系统的MySQL表设计有几个核心表CREATE TABLE dorm_building ( id int NOT NULL AUTO_INCREMENT, name varchar(50) NOT NULL COMMENT 楼栋名称, floors int NOT NULL COMMENT 总层数, room_count int NOT NULL COMMENT 房间总数, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE dorm_room ( id int NOT NULL AUTO_INCREMENT, building_id int NOT NULL, room_number varchar(20) NOT NULL, bed_count int NOT NULL DEFAULT 4, current_count int NOT NULL DEFAULT 0, status tinyint NOT NULL DEFAULT 1 COMMENT 1可用 2维修中, PRIMARY KEY (id), KEY idx_building (building_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;特别注意的点建立合理的索引如building_id使用utf8mb4字符集支持emoji等特殊字符添加详细的字段注释方便后期维护2.3 权限模型设计宿舍管理系统通常需要RBAC基于角色的访问控制模型我建议这样实现Entity public class SysUser { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String username; private String password; ManyToMany(fetch FetchType.EAGER) private SetSysRole roles new HashSet(); } Entity public class SysRole { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String name; ManyToMany JoinTable(name sys_role_permission, joinColumns JoinColumn(name role_id), inverseJoinColumns JoinColumn(name permission_id)) private SetSysPermission permissions new HashSet(); }3. 核心功能模块实现3.1 宿舍分配算法实现自动分配宿舍是个典型业务场景我的实现逻辑是优先分配同院系学生到相同楼栋考虑学生特殊需求如残疾学生分配低楼层平衡各宿舍入住率核心Java代码片段public ListStudent autoAssignDorm(ListStudent students) { // 按院系分组 MapString, ListStudent departmentMap students.stream() .collect(Collectors.groupingBy(Student::getDepartment)); ListStudent result new ArrayList(); for (ListStudent deptStudents : departmentMap.values()) { // 获取该院系对应的推荐楼栋 DormBuilding building getRecommendedBuilding(deptStudents.get(0)); // 获取可用房间 ListDormRoom availableRooms dormRoomRepository .findAvailableRooms(building.getId()); // 分配算法 assignStudentsToRooms(deptStudents, availableRooms); result.addAll(deptStudents); } return result; }3.2 维修申报流程开发维修流程涉及状态机设计典型状态包括待处理已分配维修工维修中已完成已评价Vue前端实现要点template el-steps :activecurrentStatus el-step title申报 description提交维修申请/el-step el-step title受理 description后勤处受理工单/el-step el-step title维修 description维修人员处理中/el-step el-step title完成 description维修完成确认/el-step /el-steps el-form v-ifcurrentStatus0 submitsubmitRepair !-- 表单内容 -- /el-form /template3.3 访客登记电子化传统纸质登记改为电子化需注意身份证OCR识别集成被访学生实时通知离校时间自动提醒关键MyBatis查询select idselectVisitorRecords resultMapVisitorRecordMap SELECT v.*, s.name as student_name, s.room_number FROM visitor v LEFT JOIN student s ON v.student_id s.id WHERE if testbuildingId ! null s.building_id #{buildingId} AND /if v.visit_time BETWEEN #{startTime} AND #{endTime} ORDER BY v.visit_time DESC /select4. 前后端交互关键实现4.1 SpringBoot接口设计规范我遵循的RESTful设计原则资源使用复数名词/api/students请求方法对应CRUDGET获取POST新增PUT修改DELETE删除状态码规范200成功400参数错误401未授权404不存在示例控制器RestController RequestMapping(/api/students) public class StudentController { GetMapping public ResponseEntityPageResultStudent listStudents( RequestParam(required false) String name, RequestParam(defaultValue 1) int page, RequestParam(defaultValue 10) int size) { Pageable pageable PageRequest.of(page-1, size); PageStudent studentPage studentService.findByNameContaining(name, pageable); return ResponseEntity.ok(PageResult.from(studentPage)); } PostMapping public ResponseEntityStudent createStudent(Valid RequestBody Student student) { Student saved studentService.save(student); return ResponseEntity.created(URI.create(/api/students/saved.getId())) .body(saved); } }4.2 Vue前端工程实践我的Vue项目结构组织src/ ├── api/ # 所有API请求封装 │ └── student.js ├── components/ # 公共组件 │ └── DormSelector.vue ├── router/ # 路由配置 ├── store/ # Vuex状态管理 ├── utils/ # 工具函数 └── views/ # 页面组件 └── student/ ├── List.vue └── Form.vue典型API请求封装// api/student.js import request from /utils/request export function getStudents(params) { return request({ url: /api/students, method: get, params }) } export function createStudent(data) { return request({ url: /api/students, method: post, data }) }4.3 文件上传处理方案宿舍管理系统常需上传学生照片、维修凭证等我的实现方案后端SpringBoot配置Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/uploads/**) .addResourceLocations(file: uploadPath); } } RestController RequestMapping(/api/upload) public class UploadController { Value(${upload.path}) private String uploadPath; PostMapping public String upload(RequestParam(file) MultipartFile file) { String filename UUID.randomUUID() getFileExtension(file.getOriginalFilename()); Path path Paths.get(uploadPath, filename); Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING); return /uploads/ filename; } }前端Vue实现template el-upload action/api/upload :on-successhandleSuccess :before-uploadbeforeUpload el-button typeprimary点击上传/el-button /el-upload /template script export default { methods: { beforeUpload(file) { const isImage file.type.startsWith(image/); if (!isImage) { this.$message.error(只能上传图片文件); } return isImage; }, handleSuccess(response) { this.form.avatar response; } } } /script5. 系统部署与性能优化5.1 多环境配置管理实际项目中我使用SpringBoot的profile特性管理不同环境配置application-dev.propertiesspring.datasource.urljdbc:mysql://localhost:3306/dorm_dev spring.datasource.usernamedevuser spring.datasource.passworddevpassapplication-prod.propertiesspring.datasource.urljdbc:mysql://prod-db:3306/dorm_prod spring.datasource.usernameproduser spring.datasource.passwordprodpwd启动时指定profilejava -jar dorm-system.jar --spring.profiles.activeprod5.2 Vue项目优化实践我常用的Vue性能优化手段路由懒加载const StudentList () import(./views/student/List.vue)生产环境去除console// vue.config.js module.exports { chainWebpack: config { config.optimization.minimizer(terser).tap(args { args[0].terserOptions.compress.drop_console true return args }) } }使用CDN引入Vue等大型库// vue.config.js module.exports { configureWebpack: { externals: { vue: Vue, element-ui: ELEMENT } } }5.3 MySQL性能调优针对宿舍管理系统的数据库优化建议添加合适的索引ALTER TABLE dorm_room ADD INDEX idx_status (status); ALTER TABLE repair_order ADD INDEX idx_student_status (student_id, status);优化慢查询-- 查看慢查询日志 SET GLOBAL slow_query_log ON; SET GLOBAL long_query_time 1; -- 分析执行计划 EXPLAIN SELECT * FROM student WHERE name LIKE 张%;定期维护-- 每周执行一次 OPTIMIZE TABLE dorm_room; ANALYZE TABLE student;6. 常见问题与解决方案6.1 跨域问题处理开发阶段常见跨域问题我的解决方案SpringBoot后端配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(http://localhost:8080) .allowedMethods(*) .allowCredentials(true) .maxAge(3600); } }生产环境建议使用Nginx反向代理统一域名或配置正确的CORS策略6.2 MyBatis常见坑点我在使用MyBatis时遇到的典型问题结果集映射问题!-- 错误示范 -- resultMap idwrongMap typeStudent result columnroom_number propertyroom.number/ /resultMap !-- 正确做法 -- resultMap idstudentMap typeStudent association propertyroom javaTypeDormRoom result columnroom_number propertynumber/ /association /resultMap动态SQL中的比较!-- 错误示范 -- if teststatus 1 !-- 字符串比较应使用双引号 -- !-- 正确做法 -- if teststatus 1 !-- 外层单引号内层双引号 --6.3 Vue响应式问题常见的Vue响应式失效场景及解决数组更新问题// 不会触发视图更新 this.items[0] newValue; // 正确做法 this.$set(this.items, 0, newValue); // 或 this.items.splice(0, 1, newValue);对象属性添加// 不会触发更新 this.student.newProp value; // 正确做法 this.$set(this.student, newProp, value); // 或 this.student {...this.student, newProp: value};7. 项目扩展方向7.1 微信小程序集成将核心功能扩展到微信小程序的方案复用现有SpringBoot API开发小程序端页面微信登录对接小程序登录流程实现RestController RequestMapping(/api/wx) public class WxLoginController { GetMapping(/login) public ResponseEntityString wxLogin(RequestParam String code) { // 调用微信接口服务获取openid String openid wxService.getOpenid(code); // 查询或创建用户 User user userService.findOrCreateByWxOpenid(openid); // 生成JWT token String token jwtUtil.generateToken(user); return ResponseEntity.ok(token); } }7.2 数据可视化大屏利用ECharts实现管理数据可视化template div classdashboard el-row :gutter20 el-col :span12 div refroomUsageChart styleheight:400px/div /el-col el-col :span12 div refrepairTrendChart styleheight:400px/div /el-col /el-row /div /template script import * as echarts from echarts; export default { mounted() { this.initRoomUsageChart(); this.initRepairTrendChart(); }, methods: { initRoomUsageChart() { const chart echarts.init(this.$refs.roomUsageChart); chart.setOption({ title: { text: 宿舍使用率统计 }, tooltip: {}, series: [{ name: 使用率, type: pie, data: [ { value: 75, name: 已入住 }, { value: 25, name: 空置 } ] }] }); } } } /script7.3 物联网设备对接与智能门锁等硬件对接的注意事项设计设备状态表CREATE TABLE iot_device ( id int NOT NULL AUTO_INCREMENT, room_id int NOT NULL, mac_address varchar(32) NOT NULL, last_heartbeat datetime DEFAULT NULL, status tinyint NOT NULL DEFAULT 1 COMMENT 1在线 0离线, PRIMARY KEY (id), UNIQUE KEY uk_mac (mac_address) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;实现设备通信接口RestController RequestMapping(/api/iot) public class IotController { PostMapping(/heartbeat) public ResponseEntity? heartbeat(RequestBody HeartbeatDTO dto) { deviceService.updateHeartbeat(dto.getMacAddress()); return ResponseEntity.ok().build(); } PostMapping(/unlock) public ResponseEntity? unlockRoom(RequestBody UnlockDTO dto) { boolean success deviceService.unlockRoom( dto.getRoomId(), dto.getUserId()); return success ? ResponseEntity.ok().build() : ResponseEntity.badRequest().build(); } }在实际部署这套宿舍管理系统时我建议采用Docker容器化部署方案可以大幅简化环境配置和后期维护工作。特别是对于高校信息化部门通常有限的IT资源来说容器化能显著降低运维复杂度。 SpringBoot+Vue宿舍管理系统开发实战
1. 项目概述SpringBootVue宿舍管理系统核心价值这个基于SpringBootVue的学生宿舍管理系统本质上是一个针对高校后勤管理的数字化解决方案。我在实际开发这类系统时发现传统Excel表格管理宿舍的方式存在数据孤岛、流程混乱、统计滞后等痛点。而采用前后端分离架构实现的这套系统能够将宿舍分配、维修申报、访客登记等高频场景全部线上化。从技术选型来看SpringBootVue的组合堪称当前企业级应用开发的黄金搭档。SpringBoot简化了后端服务的配置和部署Vue则提供了现代化的前端交互体验。MyBatis作为持久层框架在复杂SQL查询场景下比JPA更灵活而MySQL作为关系型数据库的经典选择完全能够满足学生宿舍管理这类结构化数据存储需求。这套系统特别适合两类人群一是计算机相关专业学生作为毕业设计或课程实践项目二是高校信息化部门需要快速搭建轻量级宿舍管理平台。对于前者项目涵盖了权限管理、数据可视化、前后端交互等典型开发场景对于后者系统开箱即用的特性可以快速部署到生产环境。2. 技术架构解析与设计思路2.1 前后端分离架构优势采用SpringBootVue的前后端分离架构我在实际项目中验证过几个显著优势开发效率提升前后端可以并行开发只需约定好API接口性能优化空间大前端资源可以单独部署CDN后端服务可集群化技术栈灵活前端可替换为React等框架后端服务可被多种客户端调用典型的数据流转路径是 Vue组件触发API请求 → Axios发送HTTP请求 → SpringBoot控制器接收 → MyBatis处理数据库操作 → 返回JSON数据 → Vue渲染页面2.2 数据库设计关键点宿舍管理系统的MySQL表设计有几个核心表CREATE TABLE dorm_building ( id int NOT NULL AUTO_INCREMENT, name varchar(50) NOT NULL COMMENT 楼栋名称, floors int NOT NULL COMMENT 总层数, room_count int NOT NULL COMMENT 房间总数, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE dorm_room ( id int NOT NULL AUTO_INCREMENT, building_id int NOT NULL, room_number varchar(20) NOT NULL, bed_count int NOT NULL DEFAULT 4, current_count int NOT NULL DEFAULT 0, status tinyint NOT NULL DEFAULT 1 COMMENT 1可用 2维修中, PRIMARY KEY (id), KEY idx_building (building_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;特别注意的点建立合理的索引如building_id使用utf8mb4字符集支持emoji等特殊字符添加详细的字段注释方便后期维护2.3 权限模型设计宿舍管理系统通常需要RBAC基于角色的访问控制模型我建议这样实现Entity public class SysUser { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String username; private String password; ManyToMany(fetch FetchType.EAGER) private SetSysRole roles new HashSet(); } Entity public class SysRole { Id GeneratedValue(strategy GenerationType.IDENTITY) private Long id; private String name; ManyToMany JoinTable(name sys_role_permission, joinColumns JoinColumn(name role_id), inverseJoinColumns JoinColumn(name permission_id)) private SetSysPermission permissions new HashSet(); }3. 核心功能模块实现3.1 宿舍分配算法实现自动分配宿舍是个典型业务场景我的实现逻辑是优先分配同院系学生到相同楼栋考虑学生特殊需求如残疾学生分配低楼层平衡各宿舍入住率核心Java代码片段public ListStudent autoAssignDorm(ListStudent students) { // 按院系分组 MapString, ListStudent departmentMap students.stream() .collect(Collectors.groupingBy(Student::getDepartment)); ListStudent result new ArrayList(); for (ListStudent deptStudents : departmentMap.values()) { // 获取该院系对应的推荐楼栋 DormBuilding building getRecommendedBuilding(deptStudents.get(0)); // 获取可用房间 ListDormRoom availableRooms dormRoomRepository .findAvailableRooms(building.getId()); // 分配算法 assignStudentsToRooms(deptStudents, availableRooms); result.addAll(deptStudents); } return result; }3.2 维修申报流程开发维修流程涉及状态机设计典型状态包括待处理已分配维修工维修中已完成已评价Vue前端实现要点template el-steps :activecurrentStatus el-step title申报 description提交维修申请/el-step el-step title受理 description后勤处受理工单/el-step el-step title维修 description维修人员处理中/el-step el-step title完成 description维修完成确认/el-step /el-steps el-form v-ifcurrentStatus0 submitsubmitRepair !-- 表单内容 -- /el-form /template3.3 访客登记电子化传统纸质登记改为电子化需注意身份证OCR识别集成被访学生实时通知离校时间自动提醒关键MyBatis查询select idselectVisitorRecords resultMapVisitorRecordMap SELECT v.*, s.name as student_name, s.room_number FROM visitor v LEFT JOIN student s ON v.student_id s.id WHERE if testbuildingId ! null s.building_id #{buildingId} AND /if v.visit_time BETWEEN #{startTime} AND #{endTime} ORDER BY v.visit_time DESC /select4. 前后端交互关键实现4.1 SpringBoot接口设计规范我遵循的RESTful设计原则资源使用复数名词/api/students请求方法对应CRUDGET获取POST新增PUT修改DELETE删除状态码规范200成功400参数错误401未授权404不存在示例控制器RestController RequestMapping(/api/students) public class StudentController { GetMapping public ResponseEntityPageResultStudent listStudents( RequestParam(required false) String name, RequestParam(defaultValue 1) int page, RequestParam(defaultValue 10) int size) { Pageable pageable PageRequest.of(page-1, size); PageStudent studentPage studentService.findByNameContaining(name, pageable); return ResponseEntity.ok(PageResult.from(studentPage)); } PostMapping public ResponseEntityStudent createStudent(Valid RequestBody Student student) { Student saved studentService.save(student); return ResponseEntity.created(URI.create(/api/students/saved.getId())) .body(saved); } }4.2 Vue前端工程实践我的Vue项目结构组织src/ ├── api/ # 所有API请求封装 │ └── student.js ├── components/ # 公共组件 │ └── DormSelector.vue ├── router/ # 路由配置 ├── store/ # Vuex状态管理 ├── utils/ # 工具函数 └── views/ # 页面组件 └── student/ ├── List.vue └── Form.vue典型API请求封装// api/student.js import request from /utils/request export function getStudents(params) { return request({ url: /api/students, method: get, params }) } export function createStudent(data) { return request({ url: /api/students, method: post, data }) }4.3 文件上传处理方案宿舍管理系统常需上传学生照片、维修凭证等我的实现方案后端SpringBoot配置Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/uploads/**) .addResourceLocations(file: uploadPath); } } RestController RequestMapping(/api/upload) public class UploadController { Value(${upload.path}) private String uploadPath; PostMapping public String upload(RequestParam(file) MultipartFile file) { String filename UUID.randomUUID() getFileExtension(file.getOriginalFilename()); Path path Paths.get(uploadPath, filename); Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING); return /uploads/ filename; } }前端Vue实现template el-upload action/api/upload :on-successhandleSuccess :before-uploadbeforeUpload el-button typeprimary点击上传/el-button /el-upload /template script export default { methods: { beforeUpload(file) { const isImage file.type.startsWith(image/); if (!isImage) { this.$message.error(只能上传图片文件); } return isImage; }, handleSuccess(response) { this.form.avatar response; } } } /script5. 系统部署与性能优化5.1 多环境配置管理实际项目中我使用SpringBoot的profile特性管理不同环境配置application-dev.propertiesspring.datasource.urljdbc:mysql://localhost:3306/dorm_dev spring.datasource.usernamedevuser spring.datasource.passworddevpassapplication-prod.propertiesspring.datasource.urljdbc:mysql://prod-db:3306/dorm_prod spring.datasource.usernameproduser spring.datasource.passwordprodpwd启动时指定profilejava -jar dorm-system.jar --spring.profiles.activeprod5.2 Vue项目优化实践我常用的Vue性能优化手段路由懒加载const StudentList () import(./views/student/List.vue)生产环境去除console// vue.config.js module.exports { chainWebpack: config { config.optimization.minimizer(terser).tap(args { args[0].terserOptions.compress.drop_console true return args }) } }使用CDN引入Vue等大型库// vue.config.js module.exports { configureWebpack: { externals: { vue: Vue, element-ui: ELEMENT } } }5.3 MySQL性能调优针对宿舍管理系统的数据库优化建议添加合适的索引ALTER TABLE dorm_room ADD INDEX idx_status (status); ALTER TABLE repair_order ADD INDEX idx_student_status (student_id, status);优化慢查询-- 查看慢查询日志 SET GLOBAL slow_query_log ON; SET GLOBAL long_query_time 1; -- 分析执行计划 EXPLAIN SELECT * FROM student WHERE name LIKE 张%;定期维护-- 每周执行一次 OPTIMIZE TABLE dorm_room; ANALYZE TABLE student;6. 常见问题与解决方案6.1 跨域问题处理开发阶段常见跨域问题我的解决方案SpringBoot后端配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/api/**) .allowedOrigins(http://localhost:8080) .allowedMethods(*) .allowCredentials(true) .maxAge(3600); } }生产环境建议使用Nginx反向代理统一域名或配置正确的CORS策略6.2 MyBatis常见坑点我在使用MyBatis时遇到的典型问题结果集映射问题!-- 错误示范 -- resultMap idwrongMap typeStudent result columnroom_number propertyroom.number/ /resultMap !-- 正确做法 -- resultMap idstudentMap typeStudent association propertyroom javaTypeDormRoom result columnroom_number propertynumber/ /association /resultMap动态SQL中的比较!-- 错误示范 -- if teststatus 1 !-- 字符串比较应使用双引号 -- !-- 正确做法 -- if teststatus 1 !-- 外层单引号内层双引号 --6.3 Vue响应式问题常见的Vue响应式失效场景及解决数组更新问题// 不会触发视图更新 this.items[0] newValue; // 正确做法 this.$set(this.items, 0, newValue); // 或 this.items.splice(0, 1, newValue);对象属性添加// 不会触发更新 this.student.newProp value; // 正确做法 this.$set(this.student, newProp, value); // 或 this.student {...this.student, newProp: value};7. 项目扩展方向7.1 微信小程序集成将核心功能扩展到微信小程序的方案复用现有SpringBoot API开发小程序端页面微信登录对接小程序登录流程实现RestController RequestMapping(/api/wx) public class WxLoginController { GetMapping(/login) public ResponseEntityString wxLogin(RequestParam String code) { // 调用微信接口服务获取openid String openid wxService.getOpenid(code); // 查询或创建用户 User user userService.findOrCreateByWxOpenid(openid); // 生成JWT token String token jwtUtil.generateToken(user); return ResponseEntity.ok(token); } }7.2 数据可视化大屏利用ECharts实现管理数据可视化template div classdashboard el-row :gutter20 el-col :span12 div refroomUsageChart styleheight:400px/div /el-col el-col :span12 div refrepairTrendChart styleheight:400px/div /el-col /el-row /div /template script import * as echarts from echarts; export default { mounted() { this.initRoomUsageChart(); this.initRepairTrendChart(); }, methods: { initRoomUsageChart() { const chart echarts.init(this.$refs.roomUsageChart); chart.setOption({ title: { text: 宿舍使用率统计 }, tooltip: {}, series: [{ name: 使用率, type: pie, data: [ { value: 75, name: 已入住 }, { value: 25, name: 空置 } ] }] }); } } } /script7.3 物联网设备对接与智能门锁等硬件对接的注意事项设计设备状态表CREATE TABLE iot_device ( id int NOT NULL AUTO_INCREMENT, room_id int NOT NULL, mac_address varchar(32) NOT NULL, last_heartbeat datetime DEFAULT NULL, status tinyint NOT NULL DEFAULT 1 COMMENT 1在线 0离线, PRIMARY KEY (id), UNIQUE KEY uk_mac (mac_address) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;实现设备通信接口RestController RequestMapping(/api/iot) public class IotController { PostMapping(/heartbeat) public ResponseEntity? heartbeat(RequestBody HeartbeatDTO dto) { deviceService.updateHeartbeat(dto.getMacAddress()); return ResponseEntity.ok().build(); } PostMapping(/unlock) public ResponseEntity? unlockRoom(RequestBody UnlockDTO dto) { boolean success deviceService.unlockRoom( dto.getRoomId(), dto.getUserId()); return success ? ResponseEntity.ok().build() : ResponseEntity.badRequest().build(); } }在实际部署这套宿舍管理系统时我建议采用Docker容器化部署方案可以大幅简化环境配置和后期维护工作。特别是对于高校信息化部门通常有限的IT资源来说容器化能显著降低运维复杂度。