SpringBoot与微信小程序构建校园设备报修系统

1. 项目概述

学校设备报修系统是校园信息化建设中的重要一环。传统的纸质报修流程存在效率低下、进度不透明、统计困难等问题。基于SpringBoot和微信小程序的报修系统，能够实现以下核心价值：

• 师生可随时随地进行设备报修
• 维修人员能实时接收工单通知
• 管理人员可监控维修进度和统计分析
• 实现报修流程的数字化和可视化

这个毕业设计项目采用前后端分离架构：

• 前端：微信小程序（使用uni-app框架开发）
• 后端：SpringBoot 2.7 + MySQL 8.0
• 接口：RESTful API设计

2. 技术选型解析

2.1 后端技术栈

选择SpringBoot作为后端框架主要基于以下考虑：

1. 快速开发：自动配置、起步依赖简化了SSM框架的整合
2. 生态丰富：Spring生态有完善的解决方案
3. 易于部署：内嵌Tomcat，打包即运行
4. 适合教学：社区资源丰富，便于学生理解

关键依赖：

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.2.2</version> </dependency>

2.2 前端技术方案

采用uni-app开发微信小程序的优势：

1. 跨平台：一套代码可编译到多个平台
2. 开发效率：基于Vue语法，学习成本低
3. 组件丰富：uni-ui提供大量现成组件
4. 调试方便：HBuilderX提供完善工具链

小程序页面结构示例：

pages/ index/ // 首页 repair/ // 报修页 my/ // 个人中心 components/ // 公共组件

3. 数据库设计

3.1 核心表结构

1. 用户表(user)

CREATE TABLE `user` ( `id` int NOT NULL AUTO_INCREMENT, `openid` varchar(50) DEFAULT NULL COMMENT '微信openid', `username` varchar(20) DEFAULT NULL, `role` tinyint DEFAULT '0' COMMENT '0-学生 1-维修员 2-管理员', `phone` varchar(11) DEFAULT NULL, PRIMARY KEY (`id`), UNIQUE KEY `idx_openid` (`openid`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2. 报修单表(repair_order)

CREATE TABLE `repair_order` ( `id` int NOT NULL AUTO_INCREMENT, `user_id` int DEFAULT NULL, `device_type` varchar(20) DEFAULT NULL COMMENT '设备类型', `location` varchar(50) DEFAULT NULL COMMENT '故障地点', `description` text COMMENT '故障描述', `images` varchar(255) DEFAULT NULL COMMENT '图片URL，多个用逗号分隔', `status` tinyint DEFAULT '0' COMMENT '0-待处理 1-已接单 2-已完成 3-已评价', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 索引优化

为提高查询效率，需要建立以下索引：

1. 报修单状态索引：ALTER TABLE repair_order ADD INDEX idx_status (status);
2. 用户报修记录索引：ALTER TABLE repair_order ADD INDEX idx_user (user_id);

4. 核心功能实现

4.1 微信登录流程

1. 前端获取code

uni.login({ provider: 'weixin', success: function (res) { console.log(res.code); } });

2. 后端处理登录

@PostMapping("/login") public Result login(String code) { // 1. 使用code获取openid String openid = wechatService.getOpenid(code); // 2. 查询或创建用户 User user = userService.findOrCreate(openid); // 3. 生成JWT token String token = JwtUtil.generate(user.getId()); return Result.success(token); }

4.2 报工单提交

前端表单关键代码：

<template> <view> <uni-forms :model="form"> <uni-forms-item label="设备类型" name="deviceType"> <uni-data-select v-model="form.deviceType" :localdata="deviceTypes"/> </uni-forms-item> <uni-forms-item label="故障描述" name="description"> <textarea v-model="form.description"/> </uni-forms-item> <uni-file-picker limit="3" @success="uploadSuccess"/> </uni-forms> </view> </template>

后端接口实现：

@PostMapping("/repair") public Result submitRepair(@RequestBody RepairDTO dto, @RequestHeader("Authorization") String token) { // 1. 验证token Integer userId = JwtUtil.verify(token); // 2. 构建工单实体 RepairOrder order = new RepairOrder(); order.setUserId(userId); order.setDeviceType(dto.getDeviceType()); order.setDescription(dto.getDescription()); order.setImages(String.join(",", dto.getImages())); // 3. 保存到数据库 repairService.save(order); // 4. 通知维修人员 notifyService.sendNewOrderNotice(order.getId()); return Result.success(); }

5. 系统特色功能

5.1 维修进度推送

采用微信订阅消息实现状态变更通知：

1. 配置消息模板
2. 用户提交报修时订阅消息
3. 状态变更时触发推送

后端推送实现：

public void sendStatusChangeNotice(Integer orderId) { RepairOrder order = repairService.getById(orderId); String openid = userService.getOpenid(order.getUserId()); WxMpTemplateMessage message = WxMpTemplateMessage.builder() .toUser(openid) .templateId("TEMPLATE_ID") .data(Arrays.asList( new WxMpTemplateData("thing1", order.getDeviceType()), new WxMpTemplateData("phrase2", getStatusText(order.getStatus())), new WxMpTemplateData("date3", new SimpleDateFormat("yyyy-MM-dd HH:mm").format(new Date())) )) .build(); wxMpService.getTemplateMsgService().sendTemplateMsg(message); }

5.2 数据统计看板

管理员后台使用ECharts实现数据可视化：

1. 按设备类型统计故障分布
2. 按时间维度统计报修量
3. 维修员接单响应时间分析

关键SQL：

-- 按周统计报修量 SELECT DATE_FORMAT(create_time,'%Y-%u') AS week, COUNT(*) AS count FROM repair_order GROUP BY week ORDER BY week;

6. 部署方案

6.1 后端部署

推荐使用Docker部署SpringBoot应用：

FROM openjdk:11-jre COPY target/repair-system.jar /app.jar EXPOSE 8080 ENTRYPOINT ["java","-jar","/app.jar"]

启动命令：

docker build -t repair-system . docker run -d -p 8080:8080 --name repair repair-system

6.2 小程序发布流程

1. 开发环境配置

{ "miniprogramRoot": "./unpackage/dist/dev/mp-weixin", "appid": "你的小程序APPID", "setting": { "urlCheck": false } }

2. 生产环境构建

npm run build:mp-weixin

3. 通过微信开发者工具上传代码

7. 常见问题解决

7.1 微信登录失败

可能原因及解决方案：

1. AppID配置错误

   • 检查application.yml中的wechat配置
   • 确保小程序后台配置的服务器域名正确

2. code失效

   • 确保前端获取code后立即调用后端接口
   • code有效期5分钟，不可重复使用

7.2 图片上传问题

典型错误处理：

1. 大小限制

   • 小程序端限制单张图片不超过2M
   • 可使用uni.compressImage压缩图片

2. 格式问题

   • 只允许jpg/png格式
   • 前端需做格式校验

uni.chooseImage({ count: 3, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: (res) => { // 处理选中的图片 } });

8. 项目扩展方向

1. 智能分配：根据维修员位置和技能自动分配工单
2. 知识库：建立常见故障解决方案库
3. 评价系统：增加维修服务评价机制
4. 数据大屏：可视化展示全校设备运行状况

实现自动分配的逻辑示例：

public void autoAssignOrder(Integer orderId) { RepairOrder order = getById(orderId); // 1. 获取附近维修员 List<Repairman> repairmen = repairmanService.findNearby( order.getLocation(), 1000); // 1公里范围内 // 2. 筛选有相关技能的维修员 repairmen = repairmen.stream() .filter(r -> r.getSkills().contains(order.getDeviceType())) .sorted(Comparator.comparing(Repairman::getCurrentOrders)) .collect(Collectors.toList()); // 3. 分配工单 if(!repairmen.isEmpty()) { assignOrder(orderId, repairmen.get(0).getId()); } }