1. 项目概述
这套"中小社区疫情信息管理系统"是一套面向社区基层管理者的全栈解决方案，采用当前主流的技术栈组合：SpringBoot后端+Vue前端+MySQL数据库。我在实际部署测试中发现，其开箱即用的特性确实能快速响应社区防疫中的信息登记、人员追踪、物资调配等核心需求。
系统最突出的特点是"轻量级"与"可扩展性"的平衡。基于SpringBoot的模块化设计，即使是没有专业IT支持的社区工作人员，也能通过清晰的接口文档完成基础功能配置。而Vue前端的多角色界面自适应，则解决了社区工作者、居民、物业等不同群体在疫情信息交互中的差异化需求。
2. 技术架构解析
2.1 后端技术选型
SpringBoot 2.7.x版本的选择经过了我们团队的慎重考量：
- 内嵌Tomcat服务器避免独立部署的复杂性
- starter依赖机制显著降低了依赖冲突概率（实测比传统SSM框架减少约60%的配置时间）
- Actuator端点监控对系统健康状态的实时把控至关重要
特别值得说明的是疫情业务模块的分层设计：
code复制controller
├── EpidemicController (健康码状态变更)
├── ReportController (每日健康上报)
├── VaccineController (疫苗接种记录)
service
├── impl
│ ├── ContactTrackingServiceImpl (密接追踪算法)
│ └── RiskAreaServiceImpl (风险区域判定)
repository
└── custom
├── EpidemicCustomRepository (复杂查询封装)
2.2 前端工程化实践
Vue 3.x组合式API的采用带来了显著的开发效率提升：
- 基于Pinia的状态管理使多组件疫情数据共享更高效
- Element Plus的表格组件优化了大数据量渲染性能（万级数据秒开）
- 自定义封装的ECharts组件实现疫情数据可视化
一个典型的健康码状态变更前端逻辑实现：
javascript复制// 使用Composition API封装业务逻辑
const changeHealthCode = async (userId, status) => {
try {
const { code } = await updateHealthStatus(userId, status)
if (code === 200) {
ElMessage.success('状态更新成功')
// 自动刷新当前列表
loadUserList()
}
} catch (err) {
ElMessage.error(`变更失败: ${err.message}`)
}
}
2.3 数据库设计要点
MySQL 8.0的关系模型设计着重考虑了疫情数据的时空特性：
sql复制CREATE TABLE `epidemic_record` (
`id` BIGINT NOT NULL AUTO_INCREMENT,
`user_id` BIGINT NOT NULL COMMENT '关联用户ID',
`temperature` DECIMAL(3,1) COMMENT '体温',
`health_status` ENUM('normal','fever','suspected','confirmed') NOT NULL,
`location` POINT NOT NULL COMMENT '上报位置',
`report_time` DATETIME NOT NULL COMMENT '精确到分钟',
PRIMARY KEY (`id`),
SPATIAL INDEX `idx_location` (`location`),
INDEX `idx_time_status` (`report_time`, `health_status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
关键设计决策：使用MySQL的空间索引支持轨迹追溯，ENUM类型规范状态值，复合索引加速时空查询
3. 核心功能实现
3.1 健康码动态管理
采用状态机模式设计健康码流转逻辑：
java复制public class HealthCodeStateMachine extends StateMachine<HealthStatus, Event> {
@Override
protected void configure() {
// 初始状态为绿码
initialState(HealthStatus.GREEN);
// 状态转换规则
transition()
.from(HealthStatus.GREEN)
.to(HealthStatus.YELLOW)
.on(Event.CLOSE_CONTACT)
.when(checkTimeCondition());
transition()
.from(HealthStatus.YELLOW)
.to(HealthStatus.RED)
.on(Event.POSITIVE_TEST)
.execute(notifyCDC());
}
}
实际运行中需要特别注意：
- 状态变更需记录完整操作日志
- 黄码转红码必须经过人工复核
- 批量状态更新要添加@Transactional注解
3.2 密接人员追踪算法
基于时空交集的追踪逻辑实现：
java复制public List<Long> findCloseContacts(Long userId, LocalDateTime start, LocalDateTime end) {
// 1. 获取目标用户轨迹
List<LocationRecord> targetTracks = locationRepo.findByUserAndTime(userId, start, end);
// 2. 空间查询重叠人员（使用MySQL GIS函数）
String sql = "SELECT DISTINCT user_id FROM location_record " +
"WHERE ST_Within(location, ST_Buffer(:point, 0.001)) " +
"AND report_time BETWEEN :start AND :end";
// 3. 时间窗口滑动匹配
return jdbcTemplate.queryForList(sql, params, Long.class)
.stream()
.filter(id -> !id.equals(userId))
.collect(Collectors.toList());
}
性能优化点：空间查询使用R树索引，时间条件采用分区表策略
3.3 疫情数据可视化
前端采用ECharts实现的三层数据展示架构：
- 社区级：热力图展示人员密度
- 楼栋级：折线图呈现趋势变化
- 个人级：日历图标记异常状态
关键配置项示例：
javascript复制const heatmapOption = {
toolbox: {
feature: {
dataZoom: { yAxisIndex: false },
saveAsImage: { pixelRatio: 2 }
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
calendar: {
top: 'middle',
left: 'center',
cellSize: ['auto', 20]
}
}
4. 部署与运维实践
4.1 快速启动指南
后端启动关键参数（application.yml节选）：
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/epidemic?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: yourpassword
hikari:
maximum-pool-size: 20
connection-timeout: 30000
epidemic:
risk-threshold: 5 # 同一单元确诊阈值
auto-lock-hours: 72 # 自动封锁时长
前端环境配置要点：
bash复制# 安装依赖时建议使用国内源
npm install --registry=https://registry.npmmirror.com
# 开发模式启动
npm run serve -- --port 8081
# 生产构建
VUE_APP_API_BASE_URL=/api npm run build
4.2 常见问题排查
-
健康码状态不同步
- 检查Redis缓存是否启用（spring.cache.type=redis）
- 验证@CacheEvict注解是否生效
- 查看WebSocket连接状态
-
轨迹查询超时
- 确认location字段建立SPATIAL索引
- 检查MySQL的innodb_buffer_pool_size配置（建议≥1GB）
- 考虑添加查询时间限制条件
-
前端地图加载缓慢
- 将高德地图JS API改为异步加载
- 启用gzip压缩（nginx配置示例）：
nginx复制gzip on; gzip_types text/plain application/xml application/javascript; gzip_min_length 1024;
5. 扩展开发建议
5.1 多租户改造方案
对于需要服务多个社区的场景，建议采用以下改造路径：
- 数据库层面：添加tenant_id字段并修改所有SQL
sql复制ALTER TABLE epidemic_record ADD COLUMN tenant_id INT NOT NULL DEFAULT 1; - 后端增加租户过滤器：
java复制@Component @Order(1) public class TenantFilter implements Filter { @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) { String tenantId = ((HttpServletRequest)request).getHeader("X-Tenant-ID"); TenantContext.setCurrentTenant(tenantId); chain.doFilter(request, response); } } - 前端添加租户切换组件
5.2 移动端适配技巧
针对社区工作人员常用的Pad设备，推荐以下优化措施：
- 使用vw/vh单位替代px
- 表单元素增加触摸反馈：
css复制.form-item:active { transform: scale(0.98); transition: transform 0.1s; } - 离线模式支持（基于localStorage的缓存策略）
这套系统在实际社区防疫中展现出的价值远超预期。有个让我印象深刻的案例：某社区使用系统的批量导入功能，在2小时内完成了全员核酸结果的匹配，而传统手工方式至少需要1天。特别提醒注意居民敏感信息的加密存储，建议采用国密SM4算法对身份证号等字段进行加密处理。