★ FEATURED ARTICLE 温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片1. 项目背景与意义随着高校信息化建设的不断深入传统宿舍管理模式在报修、查寝、通知传达、水电查询等环节存在效率低、信息滞后、沟通成本高等问题。本项目基于 SpringBoot3 与 Vue3 技术栈设计并实现一款校园智能宿舍小程序旨在为在校学生、宿管人员和辅导员提供统一的宿舍管理服务平台提升宿舍管理效率与学生居住体验。小程序端面向学生提供宿舍报修、卫生检查、通知公告、水电查询、意见反馈等功能管理端面向宿管与辅导员提供楼栋管理、房间分配、报修处理、查寝记录、数据统计等能力。前后端分离架构结合小程序轻量入口能够较好地满足校园场景下的高频、移动化使用需求。2. 技术选型与架构设计2.1 技术栈概览层次技术选型说明后端框架SpringBoot 3.x基于 JDK17提供 RESTful API 与统一异常处理持久层MyBatis-Plus简化 CRUD 操作内置分页插件数据库MySQL 8.x存储用户、宿舍、报修、查寝等业务数据前端框架Vue3 Vite管理后台采用组合式 API 与 Element Plus小程序端uni-app一套代码编译到微信小程序兼顾多端复用接口文档Knife4j基于 OpenAPI3 自动生成在线调试文档2.2 系统架构分层系统整体采用前后端分离架构小程序端与管理后台通过 HTTP 请求访问后端统一接口。后端按 Controller、Service、Mapper 三层组织配合统一返回结果封装、全局异常拦截与 JWT 身份认证保证接口的规范性与安全性。flowchart TD A[小程序端 uni-app] -- B[Nginx 反向代理] C[管理后台 Vue3] -- B B -- D[SpringBoot3 后端服务] D -- E[MySQL 数据库] D -- F[Redis 缓存] D -- G[文件存储服务]3. 数据库设计3.1 核心实体关系系统核心实体包括用户、宿舍楼、宿舍房间、报修单、查寝记录、通知公告与意见反馈。学生与宿舍房间为多对一关系报修单与宿舍房间为多对一关系查寝记录与宿舍房间为多对一关系。3.2 主要数据表结构表名字段示例说明sys_userid, username, password, role, student_no用户表区分学生、宿管、辅导员角色dorm_buildingid, name, address, manager_id宿舍楼信息表dorm_roomid, building_id, room_no, bed_count, status宿舍房间表repair_orderid, room_id, user_id, type, description, status报修工单表check_recordid, room_id, checker_id, result, remark, check_time查寝记录表notice_infoid, title, content, publisher_id, publish_time通知公告表4. 后端核心模块实现4.1 统一返回结果封装为保证前后端数据交互格式一致定义统一返回结果类包含状态码、提示信息与业务数据三个字段。业务异常通过全局异常处理器统一捕获并转换为标准响应格式。Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(操作成功); result.setData(data); return result; } public static T ResultT error(String message) { ResultT result new Result(); result.setCode(500); result.setMessage(message); return result; } }4.2 报修工单模块报修模块是系统的核心业务之一。学生提交报修单后系统根据宿舍楼自动分配对应宿管人员宿管可查看待处理工单并更新处理状态。关键接口包括提交报修、分页查询、状态更新与进度跟踪。Service public class RepairOrderServiceImpl implements RepairOrderService { Resource private RepairOrderMapper repairOrderMapper; Override public PageResultRepairOrderVO pageQuery(RepairQueryDTO dto) { PageRepairOrder page new Page(dto.getPageNum(), dto.getPageSize()); LambdaQueryWrapperRepairOrder wrapper new LambdaQueryWrapper(); wrapper.eq(StringUtils.hasText(dto.getStatus()), RepairOrder::getStatus, dto.getStatus()) .eq(dto.getBuildingId() ! null, RepairOrder::getBuildingId, dto.getBuildingId()) .orderByDesc(RepairOrder::getCreateTime); PageRepairOrder result repairOrderMapper.selectPage(page, wrapper); return PageResult.of(result); } }4.3 JWT 身份认证系统采用 JWT 实现无状态身份认证。用户登录成功后后端签发包含用户 ID 与角色信息的 Token小程序端在后续请求头中携带 Token后端通过拦截器统一校验并解析用户身份。Component public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { String token request.getHeader(Authorization); if (!StringUtils.hasText(token) || !JwtUtils.validateToken(token)) { throw new BusinessException(401, 登录状态已失效请重新登录); } Long userId JwtUtils.getUserId(token); UserContext.set(userId); return true; } }5. 小程序端功能设计5.1 页面结构小程序端采用 uni-app 开发底部导航包含首页、报修、消息、我的四个 Tab。首页展示通知公告与快捷入口报修页支持提交工单与进度查询消息页展示系统通知与处理结果我的页面包含个人信息、我的报修、意见反馈等功能。5.2 报修提交流程学生进入报修页面后选择报修类型、填写问题描述并上传现场图片提交后生成报修单。小程序端通过 uni.request 调用后端接口携带 Token 完成身份校验提交成功后跳转到报修进度页。async function submitRepair(formData) { const token uni.getStorageSync(token); const res await uni.request({ url: /api/repair/submit, method: POST, header: { Authorization: token }, data: formData }); if (res.data.code 200) { uni.showToast({ title: 提交成功, icon: success }); uni.navigateTo({ url: /pages/repair/progress }); } else { uni.showToast({ title: res.data.message, icon: none }); } }6. 管理后台功能设计6.1 功能模块划分管理后台基于 Vue3 Element Plus 构建主要模块包括楼栋管理、房间管理、报修处理、查寝管理、通知发布与数据统计。宿管人员可对报修工单进行派单与完结操作辅导员可查看所辖楼栋的查寝汇总数据。6.2 报修处理界面报修处理页面以表格形式展示工单列表支持按状态、楼栋、时间筛选。点击处理按钮弹出对话框填写处理意见并更新工单状态同时系统自动向学生推送处理结果通知。template el-table :datarepairList v-loadingloading el-table-column proproomNo label房间号 width120 / el-table-column proptype label报修类型 width120 / el-table-column propdescription label问题描述 / el-table-column propstatus label状态 width100 template #default{ row } el-tag :typestatusMap[row.status].type{{ statusMap[row.status].text }}/el-tag /template /el-table-column el-table-column label操作 width140 template #default{ row } el-button typeprimary link clickhandleProcess(row)处理/el-button /template /el-table-column /el-table /template7. 系统测试与部署7.1 测试方案系统测试覆盖接口层与页面功能层。后端使用 JUnit 与 MockMvc 编写核心接口测试用例前端通过手工测试验证关键业务流程。重点验证报修提交、状态流转、权限控制与数据统计等核心场景。7.2 部署方案后端服务打包为可执行 Jar 包部署在 Linux 服务器上通过 Nginx 反向代理统一入口。小程序端通过微信开发者工具上传审核后发布管理后台构建为静态资源部署至 Nginx前后端通过配置的 API 地址进行通信。8. 总结与展望本项目基于 SpringBoot3 与 Vue3 完成了校园智能宿舍小程序的设计与实现覆盖报修、查寝、通知、水电查询等核心业务场景形成了小程序端、管理后台与后端服务三位一体的完整解决方案。后续可在智能门禁对接、水电表自动采集、宿舍评分算法与消息推送优化等方向持续迭代进一步提升宿舍管理的智能化水平。
阅读完成 · 觉得有帮助？
