基于Vue+SpringBoot的社区疫情管理系统开发实践

1. 项目背景与核心需求

新冠疫情给社区管理带来了前所未有的挑战，特别是在春节、国庆等返乡高峰期，传统纸质登记和人工排查的方式效率低下且容易出错。我去年参与开发的这套社区疫情返乡管控系统，正是为了解决以下几个痛点：

1. 信息滞后问题：手工登记需要层层上报，往往要2-3天才能汇总到社区
2. 数据孤岛现象：健康监测、隔离管理、行程追踪等数据分散在不同Excel表中
3. 监管盲区：无法实时掌握高风险人员的动态位置和健康状态变化

系统采用前后端分离架构，前端用Vue+Element UI实现响应式界面，后端基于SpringBoot提供RESTful API，数据库选用MySQL 8.0。这种技术组合在毕业设计项目中特别实用——既保证了系统性能，又降低了学习曲线。

提示：选择MySQL 8.0而非5.7版本，主要是看中了其JSON字段支持和更好的窗口函数性能，这对处理复杂的疫情数据分析非常有用。

2. 系统架构设计

2.1 技术栈选型分析

前端采用Vue 3 + Element Plus的组合，相比React有更平滑的学习曲线，Element Plus提供的表单验证、表格分页等组件能节省40%以上的开发时间。实测在管理后台类项目中，这套组合的开发效率比原生HTML/CSS高出3倍。

后端SpringBoot 2.7.x版本稳定性和社区支持都很好，配合以下关键依赖：

xml复制<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-api</artifactId>
    <version>0.11.5</version>
</dependency>

数据库设计时特别注意了以下几点：

1. 所有时间字段统一使用TIMESTAMP WITH TIME ZONE
2. 建立复合索引(return_date, origin_city)加速查询
3. 使用触发器自动更新关联表状态

2.2 核心功能模块

系统主要包含5个核心模块：

1. 返乡登记模块：支持OCR身份证识别自动填充表单
2. 健康打卡模块：包含异常症状自动预警功能
3. 隔离管理模块：集成高德地图API实现电子围栏
4. 数据看板模块：使用ECharts实现可视化分析
5. 权限控制模块：基于RBAC模型实现多级管控

每个模块都采用独立的Service层实现，通过Spring的事件机制解耦。比如当健康打卡提交异常体温时，会发布HealthAlertEvent事件，隔离管理模块监听后自动触发应急预案。

3. 关键实现细节

3.1 JWT认证实现

安全认证采用JWT方案，但做了两点重要改进：

1. 双Token机制：access_token 30分钟过期，refresh_token 7天有效
2. 指纹校验：在payload中加入用户浏览器指纹，防止token盗用

核心认证流程：

java复制public String generateToken(UserDetails userDetails) {
    Map<String, Object> claims = new HashMap<>();
    claims.put("fingerprint", DigestUtils.md5Hex(userDetails.getUsername() + request.getHeader("User-Agent")));
    return Jwts.builder()
        .setClaims(claims)
        .setSubject(userDetails.getUsername())
        .setIssuedAt(new Date(System.currentTimeMillis()))
        .setExpiration(new Date(System.currentTimeMillis() + 30 * 60 * 1000))
        .signWith(SignatureAlgorithm.HS512, secretKey)
        .compact();
}

3.2 高性能查询优化

返乡人员列表查询实现了三级缓存策略：

1. 热点数据用Caffeine内存缓存（最近3天返乡记录）
2. 全量数据用Redis缓存（TTL 1小时）
3. 复杂查询走MySQL+Elasticsearch

对于分页查询，采用"游标分页"替代传统LIMIT方案：

sql复制SELECT * FROM returnee_info 
WHERE return_date > '2023-01-01' 
AND id < #{lastId} 
ORDER BY id DESC 
LIMIT 20

4. 部署实践与踩坑记录

4.1 生产环境部署

推荐使用Docker Compose部署，docker-compose.yml关键配置：

yaml复制services:
  app:
    image: openjdk:17-jdk-alpine
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
    depends_on:
      - redis
      - mysql

  mysql:
    image: mysql:8.0
    environment:
      - MYSQL_ROOT_PASSWORD=yourpassword
      - MYSQL_DATABASE=community_covid
    volumes:
      - mysql_data:/var/lib/mysql

常见部署问题：

1. MySQL 8.0默认认证方式导致连接失败：需要添加allowPublicKeyRetrieval=true参数
2. Vue路由history模式404：需配置Nginx重定向规则
3. 时区不一致问题：所有容器必须统一设置TZ=Asia/Shanghai

4.2 性能调优经验

通过JMeter压测发现三个性能瓶颈及解决方案：

1. 健康打卡并发提交：改用Redis队列异步处理，吞吐量提升8倍
2. 大数据量导出：采用分片查询+多线程写入Excel，耗时从120s降至15s
3. 实时统计计算：预聚合+定时刷新策略，降低数据库压力

5. 扩展功能建议

对于想进一步提升项目的同学，可以考虑：

1. 接入微信小程序：使用uni-app跨端方案
2. 增加智能预警：基于历史数据训练简单ML模型
3. 实现无接触登记：集成蓝牙测温设备API
4. 区块链存证：关键操作上链确保数据不可篡改

我在开发过程中最大的体会是：疫情管理系统最关键的不仅是技术实现，更需要考虑极端场景下的可用性。比如系统特意设计了离线模式，在网络中断时仍能通过本地存储维持基本功能，待网络恢复后自动同步数据。