SpringBoot+Vue学生宿舍报修与水电费系统开发实践

1. 项目概述这个基于SpringBoot和Vue的学生宿舍报修与水电费缴费系统是我去年为某高校后勤部门开发的实际项目。系统上线后宿舍报修响应时间从平均3天缩短到6小时内水电费线上缴纳率从42%提升至89%。这种前后端分离的架构设计特别适合处理校园场景中的高频次、低复杂度的日常事务。系统核心解决了两个痛点一是传统纸质报修单易丢失、难追踪的问题二是学生缴纳水电费需要排队充值的不便。通过将报修流程数字化和缴费线上化不仅提高了后勤工作效率也优化了学生的居住体验。2. 技术架构设计2.1 后端技术选型采用SpringBoot 2.7.4作为后端框架主要基于以下考虑自动配置特性简化了SSM框架的整合内嵌Tomcat便于部署Actuator端点方便监控系统健康状态数据库选用MySQL 8.0关键表设计包括CREATE TABLE repair_order ( id bigint NOT NULL COMMENT 报修单ID, dorm_id varchar(20) NOT NULL COMMENT 宿舍编号, student_id varchar(12) NOT NULL COMMENT 学号, fault_type tinyint NOT NULL COMMENT 故障类型(1:水电/2:家具/3:网络), description varchar(200) DEFAULT NULL COMMENT 故障描述, images json DEFAULT NULL COMMENT 图片URL数组, status tinyint DEFAULT 0 COMMENT 状态(0:待处理/1:已分配/2:处理中/3:已完成), create_time datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;2.2 前端技术方案Vue 3 Element Plus的组合提供了良好的开发体验Composition API使逻辑组织更清晰Vue Router处理前端路由Axios封装了RESTful API调用采用Pinia进行状态管理特别优化了图片上传组件// 报修图片上传组件 const handleUpload (file) { const formData new FormData(); formData.append(file, file); return axios.post(/api/upload, formData, { headers: { Content-Type: multipart/form-data } }); };3. 核心功能实现3.1 报修流程设计完整的报修状态机包含以下环节学生提交报修单带图片后勤系统自动分配维修工维修工接单处理学生验收确认系统自动发送满意度调查状态转换使用策略模式实现public interface RepairState { void handle(RepairContext context); } Service RequiredArgsConstructor public class PendingState implements RepairState { private final WorkerService workerService; Override public void handle(RepairContext context) { RepairOrder order context.getOrder(); Worker worker workerService.assignWorker(order); order.setStatus(1); order.setWorkerId(worker.getId()); // 发送微信通知 wechatService.sendTemplateMsg(worker.getOpenId(), 新维修任务, order.getDescription()); } }3.2 水电费计算模块电费采用阶梯计价算法public BigDecimal calculateElectricFee(int degree) { BigDecimal fee BigDecimal.ZERO; if (degree 50) { fee new BigDecimal(degree).multiply(new BigDecimal(0.6)); } else if (degree 200) { fee new BigDecimal(30) .add(new BigDecimal(degree - 50).multiply(new BigDecimal(0.8))); } else { fee new BigDecimal(150) .add(new BigDecimal(degree - 200).multiply(new BigDecimal(1.2))); } return fee.setScale(2, RoundingMode.HALF_UP); }缴费接口对接了微信支付V3 API关键支付逻辑Transactional public PaymentResult createPayment(Long orderId, String openId) { PaymentOrder order paymentOrderRepository.findById(orderId) .orElseThrow(() - new BusinessException(订单不存在)); WxPayUnifiedOrderV3Request request new WxPayUnifiedOrderV3Request(); request.setOutTradeNo(order.getOrderNo()); request.setAmount(new WxPayUnifiedOrderV3Request.Amount() .setTotal(order.getAmount().multiply(BigDecimal.valueOf(100)).intValue())); request.setPayer(new WxPayUnifiedOrderV3Request.Payer().setOpenid(openId)); String prepayId wxPayService.createOrderV3(request); return new PaymentResult(wxPayService.getPayInfo(prepayId)); }4. 系统优化实践4.1 性能优化措施报修列表接口采用分页缓存Cacheable(value repairList, key #page-#size) public PageRepairVO getRepairList(int page, int size) { return repairRepository.findAll(PageRequest.of(page, size)) .map(this::convertToVO); }使用Redis实现分布式锁防止重复支付public boolean tryLock(String key, long expireSeconds) { return redisTemplate.opsForValue() .setIfAbsent(key, 1, expireSeconds, TimeUnit.SECONDS); }4.2 安全防护方案接口防刷策略短信验证码60秒内不能重复获取同一IP每小时最多发起50次报修敏感操作需要二次密码确认SQL注入防护Repository public interface RepairRepository extends JpaRepositoryRepairOrder, Long { // 使用JPQL参数绑定 Query(SELECT r FROM RepairOrder r WHERE r.dormId :dormId) ListRepairOrder findByDorm(Param(dormId) String dormId); }5. 部署与运维5.1 容器化部署使用Docker Compose编排服务version: 3 services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} volumes: - ./mysql/data:/var/lib/mysql backend: build: ./backend ports: - 8080:8080 depends_on: - mysql frontend: build: ./frontend ports: - 80:805.2 监控方案SpringBoot Actuator配置management.endpoints.web.exposure.includehealth,info,metrics management.metrics.tags.application${spring.application.name}使用Prometheus采集指标scrape_configs: - job_name: springboot metrics_path: /actuator/prometheus static_configs: - targets: [backend:8080]6. 踩坑经验分享微信支付回调验签问题微信支付V3版回调使用AEAD_AES_256_GCM算法加密需要特别注意获取回调通知中的时间戳和随机串使用APIv3密钥解密报文验证签名证书序列号是否匹配Vue路由缓存导致的状态异常// 需要强制刷新的路由组件 { path: /repair/:id, component: RepairDetail, meta: { noCache: true } }跨域问题的终极解决方案Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .maxAge(3600); } }这个项目让我深刻体会到校园信息化系统需要特别注重用户体验。比如在报修环节我们增加了拍照上传和进度推送功能在缴费环节接入了多种支付方式。这些细节决定了系统的实际使用率