SpringBoot2+Vue3全栈开发疫情防控系统实战-代码聚汇网

SpringBoot2+Vue3全栈开发疫情防控系统实战

Pinxian Li

1. 项目概述

这个基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0的疫情防控管理系统，是我去年为某大型社区开发的实际项目。系统采用前后端分离架构，后端使用Java技术栈，前端采用Vue3组合式API开发，数据库选用MySQL8.0的最新特性。整套系统从需求分析到上线部署共耗时3个月，目前稳定服务着超过5万人的社区群体。

提示：本系统适合有一定Java Web开发基础的开发者学习参考，特别是想了解企业级全栈开发流程的初中级程序员。

2. 技术架构解析

2.1 后端技术选型

SpringBoot2.7.3作为基础框架，相比传统SSM架构有三大优势：

自动配置省去了大量XML配置
内嵌Tomcat简化部署流程
Starter依赖管理让组件集成更便捷

MyBatis-Plus 3.5.2作为ORM框架，其亮点功能包括：

Lambda表达式查询构建器
自动分页插件
逻辑删除注解支持
强大的代码生成器

java复制// 典型的分页查询示例
Page<User> page = new Page<>(1, 10);
LambdaQueryWrapper<User> wrapper = Wrappers.lambdaQuery();
wrapper.eq(User::getStatus, 1);
userMapper.selectPage(page, wrapper);

2.2 前端技术栈

Vue3组合式API带来更好的代码组织方式：

javascript复制// 疫情数据看板组件
const { ref, onMounted } = Vue
export default {
  setup() {
    const chartData = ref(null)
    
    const fetchData = async () => {
      const res = await axios.get('/api/epidemic/stats')
      chartData.value = processData(res.data)
    }
    
    onMounted(fetchData)
    
    return { chartData }
  }
}

Element Plus作为UI组件库，其表格组件特别适合展示疫情数据：

html复制<el-table :data="caseList" border>
  <el-table-column prop="name" label="姓名" width="120" />
  <el-table-column prop="testResult" label="检测结果" />
  <el-table-column prop="isolationStatus" label="隔离状态" />
</el-table>

2.3 数据库设计

MySQL8.0的主要优化点：

使用窗口函数简化统计查询
JSON字段类型存储动态表单数据
公用表表达式(CTE)提高复杂查询可读性

核心表结构示例：

sql复制CREATE TABLE `epidemic_case` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL COMMENT '关联用户ID',
  `report_time` datetime NOT NULL COMMENT '上报时间',
  `symptoms` json DEFAULT NULL COMMENT '症状JSON',
  `test_result` tinyint DEFAULT '0' COMMENT '检测结果',
  `isolation_status` tinyint DEFAULT '0' COMMENT '隔离状态',
  PRIMARY KEY (`id`),
  KEY `idx_user` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

3. 核心功能实现

3.1 疫情数据可视化

采用ECharts实现动态疫情看板，关键实现步骤：

后端提供聚合接口：

java复制@GetMapping("/stats")
public Result<Map<String, Object>> getEpidemicStats(
    @RequestParam(required = false) String regionCode) {
    
    Map<String, Object> stats = new HashMap<>();
    stats.put("todayCases", caseService.getTodayCount(regionCode));
    stats.put("isolationCount", isolationService.getCurrentCount(regionCode));
    stats.put("trendData", caseService.get7DayTrend(regionCode));
    
    return Result.success(stats);
}

前端动态渲染图表：

javascript复制const initChart = () => {
  const chart = echarts.init(domRef.value)
  const option = {
    tooltip: { trigger: 'axis' },
    xAxis: { data: trendData.dateList },
    yAxis: { type: 'value' },
    series: [{
      data: trendData.caseList,
      type: 'line'
    }]
  }
  chart.setOption(option)
}

3.2 人员流动管理

基于RBAC模型的权限控制实现：

java复制@PreAuthorize("hasAuthority('mobility:approve')")
@PostMapping("/approve")
public Result approveMobility(@Valid @RequestBody ApproveDTO dto) {
    return mobilityService.approve(dto);
}

移动端扫码登记功能要点：

使用ZXing生成唯一登记二维码
每个点位有独立加密编码
扫码后自动记录时间地点
数据加密传输保障隐私

3.3 物资调度系统

库存预警模块实现逻辑：

java复制// 定时检查库存
@Scheduled(cron = "0 0 8,20 * * ?")
public void checkInventory() {
    List<Material> materials = materialMapper.selectList(null);
    materials.stream()
        .filter(m -> m.getStock() < m.getThreshold())
        .forEach(this::sendAlert);
}

分布式事务处理方案：

采用Seata处理跨服务物资调拨
本地消息表保证最终一致性
设计补偿机制处理异常情况

4. 系统部署实践

4.1 后端部署要点

生产环境推荐配置：

yaml复制server:
  port: 8080
  tomcat:
    max-threads: 200
    min-spare-threads: 20
    
spring:
  datasource:
    url: jdbc:mysql://cluster-mysql:3306/epidemic?useSSL=false
    hikari:
      maximum-pool-size: 30
      connection-timeout: 30000

4.2 前端优化策略

打包配置优化：

javascript复制// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          echarts: ['echarts'],
          element: ['element-plus']
        }
      }
    }
  }
})

4.3 数据库性能调优

关键优化措施：

配置InnoDB缓冲池大小

sql复制SET GLOBAL innodb_buffer_pool_size = 2G;

添加适当的复合索引
使用Explain分析慢查询
配置主从复制分担读压力

5. 开发经验总结

5.1 踩坑实录

日期处理常见问题：

MySQL8.0默认时区问题
前端时区转换注意事项
序列化时的格式统一

java复制// 推荐解决方案
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
private Date reportTime;

5.2 性能优化技巧

接口响应优化三板斧：

添加二级缓存

java复制@Cacheable(value = "caseStats", key = "#regionCode")
public CaseStats getRegionStats(String regionCode) {
    // 查询逻辑
}

异步处理非核心逻辑
合理使用DTO投影

5.3 安全防护措施

必须实现的防护策略：

接口参数校验（Hibernate Validator）
XSS过滤（自定义拦截器）
SQL注入防护（MyBatis参数化查询）
敏感数据加密（AES+盐值）

java复制@NotBlank(message = "姓名不能为空")
@Size(max = 20, message = "姓名长度超限")
private String name;

6. 扩展开发建议

后续可扩展方向：

对接健康码API实现自动核验
增加疫情预测算法模块
开发微信小程序轻量版
集成大数据分析平台

微服务改造方案：

按业务拆分为独立服务
采用Spring Cloud Alibaba
使用Nacos作为注册中心
通过Sentinel实现熔断降级

这个项目让我深刻体会到，一个好的疫情防控系统需要在技术严谨性和用户体验之间找到平衡点。特别是在数据可视化方面，我们迭代了5个版本才最终确定现在的展示方式。建议开发类似系统的同行，一定要提前做好需求调研，把80%的精力放在20%的核心功能上。