企业官网建设流程全解析

目录

1. 项目整体概述
   1.1 项目名称
   1.2 项目开发背景
   1.3 项目开发目标与意义
   1.4 项目核心亮点

2. 开发环境与全套技术栈
   2.1 后端技术架构
   2.2 微信小程序前端架构
   2.3 PC 管理端前端架构
   2.4 软硬件运行环境

3. 系统角色与权限划分

4. 系统需求分析
   4.1 功能性需求
   4.2 非功能性需求
   4.3 可行性分析

5. 系统总体设计
   5.1 前后端分离整体架构
   5.2 后端项目目录结构
   5.3 微信小程序端目录结构
   5.4 PC 管理后台目录结构
   5.5 数据库 E-R 模型设计
   5.6 核心数据表结构说明

6. 系统各端核心功能模块详情（配套页面说明）
   6.1 微信小程序端模块
   6.2 PC 管理员后台模块

7. 核心业务流程设计
   7.1 多角色注册登录流程
   7.2 公共设施查询、报修流程
   7.3 在线留言、管理员回复流程
   7.4 后台宿舍、卫生、设施全流程管理流程

8. 系统测试方案
   8.1 测试类型与方法
   8.2 典型功能测试用例
   8.3 测试结果总结

9. 项目部署运行完整步骤

10. 项目总结与后期拓展优化方案

1 项目整体概述

1.1 项目名称

基于小程序的学生宿舍管理系统

1.2 项目开发背景

传统高校宿舍管理模式存在大量线下管理痛点：

1. 学生宿舍公共设施故障报修依靠线下找宿管、电话登记，无线上登记渠道，故障处理进度无法追踪；

2. 宿舍卫生评比、健康上报、缴费信息仅宿管线下存档，学生无法线上实时查看；

3. 师生沟通渠道单一，学生意见、问题无法线上留言反馈，宿管回复效率低；

4. 宿管、管理员、学生信息分散，宿舍、设施、评比数据依靠 Excel 手工记录，统计、检索效率低下；

5. 缺少轻量化移动端入口，学生随时随地查看宿舍相关信息的需求无法满足。

为解决高校宿舍数字化管理需求，搭建微信小程序学生前台 + PC 端管理员后台双端协同宿舍管理系统，区分学生、宿管、系统管理员三类角色，整合设施查询报修、在线留言、疫情公告、宿舍卫生评比、学生 / 宿管账号管理、缴费统计全业务流程，实现宿舍管理线上化、轻量化、规范化。

1.3 项目开发目标与意义

业务实用目标

1. 移动端轻量化入口：学生通过微信小程序无需下载 APP，随时查看公共设施、提交留言、浏览公告；

2. 分层角色权限管控：学生、宿管、系统管理员权限隔离，各司其职；

3. 宿舍全业务数字化：覆盖宿舍档案、卫生评比、公共设施、健康上报、缴费、师生留言六大核心宿舍业务；

4. PC 后台一站式管控：管理员实现学生、宿管、宿舍、设施、留言、公告全数据增删改查、批量操作；

5. 双向沟通闭环：学生在线留言反馈问题，管理员后台查看并线上回复，同步展示至小程序端；

6. 标准化台账导出、分页检索、图片上传，适配高校宿管日常办公台账归档需求。

技术学习目标

实现「微信小程序 + SpringBoot 后端 + Vue PC 管理后台」三端联动架构开发，掌握小程序登录授权、图片上传、列表渲染、分页、跨端数据互通、多角色权限拦截等主流功能，可作为计算机专业毕业设计、高校后勤小型数字化管理落地项目。

1.4 项目核心亮点

1. 双端协同架构：微信小程序面向学生轻量化使用，PC 管理后台面向宿管 / 管理员集中管控，数据实时互通；

2. 三类角色精细化权限：学生、宿管、系统管理员独立注册登录，菜单、操作权限完全隔离；

3. 轻量化微信小程序：无需安装，微信直接打开，公共设施图文浏览、在线留言、公告查看操作极简；

4. 完整宿舍业务闭环：整合设施管理、卫生评比、健康上报、缴费、师生留言、账号管理六大宿舍核心模块；

5. 图文多媒体支持：小程序留言、后台设施、宿舍档案均支持图片上传展示；

6. 完善检索与批量操作：PC 后台支持关键词检索、批量删除、分页、详情 / 修改 / 删除标准化操作。

2 开发环境与全套技术栈

2.1 后端技术架构

1. 核心框架：SpringBoot 2.7.x

2. Web 层：SpringMVC，同时对接小程序端、PC 后台接口请求；

3. 持久层：MyBatis 实现多表关联复杂查询；

4. 分页工具：PageHelper 统一处理三端分页逻辑；

5. 工具依赖：Lombok、文件上传工具、微信小程序登录校验工具、图片压缩工具；

6. 安全认证：Token 无状态登录拦截，区分学生 / 宿管 / 管理员角色访问权限；

7. 数据库：MySQL 8.0，事务保证设施新增、留言回复、宿舍数据修改操作原子性。

2.2 微信小程序前端架构

1. 原生开发框架：WXML + WXSS + JavaScript

2. 网络请求：wx.request 封装统一接口请求；

3. 本地存储：wx.storage 存储登录 Token、用户身份；

4. 媒体组件：图片预览、留言图片上传组件；

5. 底部 Tab 栏路由：首页、公共设施、疫情公告、在线留言、我的 5 大页面切换；

6. 组件复用：搜索框、图文卡片、登录弹窗公共组件。

2.3 PC 管理端前端架构

1. 核心框架：Vue2

2. UI 组件库：Element UI，搭建侧边菜单栏、表格、弹窗、分页、搜索组件；

3. 网络请求：Axios 统一封装接口与错误拦截；

4. 路由管理：Vue Router 页面权限拦截，未登录跳转管理员登录页；

5. 文件上传：图片上传组件，用于设施、宿舍照片上传；

6. 本地存储：LocalStorage 保存管理员登录 Token、账号信息。

2.4 软硬件运行环境

开发工具

• 后端开发：IntelliJ IDEA 2022

• 小程序开发：微信开发者工具

• PC 前端开发：VS Code

• 数据库可视化：Navicat Premium 16

运行环境

1. JDK 1.8

2. Node.js v16

3. MySQL 8.0

4. 小程序运行：微信客户端（安卓 / 苹果）

5. PC 后台兼容浏览器：Chrome、Edge、360 极速浏览器

6. 操作系统：Windows 10/11

3 系统角色与权限划分

系统分为三类独立角色，操作权限完全隔离：

1. 学生（小程序端）

   • 注册学生账号，登录小程序；

   • 浏览公共设施图文、检索设施名称；

   • 查看疫情公告；

   • 发布带图片的在线留言，查看管理员回复；

   • 个人中心修改账号密码、查看本人留言记录；

   • 无后台数据编辑、删除权限。

2. 宿管人员（小程序 + PC 后台）

   • 注册宿管账号，可登录小程序与 PC 后台；

   • 小程序端浏览设施、查看学生留言；

   • PC 后台管理宿舍档案、卫生评比、健康上报、缴费信息；

   • 回复学生留言、登记设施故障；

   • 仅可管理本人负责楼栋学生与宿舍数据。

3. 系统管理员（仅 PC 后台）

   • 管理员账号登录 PC 后台；

   • 全量数据管理：学生管理、宿管管理、宿舍管理、卫生评比、公共设施、缴费、留言、系统配置；

   • 新增 / 编辑 / 删除所有数据，批量操作、关键词检索；

   • 发布疫情公告、修改所有角色账号密码、分配宿管权限。

4 系统需求分析

4.1 功能性需求

小程序端（学生 / 宿管）

1. 登录注册：区分注册学生、注册宿管，账号密码登录、忘记密码重置；

2. 公共设施模块：顶部搜索框按名称检索，图文卡片展示全部设施；

3. 疫情公告模块：浏览系统发布的宿舍防疫通知；

4. 在线留言模块：发布文字 + 图片留言，查看历史留言与管理员回复；

5. 个人中心：修改登录密码、查看个人留言收藏记录。

PC 管理员后台

1. 管理员登录：账号密码登录，角色单选管理员；

2. 个人中心：原密码 / 新密码 / 确认密码修改功能；

3. 学生管理：全量学生账号增删改查、分页检索；

4. 宿管管理：宿管账号新增、编辑、权限分配；

5. 宿舍管理：宿舍档案录入、宿舍照片上传、详情查看；

6. 卫生评比管理：宿舍卫生评分、等级（优秀 / 良好）录入、批量管理；

7. 健康上报管理：学生健康打卡数据汇总查看；

8. 公共设施管理：设施新增、删除、按名称检索，维护投入日期、维修状态、使用情况；

9. 缴费信息管理：学生宿舍缴费记录登记、查询；

10. 在线留言管理：查看学生留言、后台编辑回复内容；

11. 系统管理：基础参数配置、账号状态管理。

4.2 非功能性需求

1. 性能需求：小程序页面加载≤1s，PC 后台接口响应≤1.2s，图片上传限制 2MB 自动压缩；单表 1000 条数据流畅分页；

2. 安全需求：Token 登录拦截，未登录禁止访问所有功能；表单非空、手机号格式校验；不同角色仅能操作权限内数据；小程序接口防越权访问；

3. 易用性需求：小程序底部 Tab 导航一键切换页面；PC 后台统一侧边菜单栏，操作按钮标准化；弹窗提示操作结果；

4. 兼容性需求：小程序兼容主流微信版本；PC 后台适配 1366×768 及以上分辨率电脑浏览器。

4.3 可行性分析

1. 经济可行性：全部开发工具开源免费，微信小程序免费开发调试，本地部署即可投入高校宿舍使用，替代纸质台账，减少宿管线下办公工时；

2. 技术可行性：SpringBoot+Vue + 微信小程序为成熟主流技术，三端数据互通、图片上传、多角色权限、分页检索均为标准 CRUD 功能，无高并发分布式复杂难点；

3. 操作可行性：小程序操作极简，学生仅需微信即可使用；PC 后台布局清晰，宿管、管理员仅需基础电脑操作能力即可上手；

4. 业务可行性：完全贴合高校宿舍后勤管理真实业务，覆盖报修、沟通、卫生、缴费、公告全场景，具备实际落地使用价值。

5 系统总体设计

5.1 前后端分离整体三层架构

1. 前端展示层：分为微信小程序端、PC 管理后台端，分别面向学生、管理员 / 宿管，通过 HTTP 请求调用后端统一接口，不直接操作数据库；

2. 后端服务层（SpringBoot 四层分层）

   • Controller 控制层：同时接收小程序、PC 后台请求，校验用户角色身份，调用业务层，返回统一 JSON 结果；

   • Service 业务层：实现留言回复、设施管理、权限校验、多端数据同步核心逻辑；

   • Mapper 持久层：MyBatis 执行数据库增删改查关联 SQL；

   • Entity 实体层：映射数据库所有数据表字段；
     配套工具包：微信登录工具、文件上传工具、Token 权限工具、分页工具；

3. 数据持久层（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 模型设计

核心实体关联关系：

1. 学生 (student) 1 对多 在线留言 (message)：一名学生可发布多条留言；

2. 宿管 (dorm_manager) 1 对多 宿舍 (dorm)：一名宿管管理多间宿舍；

3. 宿舍 (dorm) 1 对多 卫生评比 (sanitation)：每间宿舍多条卫生评分记录；

4. 管理员 (admin) 1 对多 公告 (notice)、公共设施 (facility)：管理员发布公告、录入设施；

5. 学生 (student) 1 对多 缴费记录 (payment)、健康上报 (health_report)：学生多条缴费、打卡记录。

5.6 核心数据表结构说明

1. student学生表：账号、密码、姓名、宿舍号、手机号、头像、注册时间；

2. dorm_manager宿管表：账号、密码、姓名、负责楼栋、联系方式；

3. admin系统管理员表：账号、密码、权限等级；

4. dorm宿舍表：寝室号、宿舍照片、对应宿管 ID；

5. sanitation卫生评比表：宿舍 ID、各项卫生分数、评比等级、评比日期；

6. facility公共设施表：设施名称、设施图片、投入日期、维修保养情况、使用状态；

7. message在线留言表：学生 ID、留言文字、留言图片、管理员回复内容、发布时间；

8. notice疫情公告表：公告标题、正文、发布管理员 ID、发布时间；

9. health_report健康上报表：学生 ID、打卡体温、打卡时间；

10. payment缴费信息表：学生 ID、缴费金额、缴费周期、缴费状态。

6 系统各端核心功能模块详情

6.1 微信小程序端模块

6.1.1 小程序登录页面

1. 页面标题「登录」，卡通简约青绿色 UI；

2. 表单输入项：账号、密码、用户类型选择下拉框；

3. 底部功能按钮：登录；分流入口「注册学生」「注册宿管」、「忘记密码？」；

4. 校验逻辑：区分学生 / 宿管身份校验账号密码，登录成功存储 Token 跳转首页；身份、账号不匹配弹窗提示。

6.1.2 公共设施页面

1. 顶部搜索栏：输入设施名称点击搜索，模糊匹配筛选；

2. 卡片式布局：2 列图文卡片展示设施，包含设施名称、实拍图片；

3. 底部 Tab 导航：首页、公共设施、疫情公告、在线留言、我的；

4. 交互：点击卡片查看设施完整详情（投入日期、维修状态）。

6.1.3 在线留言页面

1. 留言列表展示：每条留言显示发布用户、文字内容、上传配图、发布时间；

2. 回复区域：展示管理员后台录入的回复内容；

3. 底部 Tab 高亮「在线留言」，可跳转发布新留言表单，支持上传图片。

6.2 PC 管理员后台模块

6.2.1 PC 管理员登录页面

1. 页面标题「宿舍管理小程序登录」，简约办公插画背景；

2. 表单字段：用户名输入框、密码输入框、角色单选框（管理员）；

3. 登录按钮，校验账号密码匹配后跳转后台首页。

6.2.2 后台个人中心 - 修改密码页面

1. 左侧固定侧边菜单栏：首页、个人中心、学生管理、宿管管理、健康上报、卫生评比、公共设施、缴费、管理员、在线留言、系统管理；

2. 修改密码表单：必填原密码、新密码、确认密码，确定按钮提交更新账号密码；

3. 右上角显示登录管理员账号、退出登录按钮。

6.2.3 卫生评比管理页面

1. 表格字段：寝室号、宿舍实拍图、各项卫生分数、评比等级（优秀 / 良好）、评比日期；

2. 单行操作按钮：详情、修改、删除；

3. 分页控件：自定义每页展示条数、上下页切换、总数据条数统计；

4. 支持批量勾选多条宿舍评比记录批量删除。

6.2.4 公共设施管理后台页面

1. 顶部检索区：设施名称输入框 + 查询按钮；新增、批量删除按钮；

2. 表格完整字段：索引、设施名称、设施图片、投入日期、登记日期、维修保养情况、设施使用情况；

3. 单行操作：查看详情、修改设施信息、删除设施；

4. 可上传替换设施实拍图片，更新维修、使用状态。

7 核心业务流程设计

7.1 多角色注册登录流程

1. 学生 / 宿管打开小程序登录页，点击对应注册入口，填写账号、密码、姓名、联系方式完成注册，数据库区分角色标识；

2. 管理员在 PC 后台登录页输入管理员账号密码，选择管理员角色登录；

3. 登录成功后端生成唯一 Token，前端本地存储，访问页面自动携带 Token；

4. 未携带 Token 访问任意功能页面，自动拦截跳转登录页；点击退出登录清空本地 Token。

7.2 公共设施查询、报修流程

1. 学生小程序进入「公共设施」页面，搜索名称浏览全部设施图文；

2. 发现设施损坏，进入在线留言模块发布留言，上传故障图片描述问题；

3. 管理员 PC 后台查看该条留言，登记设施故障，更新公共设施表「维修保养情况」；

4. 维修完成后后台修改设施状态，学生小程序刷新页面可查看最新设施使用情况。

7.3 在线留言、管理员回复流程

1. 学生小程序发布文字 + 配图留言，存入 message 表，状态标记「待回复」；

2. 管理员 PC 后台进入「在线留言」管理页面，查看所有学生留言；

3. 管理员填写回复内容提交，更新留言表回复字段；

4. 学生重新进入小程序留言列表，实时加载后台回复内容，完成师生沟通闭环。

7.4 后台宿舍、卫生、设施全流程管理流程

1. 管理员新增宿舍档案，上传宿舍照片，绑定对应宿管账号；

2. 每月录入宿舍各项卫生分数，系统自动生成评比等级（优秀 / 良好）；

3. 新增校园公共设施，录入投入日期、初始维修状态；

4. 支持按名称检索、批量删除过期 / 废弃宿舍、设施数据；

5. 所有修改操作实时同步数据库，小程序端刷新即可查看最新数据。

8 系统测试方案

8.1 测试类型与方法

采用双端黑盒功能测试，分别模拟学生（小程序）、宿管、系统管理员（PC 后台）三类角色完整操作流程，验证小程序与 PC 后台数据互通、页面交互、权限隔离、数据库存储是否符合需求；
测试覆盖模块：登录注册、公共设施、在线留言、宿舍管理、卫生评比、账号密码修改、批量操作、检索分页。

8.2 典型功能测试用例

用例 1：角色权限隔离测试

用例 2：留言双向同步测试

1. 小程序学生发布带图片留言；

2. PC 后台加载该条留言，管理员填写回复并提交；

3. 小程序重新进入留言页面，成功展示管理员回复文字；测试通过。

用例 3：设施检索功能测试

1. 输入设施关键词，点击搜索；

2. 页面仅展示名称匹配的设施卡片 / 表格数据，分页正常切换；测试通过。

8.3 测试结果总结

小程序端、PC 管理后台所有功能运行稳定，三端角色权限隔离有效，留言、设施数据双向实时同步；图片上传、分页检索、批量删除、密码修改无异常；表单格式校验、登录拦截逻辑无误，完全满足高校宿舍线上管理、师生线上沟通业务需求。

9 项目部署运行完整步骤

9.1 环境准备

1. 安装 JDK1.8、MySQL8.0、Node.js v16，配置系统环境变量；

2. 下载微信开发者工具，用于小程序编译预览；

3. IDEA 导入后端项目，VS Code 分别打开小程序、PC 后台前端文件夹。

9.2 数据库初始化

1. Navicat 新建数据库dorm_mini_manage，字符集 utf8mb4；

2. 执行项目 sql 文件夹内完整建表脚本，生成学生、宿管、管理员、宿舍、设施、留言全部数据表；

3. 预先插入测试管理员账号、测试学生 / 宿管账号用于调试。

9.3 SpringBoot 后端配置启动

1. 修改application.yml配置文件，填写本地 MySQL 账号密码、图片上传存储路径；

2. 配置小程序对接参数、后端服务端口（默认 8080）；

3. Maven 刷新全部依赖，运行DormManageApplication启动后端服务，接口地址http://localhost:8080。

9.4 PC 管理后台启动

1. VS Code 进入 dorm-admin 目录，终端执行npm install安装依赖；

2. 修改 api 全局请求地址指向本地后端；

3. npm run serve启动 PC 后台，浏览器访问后台地址登录管理员账号。

9.5 微信小程序运行调试

1. 微信开发者工具导入 dorm-mini-program 小程序项目；

2. 修改 utils 内请求地址为本地后端接口；

3. 点击「编译」预览小程序，使用测试学生 / 宿管账号登录调试页面功能。

10 项目总结与后期拓展优化方案

本系统采用「微信小程序前台 + SpringBoot 后端 + Vue PC 管理后台」三端联动架构，面向高校学生宿舍后勤管理场景，区分学生、宿管、系统管理员三类角色，实现轻量化移动端设施查询、留言反馈，搭配 PC 后台一站式管控宿舍档案、卫生评比、公共设施、缴费、师生留言、账号全量数据。系统完成多角色权限隔离、图片多媒体上传、跨端数据实时同步、关键词检索、批量台账操作等核心功能，UI 简约轻量化，代码分层低耦合，数据表关联设计规范，既可以作为计算机专业毕业设计项目，也可直接落地高校宿舍数字化后勤管理使用。

11 项目资料

👇🏻 精彩专栏推荐订阅👇🏻 在下方专栏👇🏻不然下次找不到哟
《Java精品推荐项目》
《springboot+vue项目100套》
《ssm项目100套》
《微信小程序合集》