SpringBoot+Vue社区疫情返乡管控系统开发实战-代码聚汇网

SpringBoot+Vue社区疫情返乡管控系统开发实战

肥猫姜黄

1. 项目背景与核心价值

这个基于SpringBoot+Vue的社区疫情返乡管控系统，是当前疫情防控常态化背景下极具实用价值的毕业设计选题。随着人员流动频繁化，社区层级的管理系统需要兼顾高效性、准确性和易用性。传统手工登记方式存在信息滞后、统计困难等问题，而本系统通过前后端分离架构实现了：

实时数据采集（返乡人员自主填报+管理员录入）
多维度数据分析（地域分布、时间趋势、异常预警）
全流程电子化处理（从申报到解除观察的闭环管理）

我在2022年参与某开发区防疫系统升级时，就遇到过纸质台账转电子化的痛点。这个毕设项目虽然规模较小，但完整包含了企业级应用的典型特征，特别适合Java Web学习者练手。

2. 技术栈选型解析

2.1 后端技术组合

SpringBoot 2.7.x + MyBatis Plus的组合是经过验证的黄金搭档：

java复制// 典型Controller结构示例
@RestController
@RequestMapping("/api/health")
public class HealthController {
    @Autowired
    private HealthReportService reportService;
    
    @PostMapping("/submit")
    public Result submitReport(@Valid @RequestBody HealthReportDTO dto) {
        return reportService.processReport(dto);
    }
}

选择理由：

SpringBoot的自动配置特性大幅减少XML配置
MyBatis Plus的ActiveRecord模式简化数据库操作
内嵌Tomcat方便部署（对比传统SSH架构）

2.2 前端技术方案

Vue 3 + Element Plus的组合提供：

响应式数据绑定（特别适合表单密集场景）
丰富的UI组件（如日期选择器、级联选择等）
基于Axios的HTTP拦截器（统一处理401/500等状态码）

javascript复制// 典型API调用示例
export function submitTravelInfo(data) {
  return request({
    url: '/api/travel/submit',
    method: 'post',
    data
  })
}

3. 核心功能实现细节

3.1 返乡申报模块

关键数据库表设计：

sql复制CREATE TABLE `travel_record` (
  `id` BIGINT NOT NULL AUTO_INCREMENT,
  `user_id` BIGINT NOT NULL COMMENT '关联用户ID',
  `departure_city` VARCHAR(50) NOT NULL COMMENT '出发地',
  `arrival_time` DATETIME NOT NULL COMMENT '抵达时间',
  `transport_type` TINYINT NOT NULL COMMENT '交通工具类型',
  `health_code` VARCHAR(20) NOT NULL COMMENT '健康码状态',
  `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  INDEX `idx_user` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3.2 健康监测看板

使用ECharts实现的三层数据可视化：

实时统计：当前在管人数/今日新增
趋势分析：近14天返乡人数曲线
热力图：高风险地区来源分布

java复制// 数据聚合查询示例
public List<Map<String, Object>> getRiskAreaStats() {
    QueryWrapper<TravelRecord> wrapper = new QueryWrapper<>();
    wrapper.select("departure_city as city, count(*) as count")
           .groupBy("departure_city")
           .orderByDesc("count")
           .last("limit 10");
    return travelRecordMapper.selectMaps(wrapper);
}

4. 开发环境搭建指南

4.1 后端配置要点

多环境配置分离：

yaml复制# application-dev.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/epidemic?useSSL=false
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver

跨域处理配置类：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .maxAge(3600);
    }
}

4.2 前端启动注意事项

代理配置解决跨域（vue.config.js）：

javascript复制devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

路由守卫实现权限控制：

javascript复制router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (to.meta.requiresAuth && !hasToken) {
    next('/login')
  } else {
    next()
  }
})

5. 典型问题排查实录

5.1 日期时间处理问题

现象：前端提交的日期时间在后端接收时相差8小时
解决方案：

前端moment.js统一格式化
后端添加全局时区配置：

yaml复制spring:
  jackson:
    time-zone: GMT+8
    date-format: yyyy-MM-dd HH:mm:ss

5.2 大文件导出OOM

当导出Excel超过万行时可能出现内存溢出：

使用EasyExcel替代POI
分页查询+分批写入

java复制// 分页导出示例
public void exportExcel(HttpServletResponse response) {
    int pageSize = 1000;
    int pageNo = 1;
    do {
        Page<TravelRecord> page = new Page<>(pageNo, pageSize);
        List<TravelRecord> records = mapper.selectPage(page).getRecords();
        writeBatchToExcel(records); 
    } while (pageNo++ * pageSize < totalCount);
}

6. 项目扩展建议

短信通知集成：使用阿里云短信API实现：

java复制public void sendSms(String phone, String templateCode, Map<String, String> params) {
    DefaultProfile profile = DefaultProfile.getProfile(
        "cn-hangzhou", accessKeyId, accessKeySecret);
    IAcsClient client = new DefaultAcsClient(profile);
    
    CommonRequest request = new CommonRequest();
    request.setSysDomain("dysmsapi.aliyuncs.com");
    request.setSysVersion("2017-05-25");
    request.setSysAction("SendSms");
    // 设置其他参数...
    client.getCommonResponse(request);
}

健康码OCR识别：集成百度AI接口实现图片识别：

java复制public String recognizeHealthCode(MultipartFile file) {
    AipOcr client = new AipOcr(APP_ID, API_KEY, SECRET_KEY);
    JSONObject res = client.basicGeneral(file.getBytes(), new HashMap<>());
    return res.getJSONArray("words_result")
              .getJSONObject(0)
              .getString("words");
}

微服务化改造方向：

将申报服务、审批服务、统计服务拆分为独立模块
使用Spring Cloud Alibaba实现服务注册发现
通过Nacos实现配置中心化管理

7. 毕设答辩技巧

演示数据准备技巧：

sql复制-- 快速生成测试数据
INSERT INTO travel_record
(user_id, departure_city, arrival_time, transport_type, health_code)
SELECT 
  FLOOR(RAND()*100)+1, 
  CASE FLOOR(RAND()*5) 
    WHEN 0 THEN '北京' WHEN 1 THEN '上海' 
    WHEN 2 THEN '广州' WHEN 3 THEN '深圳' ELSE '成都' END,
  DATE_ADD(NOW(), INTERVAL -FLOOR(RAND()*30) DAY),
  FLOOR(RAND()*4)+1,
  CASE WHEN RAND()>0.3 THEN '绿码' ELSE '黄码' END
FROM (
  SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION 
  SELECT 4 UNION SELECT 5 UNION SELECT 6
) a JOIN (
  SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION 
  SELECT 4 UNION SELECT 5 UNION SELECT 6
) b LIMIT 100;

系统亮点提炼方向：

对比传统方案响应速度提升（实测数据）
移动端适配方案（通过Chrome调试工具演示）
导出性能优化前后对比（JMeter压测报告）

常见问题应对：
Q：如何保证数据真实性？
A：演示身份证OCR识别+人工复核双机制