目录项目整体概述1.1 项目名称1.2 项目开发背景1.3 项目开发目标与意义1.4 项目核心亮点开发环境与全套技术栈2.1 后端技术架构2.2 微信小程序前端架构2.3 PC 管理端前端架构2.4 软硬件运行环境系统角色与权限划分系统需求分析4.1 功能性需求4.2 非功能性需求4.3 可行性分析系统总体设计5.1 前后端分离整体架构5.2 后端项目目录结构5.3 微信小程序端目录结构5.4 PC 管理后台目录结构5.5 数据库 E-R 模型设计5.6 核心数据表结构说明系统各端核心功能模块详情配套页面说明6.1 微信小程序端模块6.2 PC 管理员后台模块核心业务流程设计7.1 多角色注册登录流程7.2 公共设施查询、报修流程7.3 在线留言、管理员回复流程7.4 后台宿舍、卫生、设施全流程管理流程系统测试方案8.1 测试类型与方法8.2 典型功能测试用例8.3 测试结果总结项目部署运行完整步骤项目总结与后期拓展优化方案1 项目整体概述1.1 项目名称基于小程序的学生宿舍管理系统1.2 项目开发背景传统高校宿舍管理模式存在大量线下管理痛点学生宿舍公共设施故障报修依靠线下找宿管、电话登记无线上登记渠道故障处理进度无法追踪宿舍卫生评比、健康上报、缴费信息仅宿管线下存档学生无法线上实时查看师生沟通渠道单一学生意见、问题无法线上留言反馈宿管回复效率低宿管、管理员、学生信息分散宿舍、设施、评比数据依靠 Excel 手工记录统计、检索效率低下缺少轻量化移动端入口学生随时随地查看宿舍相关信息的需求无法满足。为解决高校宿舍数字化管理需求搭建微信小程序学生前台 PC 端管理员后台双端协同宿舍管理系统区分学生、宿管、系统管理员三类角色整合设施查询报修、在线留言、疫情公告、宿舍卫生评比、学生 / 宿管账号管理、缴费统计全业务流程实现宿舍管理线上化、轻量化、规范化。1.3 项目开发目标与意义业务实用目标移动端轻量化入口学生通过微信小程序无需下载 APP随时查看公共设施、提交留言、浏览公告分层角色权限管控学生、宿管、系统管理员权限隔离各司其职宿舍全业务数字化覆盖宿舍档案、卫生评比、公共设施、健康上报、缴费、师生留言六大核心宿舍业务PC 后台一站式管控管理员实现学生、宿管、宿舍、设施、留言、公告全数据增删改查、批量操作双向沟通闭环学生在线留言反馈问题管理员后台查看并线上回复同步展示至小程序端标准化台账导出、分页检索、图片上传适配高校宿管日常办公台账归档需求。技术学习目标实现「微信小程序 SpringBoot 后端 Vue PC 管理后台」三端联动架构开发掌握小程序登录授权、图片上传、列表渲染、分页、跨端数据互通、多角色权限拦截等主流功能可作为计算机专业毕业设计、高校后勤小型数字化管理落地项目。1.4 项目核心亮点双端协同架构微信小程序面向学生轻量化使用PC 管理后台面向宿管 / 管理员集中管控数据实时互通三类角色精细化权限学生、宿管、系统管理员独立注册登录菜单、操作权限完全隔离轻量化微信小程序无需安装微信直接打开公共设施图文浏览、在线留言、公告查看操作极简完整宿舍业务闭环整合设施管理、卫生评比、健康上报、缴费、师生留言、账号管理六大宿舍核心模块图文多媒体支持小程序留言、后台设施、宿舍档案均支持图片上传展示完善检索与批量操作PC 后台支持关键词检索、批量删除、分页、详情 / 修改 / 删除标准化操作。2 开发环境与全套技术栈2.1 后端技术架构核心框架SpringBoot 2.7.xWeb 层SpringMVC同时对接小程序端、PC 后台接口请求持久层MyBatis 实现多表关联复杂查询分页工具PageHelper 统一处理三端分页逻辑工具依赖Lombok、文件上传工具、微信小程序登录校验工具、图片压缩工具安全认证Token 无状态登录拦截区分学生 / 宿管 / 管理员角色访问权限数据库MySQL 8.0事务保证设施新增、留言回复、宿舍数据修改操作原子性。2.2 微信小程序前端架构原生开发框架WXML WXSS JavaScript网络请求wx.request 封装统一接口请求本地存储wx.storage 存储登录 Token、用户身份媒体组件图片预览、留言图片上传组件底部 Tab 栏路由首页、公共设施、疫情公告、在线留言、我的 5 大页面切换组件复用搜索框、图文卡片、登录弹窗公共组件。2.3 PC 管理端前端架构核心框架Vue2UI 组件库Element UI搭建侧边菜单栏、表格、弹窗、分页、搜索组件网络请求Axios 统一封装接口与错误拦截路由管理Vue Router 页面权限拦截未登录跳转管理员登录页文件上传图片上传组件用于设施、宿舍照片上传本地存储LocalStorage 保存管理员登录 Token、账号信息。2.4 软硬件运行环境开发工具后端开发IntelliJ IDEA 2022小程序开发微信开发者工具PC 前端开发VS Code数据库可视化Navicat Premium 16运行环境JDK 1.8Node.js v16MySQL 8.0小程序运行微信客户端安卓 / 苹果PC 后台兼容浏览器Chrome、Edge、360 极速浏览器操作系统Windows 10/113 系统角色与权限划分系统分为三类独立角色操作权限完全隔离学生小程序端注册学生账号登录小程序浏览公共设施图文、检索设施名称查看疫情公告发布带图片的在线留言查看管理员回复个人中心修改账号密码、查看本人留言记录无后台数据编辑、删除权限。宿管人员小程序 PC 后台注册宿管账号可登录小程序与 PC 后台小程序端浏览设施、查看学生留言PC 后台管理宿舍档案、卫生评比、健康上报、缴费信息回复学生留言、登记设施故障仅可管理本人负责楼栋学生与宿舍数据。系统管理员仅 PC 后台管理员账号登录 PC 后台全量数据管理学生管理、宿管管理、宿舍管理、卫生评比、公共设施、缴费、留言、系统配置新增 / 编辑 / 删除所有数据批量操作、关键词检索发布疫情公告、修改所有角色账号密码、分配宿管权限。4 系统需求分析4.1 功能性需求小程序端学生 / 宿管登录注册区分注册学生、注册宿管账号密码登录、忘记密码重置公共设施模块顶部搜索框按名称检索图文卡片展示全部设施疫情公告模块浏览系统发布的宿舍防疫通知在线留言模块发布文字 图片留言查看历史留言与管理员回复个人中心修改登录密码、查看个人留言收藏记录。PC 管理员后台管理员登录账号密码登录角色单选管理员个人中心原密码 / 新密码 / 确认密码修改功能学生管理全量学生账号增删改查、分页检索宿管管理宿管账号新增、编辑、权限分配宿舍管理宿舍档案录入、宿舍照片上传、详情查看卫生评比管理宿舍卫生评分、等级优秀 / 良好录入、批量管理健康上报管理学生健康打卡数据汇总查看公共设施管理设施新增、删除、按名称检索维护投入日期、维修状态、使用情况缴费信息管理学生宿舍缴费记录登记、查询在线留言管理查看学生留言、后台编辑回复内容系统管理基础参数配置、账号状态管理。4.2 非功能性需求性能需求小程序页面加载≤1sPC 后台接口响应≤1.2s图片上传限制 2MB 自动压缩单表 1000 条数据流畅分页安全需求Token 登录拦截未登录禁止访问所有功能表单非空、手机号格式校验不同角色仅能操作权限内数据小程序接口防越权访问易用性需求小程序底部 Tab 导航一键切换页面PC 后台统一侧边菜单栏操作按钮标准化弹窗提示操作结果兼容性需求小程序兼容主流微信版本PC 后台适配 1366×768 及以上分辨率电脑浏览器。4.3 可行性分析经济可行性全部开发工具开源免费微信小程序免费开发调试本地部署即可投入高校宿舍使用替代纸质台账减少宿管线下办公工时技术可行性SpringBootVue 微信小程序为成熟主流技术三端数据互通、图片上传、多角色权限、分页检索均为标准 CRUD 功能无高并发分布式复杂难点操作可行性小程序操作极简学生仅需微信即可使用PC 后台布局清晰宿管、管理员仅需基础电脑操作能力即可上手业务可行性完全贴合高校宿舍后勤管理真实业务覆盖报修、沟通、卫生、缴费、公告全场景具备实际落地使用价值。5 系统总体设计5.1 前后端分离整体三层架构前端展示层分为微信小程序端、PC 管理后台端分别面向学生、管理员 / 宿管通过 HTTP 请求调用后端统一接口不直接操作数据库后端服务层SpringBoot 四层分层Controller 控制层同时接收小程序、PC 后台请求校验用户角色身份调用业务层返回统一 JSON 结果Service 业务层实现留言回复、设施管理、权限校验、多端数据同步核心逻辑Mapper 持久层MyBatis 执行数据库增删改查关联 SQLEntity 实体层映射数据库所有数据表字段配套工具包微信登录工具、文件上传工具、Token 权限工具、分页工具数据持久层MySQL存储学生、宿管、管理员、宿舍、卫生评比、公共设施、留言、缴费、公告数据使用事务保证多端同步数据一致性。5.2 后端项目分层目录结构dorm-manage-server ├── src/main/java/com/dorm │ ├── controller │ │ MiniProgramController.java 小程序端所有接口 │ │ AdminController.java PC管理员后台接口 │ │ UserController.java 学生/宿管账号接口 │ │ DormController.java 宿舍、卫生评比接口 │ │ FacilityController.java 公共设施接口 │ │ MessageController.java 在线留言接口 │ ├── entity │ │ Student.java、DormManager.java、Admin.java、Dorm.java、HealthReport.java、Sanitation.java、Facility.java、Message.java、Notice.java │ ├── mapper MyBatis数据库映射接口 │ ├── service │ │ impl 业务逻辑实现类 │ ├── config │ │ CorsConfig.java 跨域配置兼容小程序PC │ │ TokenInterceptor.java 三端角色登录拦截器 │ ├── util 公共工具类微信登录、文件上传 │ └── DormManageApplication.java 项目启动主类 ├── src/main/resources │ ├── application.yml 数据库、文件上传、小程序配置 │ ├── mybatis/mapper XML映射SQL文件 │ └── static/upload 小程序/后台图片统一存储目录 └── pom.xml Maven依赖管理5.3 微信小程序端目录结构dorm-mini-program ├── pages 所有页面 │ ├── login 登录注册页面 │ ├── index 首页 │ ├── facility 公共设施页面 │ ├── notice 疫情公告页面 │ ├── message 在线留言列表、发布留言页面 │ ├── mine 个人中心页面 ├── components 公共复用组件搜索框、图文卡片、图片上传 ├── utils 封装wx.request请求、Token工具 ├── app.json 全局配置、底部Tab栏路由 ├── app.js 小程序入口文件5.4 PC 管理后台目录结构dorm-admin ├── src │ ├── api 后端接口统一封装 │ │ mini.js、dorm.js、facility.js、message.js、user.js │ ├── views PC后台所有页面 │ │ login/ 管理员登录页 │ │ index/ 后台首页、修改密码页 │ │ student/ 学生管理页面 │ │ dorm/ 宿舍、卫生评比页面 │ │ facility/ 公共设施管理页面 │ │ message/ 在线留言回复页面 │ ├── router 路由配置、管理员权限拦截 │ ├── store LocalStorage存储管理员Token │ ├── components 公共分页、弹窗、上传组件 │ └── main.js 项目入口文件 ├── package.json NPM依赖配置5.5 数据库总体 E-R 模型设计核心实体关联关系学生 (student) 1 对多 在线留言 (message)一名学生可发布多条留言宿管 (dorm_manager) 1 对多 宿舍 (dorm)一名宿管管理多间宿舍宿舍 (dorm) 1 对多 卫生评比 (sanitation)每间宿舍多条卫生评分记录管理员 (admin) 1 对多 公告 (notice)、公共设施 (facility)管理员发布公告、录入设施学生 (student) 1 对多 缴费记录 (payment)、健康上报 (health_report)学生多条缴费、打卡记录。5.6 核心数据表结构说明student学生表账号、密码、姓名、宿舍号、手机号、头像、注册时间dorm_manager宿管表账号、密码、姓名、负责楼栋、联系方式admin系统管理员表账号、密码、权限等级dorm宿舍表寝室号、宿舍照片、对应宿管 IDsanitation卫生评比表宿舍 ID、各项卫生分数、评比等级、评比日期facility公共设施表设施名称、设施图片、投入日期、维修保养情况、使用状态message在线留言表学生 ID、留言文字、留言图片、管理员回复内容、发布时间notice疫情公告表公告标题、正文、发布管理员 ID、发布时间health_report健康上报表学生 ID、打卡体温、打卡时间payment缴费信息表学生 ID、缴费金额、缴费周期、缴费状态。6 系统各端核心功能模块详情6.1 微信小程序端模块6.1.1 小程序登录页面页面标题「登录」卡通简约青绿色 UI表单输入项账号、密码、用户类型选择下拉框底部功能按钮登录分流入口「注册学生」「注册宿管」、「忘记密码」校验逻辑区分学生 / 宿管身份校验账号密码登录成功存储 Token 跳转首页身份、账号不匹配弹窗提示。6.1.2 公共设施页面顶部搜索栏输入设施名称点击搜索模糊匹配筛选卡片式布局2 列图文卡片展示设施包含设施名称、实拍图片底部 Tab 导航首页、公共设施、疫情公告、在线留言、我的交互点击卡片查看设施完整详情投入日期、维修状态。6.1.3 在线留言页面留言列表展示每条留言显示发布用户、文字内容、上传配图、发布时间回复区域展示管理员后台录入的回复内容底部 Tab 高亮「在线留言」可跳转发布新留言表单支持上传图片。6.2 PC 管理员后台模块6.2.1 PC 管理员登录页面页面标题「宿舍管理小程序登录」简约办公插画背景表单字段用户名输入框、密码输入框、角色单选框管理员登录按钮校验账号密码匹配后跳转后台首页。6.2.2 后台个人中心 - 修改密码页面左侧固定侧边菜单栏首页、个人中心、学生管理、宿管管理、健康上报、卫生评比、公共设施、缴费、管理员、在线留言、系统管理修改密码表单必填原密码、新密码、确认密码确定按钮提交更新账号密码右上角显示登录管理员账号、退出登录按钮。6.2.3 卫生评比管理页面表格字段寝室号、宿舍实拍图、各项卫生分数、评比等级优秀 / 良好、评比日期单行操作按钮详情、修改、删除分页控件自定义每页展示条数、上下页切换、总数据条数统计支持批量勾选多条宿舍评比记录批量删除。6.2.4 公共设施管理后台页面顶部检索区设施名称输入框 查询按钮新增、批量删除按钮表格完整字段索引、设施名称、设施图片、投入日期、登记日期、维修保养情况、设施使用情况单行操作查看详情、修改设施信息、删除设施可上传替换设施实拍图片更新维修、使用状态。7 核心业务流程设计7.1 多角色注册登录流程学生 / 宿管打开小程序登录页点击对应注册入口填写账号、密码、姓名、联系方式完成注册数据库区分角色标识管理员在 PC 后台登录页输入管理员账号密码选择管理员角色登录登录成功后端生成唯一 Token前端本地存储访问页面自动携带 Token未携带 Token 访问任意功能页面自动拦截跳转登录页点击退出登录清空本地 Token。7.2 公共设施查询、报修流程学生小程序进入「公共设施」页面搜索名称浏览全部设施图文发现设施损坏进入在线留言模块发布留言上传故障图片描述问题管理员 PC 后台查看该条留言登记设施故障更新公共设施表「维修保养情况」维修完成后后台修改设施状态学生小程序刷新页面可查看最新设施使用情况。7.3 在线留言、管理员回复流程学生小程序发布文字 配图留言存入 message 表状态标记「待回复」管理员 PC 后台进入「在线留言」管理页面查看所有学生留言管理员填写回复内容提交更新留言表回复字段学生重新进入小程序留言列表实时加载后台回复内容完成师生沟通闭环。7.4 后台宿舍、卫生、设施全流程管理流程管理员新增宿舍档案上传宿舍照片绑定对应宿管账号每月录入宿舍各项卫生分数系统自动生成评比等级优秀 / 良好新增校园公共设施录入投入日期、初始维修状态支持按名称检索、批量删除过期 / 废弃宿舍、设施数据所有修改操作实时同步数据库小程序端刷新即可查看最新数据。8 系统测试方案8.1 测试类型与方法采用双端黑盒功能测试分别模拟学生小程序、宿管、系统管理员PC 后台三类角色完整操作流程验证小程序与 PC 后台数据互通、页面交互、权限隔离、数据库存储是否符合需求测试覆盖模块登录注册、公共设施、在线留言、宿舍管理、卫生评比、账号密码修改、批量操作、检索分页。8.2 典型功能测试用例用例 1角色权限隔离测试测试操作预期结果测试结论学生账号登录 PC 后台拦截跳转 PC 登录页禁止访问后台数据通过学生小程序尝试删除留言无删除按钮仅可查看本人留言通过宿管后台无法删除其他楼栋宿舍数据仅展示本人负责宿舍无跨楼栋删除权限通过用例 2留言双向同步测试小程序学生发布带图片留言PC 后台加载该条留言管理员填写回复并提交小程序重新进入留言页面成功展示管理员回复文字测试通过。用例 3设施检索功能测试输入设施关键词点击搜索页面仅展示名称匹配的设施卡片 / 表格数据分页正常切换测试通过。8.3 测试结果总结小程序端、PC 管理后台所有功能运行稳定三端角色权限隔离有效留言、设施数据双向实时同步图片上传、分页检索、批量删除、密码修改无异常表单格式校验、登录拦截逻辑无误完全满足高校宿舍线上管理、师生线上沟通业务需求。9 项目部署运行完整步骤9.1 环境准备安装 JDK1.8、MySQL8.0、Node.js v16配置系统环境变量下载微信开发者工具用于小程序编译预览IDEA 导入后端项目VS Code 分别打开小程序、PC 后台前端文件夹。9.2 数据库初始化Navicat 新建数据库dorm_mini_manage字符集 utf8mb4执行项目 sql 文件夹内完整建表脚本生成学生、宿管、管理员、宿舍、设施、留言全部数据表预先插入测试管理员账号、测试学生 / 宿管账号用于调试。9.3 SpringBoot 后端配置启动修改application.yml配置文件填写本地 MySQL 账号密码、图片上传存储路径配置小程序对接参数、后端服务端口默认 8080Maven 刷新全部依赖运行DormManageApplication启动后端服务接口地址http://localhost:8080。9.4 PC 管理后台启动VS Code 进入 dorm-admin 目录终端执行npm install安装依赖修改 api 全局请求地址指向本地后端npm run serve启动 PC 后台浏览器访问后台地址登录管理员账号。9.5 微信小程序运行调试微信开发者工具导入 dorm-mini-program 小程序项目修改 utils 内请求地址为本地后端接口点击「编译」预览小程序使用测试学生 / 宿管账号登录调试页面功能。10 项目总结与后期拓展优化方案本系统采用「微信小程序前台 SpringBoot 后端 Vue PC 管理后台」三端联动架构面向高校学生宿舍后勤管理场景区分学生、宿管、系统管理员三类角色实现轻量化移动端设施查询、留言反馈搭配 PC 后台一站式管控宿舍档案、卫生评比、公共设施、缴费、师生留言、账号全量数据。系统完成多角色权限隔离、图片多媒体上传、跨端数据实时同步、关键词检索、批量台账操作等核心功能UI 简约轻量化代码分层低耦合数据表关联设计规范既可以作为计算机专业毕业设计项目也可直接落地高校宿舍数字化后勤管理使用。11 项目资料 精彩专栏推荐订阅 在下方专栏不然下次找不到哟《Java精品推荐项目》《springbootvue项目100套》《ssm项目100套》《微信小程序合集》