这次我们来看一个校园宿舍报修小程序项目。这是一个典型的毕业设计选题也是一个非常实用的校园信息化应用。项目基于 SpringBoot 3、Vue 3 和微信小程序技术栈旨在解决学生宿舍报修流程繁琐、信息不透明、维修进度难追踪的痛点。对于计算机相关专业的同学来说这是一个能完整覆盖前后端、移动端开发并具备实际业务场景的优秀练手项目。本文将带你从零开始拆解这个系统的核心功能、技术选型、部署流程和关键代码实现。无论你是想寻找一个高质量的毕业设计课题还是希望学习如何将 SpringBoot、Vue 和微信小程序三者结合开发一个完整应用这篇文章都能提供清晰的路径。我们会重点关注项目如何跑起来、前后端如何对接、微信小程序如何配置以及开发中可能遇到的典型问题。1. 核心能力速览能力项说明项目类型校园宿舍报修管理系统毕设/实战项目技术栈后端SpringBoot 3.x MyBatis-Plus MySQL前端Vue 3.x Element Plus (管理后台)移动端微信小程序 (原生或Uni-app)核心功能学生端扫码/手动报修、上传图片、进度查询、评价反馈维修工端接单、处理中、完成上报管理后台报修单管理、人员分配、数据统计、系统设置部署方式后端可 Jar 包部署或 Docker 部署前端管理台需构建后部署至 Nginx 等静态服务器微信小程序需上传至微信公众平台审核发布。接口风格RESTful API通常使用 JSON 进行数据交互。适合场景计算机专业毕业设计、校园信息化项目实战、全栈开发技术学习。硬件门槛开发阶段普通 PC 即可生产环境需要云服务器建议 1核2G 起步、域名需备案、SSL 证书微信小程序要求 HTTPS。2. 适用场景与使用边界这个项目主要适用于以下几类人群和场景高校计算机专业毕业生作为一个综合性、业务逻辑清晰的毕业设计课题能够充分展示你在数据库设计、后端开发、前端界面和移动端应用方面的能力。全栈开发学习者希望通过一个完整项目串联起 SpringBoot、Vue、微信小程序这三项主流技术理解前后端分离架构和 API 对接的实战细节。校园信息化建设者对于小型院校或部门可以基于此项目进行二次开发快速搭建一个可用的宿舍报修平台提升后勤管理效率。使用边界与注意事项非商用级产品作为毕设或学习项目其在安全性、高并发、异常处理等方面可能不及成熟商业系统直接用于大规模生产环境需进行深度加固。微信生态依赖小程序端严重依赖微信公众平台需要企业或组织资质注册小程序并完成认证、配置服务器域名等流程。数据隐私系统会处理学生宿舍号、联系方式、报修图片等敏感信息在实际部署时必须考虑数据加密存储、访问权限控制等隐私保护措施并遵守相关法律法规。版权与原创如果是用于毕设请确保理解每一行代码并能进行答辩阐述。参考开源项目时请注意相关开源协议。3. 环境准备与前置条件在开始编码或部署之前请确保你的开发环境满足以下要求后端开发环境JDK: 版本 17 或以上SpringBoot 3.x 要求。Maven: 版本 3.6用于项目依赖管理和构建。IDE: IntelliJ IDEA推荐或 Eclipse。数据库: MySQL 5.7 或 8.0并准备好一个空的数据库如dorm_repair。缓存可选: Redis用于存储验证码、会话等信息。前端管理后台开发环境Node.js: 版本 16 或 18并安装 npm 或 yarn 包管理工具。IDE: Visual Studio Code推荐或 WebStorm。微信小程序开发环境微信开发者工具: 从微信公众平台官网下载安装。小程序账号: 拥有一个已认证的微信小程序账号个人类型也可但部分接口权限受限。生产部署环境服务器: 一台云服务器如阿里云、腾讯云ECSLinux 系统如 CentOS 7/8, Ubuntu 20.04。Web服务器: Nginx用于反向代理后端服务和托管前端静态资源。域名与SSL: 已备案的域名并配置好 SSL 证书小程序要求后端接口为 HTTPS。4. 项目结构与初始化部署一个典型的 SpringBoot3 Vue3 微信小程序项目会采用前后端完全分离的架构。项目结构概览dorm-repair-system/ ├── dorm-repair-backend/ # SpringBoot 后端项目 │ ├── src/main/java/com/... # Java 源代码 │ ├── src/main/resources/ # 配置文件 │ └── pom.xml # Maven 依赖 ├── dorm-repair-admin/ # Vue3 管理后台前端项目 │ ├── public/ │ ├── src/ # Vue 组件和逻辑 │ └── package.json └── dorm-repair-miniprogram/ # 微信小程序项目 ├── pages/ # 小程序页面 ├── utils/ # 工具类如 request 封装 └── app.json # 小程序配置文件后端项目初始化与启动导入项目使用 IDEA 打开后端项目的pom.xml文件等待 Maven 自动下载依赖。配置数据库修改src/main/resources/application.yml或application.properties文件中的数据库连接信息。spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/dorm_repair?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: your_username password: your_password初始化数据库运行项目 SQL 脚本通常位于resources/sql目录下创建表结构和初始数据。启动后端服务找到主启动类如DormRepairApplication.java运行其main方法。默认情况下SpringBoot 应用会在http://localhost:8080启动。验证接口使用浏览器或 Postman 访问http://localhost:8080/api/hello或类似的内置测试接口查看是否返回成功信息。前端管理后台初始化与启动安装依赖在dorm-repair-admin目录下打开终端运行npm install或yarn install。配置API地址修改项目中的环境配置文件如.env.development或src/config/api.js将后端 API 地址指向本地运行的 SpringBoot 服务例如VITE_API_BASE_URLhttp://localhost:8080/api。启动开发服务器运行npm run dev或yarn dev。通常 Vue 项目会在http://localhost:5173或http://localhost:3000启动。访问后台在浏览器中打开开发服务器地址应能看到登录界面。微信小程序项目配置导入项目打开微信开发者工具选择“导入项目”定位到dorm-repair-miniprogram目录。配置AppID在项目设置中填入你自己小程序的 AppID从微信公众平台获取。配置服务器域名在微信公众平台后台进入“开发”-“开发管理”-“开发设置”在“服务器域名”中配置request合法域名填写你后端服务的 HTTPS 地址如https://api.yourdomain.com。本地开发时可勾选开发者工具中的“不校验合法域名”选项但真机调试前必须配置。修改接口基址在小程序项目的utils/request.js或类似封装的网络请求文件中将baseURL修改为你的后端接口地址开发阶段可以是本地代理地址如http://localhost:8080/api上线前必须改为 HTTPS 域名。5. 核心功能模块开发与测试5.1 学生端微信小程序功能1. 用户登录与身份绑定功能学生通过微信授权登录并绑定自己的学号、宿舍楼、房间号等信息。实现调用wx.login()获取code发送至后端。后端用code向微信服务器换取openid和session_key。openid作为用户唯一标识与学号等信息绑定后存入数据库。测试在微信开发者工具中点击登录按钮查看是否能成功获取用户信息并跳转到首页。2. 故障报修功能学生选择故障类型如水、电、网络、家具填写问题描述并上传现场图片。实现前端表单收集数据调用wx.chooseImage()选择图片再通过wx.uploadFile()将图片和表单数据一并上传至后端。后端接收后生成一条状态为“待分配”的报修单。测试填写完整的报修信息选择图片上传提交后在小程序“我的报修”列表和后台管理中应能看到这条新记录。3. 报修进度查询功能学生可以查看自己提交的所有报修单并实时跟踪其状态待分配、已分配、处理中、已完成、已评价。实现小程序端调用“获取我的报修单列表”接口后端根据当前用户的openid查询对应的报修单返回。测试提交一条报修后刷新“我的报修”列表确认新单显示且状态正确。4. 维修评价功能维修完成后学生可以对维修服务进行星级评价和文字评价。实现当报修单状态变为“已完成”后前端开放评价入口。提交评价后调用后端接口更新报修单的评价内容和状态。测试在后台将某条报修单状态改为“已完成”然后在小程序端找到该订单进行评价提交查看后台数据是否更新。5.2 维修工端功能通常集成在小程序或管理后台1. 任务接收与确认功能维修工登录后查看分配给自己的待处理报修单并可点击“接单”确认。实现后端提供一个接口根据维修工ID筛选状态为“已分配”的报修单。接单操作将状态更新为“处理中”。测试在管理后台将一条报修单分配给某个维修工然后使用该维修工账号登录小程序或后台查看是否收到该任务并能成功接单。2. 处理过程上报功能维修工在处理过程中可以更新处理进度、追加备注或上传处理中的图片。实现提供更新报修单详情的接口允许修改“处理说明”、“现场图片处理后”等字段。测试维修工接单后尝试更新处理说明并上传图片查看报修单详情是否同步更新。3. 完成上报功能维修完成后维修工点击“完成”将报修单状态置为“已完成”并可选填维修结果。实现调用状态更新接口将状态改为“已完成”并触发通知如微信模板消息告知学生可进行评价。测试维修工完成操作后检查报修单状态是否变为“已完成”同时学生端是否收到可评价的提示。5.3 管理后台功能Vue3 Element Plus1. 报修单综合管理功能管理员可以查看所有报修单进行筛选、搜索、分配维修工、修改状态、删除等操作。实现使用 Element Plus 的Table、Form、Dialog组件通过 API 与后端进行 CRUD 交互。测试在后台页面进行分配维修工、强制修改状态等操作观察数据列表是否即时刷新并验证小程序端数据是否同步。2. 数据统计与仪表盘功能以图表形式展示报修量趋势、故障类型分布、维修工工作量、好评率等。实现后端提供统计查询接口前端使用 ECharts 或 AntV 等图表库进行渲染。测试生成一些测试报修数据后查看仪表盘图表是否能正确显示统计数据。3. 系统管理功能管理维修工信息、学生宿舍楼信息、故障类型字典、系统公告等。实现标准的后台 CRUD 功能模块。测试尝试添加一个新的维修工或故障类型然后在小程序报修或分配任务时确认新选项可用。6. 关键接口设计与API调用示例前后端通过 RESTful API 交互。以下是一些核心接口的示例1. 微信小程序登录接口 (后端)// Controller 示例 RestController RequestMapping(/api/auth) public class AuthController { Autowired private AuthService authService; PostMapping(/wxLogin) public Result wxLogin(RequestBody WxLoginDTO wxLoginDTO) { // wxLoginDTO 包含 code 和用户输入的学号等信息 String token authService.wxLogin(wxLoginDTO); return Result.success(token); } }// 小程序端调用示例 (utils/request.js 已封装) import request from ‘./utils/request‘; export function wxLogin(code, studentId) { return request.post(‘/auth/wxLogin‘, { code: code, studentId: studentId // ... 其他信息 }); } // 在页面中调用 wx.login({ success: (res) { if (res.code) { wxLogin(res.code, this.data.studentId).then(res { // 登录成功存储 token wx.setStorageSync(‘token‘, res.data); }); } } });2. 提交报修单接口PostMapping(/repair/create) public Result createRepair(RequestBody RepairCreateDTO dto, RequestHeader(Authorization) String token) { // 从 token 解析用户ID Long userId JwtUtil.parseToken(token); dto.setUserId(userId); repairService.create(dto); return Result.success(报修提交成功); }3. 分页查询报修单接口GetMapping(/repair/list) public ResultPageRepairVO listRepair(RepairQueryDTO queryDTO, RequestHeader(Authorization) String token) { // 根据用户角色学生、维修工、管理员构建不同的查询条件 PageRepairVO page repairService.pageQuery(queryDTO); return Result.success(page); }// 前端调用Vue3 Element Plus import { getRepairList } from ‘/api/repair‘; const queryParams reactive({ pageNum: 1, pageSize: 10, status: null, repairType: null }); const loadData async () { loading.value true; const res await getRepairList(queryParams); tableData.value res.data.list; total.value res.data.total; loading.value false; };7. 部署上线与性能考量后端服务部署打包在项目根目录执行mvn clean package -DskipTests生成target/*.jar文件。上传将 jar 包上传至云服务器。运行在服务器上使用nohup或 systemd 服务方式启动。# 简单启动 nohup java -jar dorm-repair-backend-1.0.0.jar --spring.profiles.activeprod app.log 21 # 使用 systemd (推荐) # 创建服务文件 /etc/systemd/system/dorm-repair.service # 内容示例 # [Unit] # DescriptionDorm Repair Backend Service # Afternetwork.target # # [Service] # Typesimple # Userroot # ExecStart/usr/bin/java -jar /path/to/your/dorm-repair-backend-1.0.0.jar # Restarton-failure # # [Install] # WantedBymulti-user.target # 然后执行 # sudo systemctl daemon-reload # sudo systemctl start dorm-repair # sudo systemctl enable dorm-repair前端管理后台部署构建在项目目录下运行npm run build生成dist文件夹。上传将dist文件夹内的所有文件上传到 Nginx 配置的静态资源目录下。配置Nginxserver { listen 80; server_name admin.yourdomain.com; # 管理后台域名 location / { root /path/to/your/dist; index index.html; try_files $uri $uri/ /index.html; # 支持 Vue Router 的 history 模式 } # 反向代理后端 API解决跨域 location /api/ { proxy_pass http://localhost:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }微信小程序上线在微信开发者工具中点击“上传”将代码提交到微信公众平台。登录微信公众平台在“版本管理”中提交审核。审核通过后即可发布上线。性能与安全建议数据库为频繁查询的字段如status,user_id,create_time建立索引。图片存储报修图片建议使用对象存储服务如阿里云OSS、腾讯云COS避免占用服务器磁盘和带宽。后端只需存储文件URL。API限流对登录、短信验证码等接口进行限流防止恶意攻击。SQL防注入坚持使用 MyBatis-Plus 等框架的参数化查询避免手动拼接 SQL。XSS防护对用户提交的文本内容进行转义或过滤。8. 常见问题与排查方法问题现象可能原因排查方式解决方案微信开发者工具报“不在以下 request 合法域名列表中”服务器域名未配置或配置错误。1. 检查微信公众平台后台的服务器域名配置。2. 检查小程序项目request封装的baseURL。1. 在公众平台配置合法域名需 HTTPS。2. 开发阶段可临时在开发者工具详情中勾选“不校验合法域名”。后端服务启动失败端口被占用8080 端口已被其他程序使用。运行netstat -tlnp | grep 8080(Linux) 或netstat -ano | findstr 8080(Windows) 查看占用进程。1. 终止占用端口的进程。2. 修改application.yml中的server.port为其他端口。前端管理后台访问后端 API 404 或跨域CORS错误1. 后端服务未运行。2. 前端请求的 URL 错误。3. 后端未配置 CORS。1. 检查后端服务日志是否正常启动。2. 浏览器开发者工具 Network 面板查看请求 URL 和响应头。1. 确保后端服务已启动。2. 检查前端环境变量配置的 API 地址。3. 在后端添加全局 CORS 配置。小程序登录成功但无法获取或提交数据1. 请求头未携带 Token。2. Token 过期或无效。3. 接口权限校验失败。1. 检查小程序request拦截器是否自动添加了Authorization头。2. 查看后端接口日志确认 Token 解析情况。1. 确保登录后正确存储和发送 Token。2. 实现 Token 自动刷新机制。3. 检查后端接口的权限注解如PreAuthorize配置是否正确。上传图片失败或大小受限1. 小程序端未处理图片压缩。2. 后端未配置文件上传大小限制。3. Nginx 代理限制了上传大小。1. 查看小程序端上传代码和错误信息。2. 查看后端应用日志和 Nginx 错误日志。1. 小程序端使用wx.compressImage压缩图片。2. 后端 SpringBoot 配置spring.servlet.multipart.max-file-size。3. Nginx 配置client_max_body_size。管理后台页面空白或 JS/CSS 加载失败1. 前端资源路径错误。2. Nginx 配置未指向正确的root目录。3. Vue Router 使用了 history 模式但 Nginx 未配置。查看浏览器控制台 (Console) 和网络 (Network) 标签页的错误信息。1. 检查dist文件是否完整上传。2. 核对 Nginx 配置中的root路径。3. 在 Nginx 配置中添加try_files $uri $uri/ /index.html;。9. 项目扩展与优化建议完成基础功能后可以考虑以下方向进行深化这也能让你的毕设或项目更具亮点引入消息推送集成微信模板消息或订阅消息当报修单状态变更如被接单、已完成时主动通知学生和维修工提升体验。实现扫码快速报修在宿舍楼道或公共区域张贴包含宿舍楼和房间号信息的二维码。学生扫码后小程序自动填充位置信息只需选择故障类型和描述即可提交极大简化流程。增加智能分配算法在管理后台不是手动分配而是根据维修工的专业技能、当前位置如果接入定位、当前工作量等因素由系统自动推荐或分配最合适的维修工。开发数据大屏为后勤管理部门提供一个可视化数据大屏实时滚动显示今日报修量、完成率、各楼宇报修热力图等用于决策支持。接入语音识别允许学生通过语音描述故障后端通过语音识别 API 转成文字方便不擅长打字的用户。微服务化改造进阶如果学有余力可以将单体 SpringBoot 应用拆分为用户服务、报修服务、消息服务、文件服务等微服务使用 Spring Cloud Alibaba 等框架并引入网关、注册中心、配置中心体验更复杂的架构。这个校园宿舍报修小程序项目从技术栈的选择到业务场景的贴合度都非常适合作为毕业设计或全栈实战。关键在于动手把环境搭起来把第一个接口调通然后按照“用户登录 - 提交报修 - 管理分配 - 处理反馈”的主流程逐个模块实现和测试。遇到问题多查日志、善用搜索引擎和社区这个过程本身就是最宝贵的学习经验。建议收藏本文在开发部署的不同阶段回来对照检查。