SpringBoot+Vue构建疫情密接者跟踪系统实战-平芜编程栈

1. 项目概述：新冠病毒密接者跟踪系统管理平台

这个基于SpringBoot+Vue的密接者跟踪系统，本质上是一个结合公共卫生管理与现代IT技术的典型应用。我在2020年疫情初期就参与过类似系统的开发，当时的需求紧迫性让很多功能都是"边上线边优化"。现在回头看，这种系统确实非常适合作为毕业设计或课程设计的选题——它既包含了完整的前后端技术栈，又具备真实的社会应用场景。

系统核心功能模块包括：

人员信息登记（含接触史记录）
密接关系图谱构建
风险等级自动评估
隔离状态追踪
数据可视化看板

技术栈选择上，SpringBoot提供了快速构建RESTful API的能力，Vue则擅长处理复杂的前端交互。这种前后端分离的架构，正是当前企业级开发的主流模式。MySQL作为关系型数据库，在处理结构化疫情数据时表现出色，特别是当需要频繁进行多表关联查询时。

提示：做毕设时建议先完成核心追踪功能，再逐步扩展统计分析等模块。我见过不少同学一开始就想做太复杂的可视化，结果耽误了基础功能的实现。

2. 技术架构解析

2.1 后端SpringBoot设计要点

后端采用经典的MVC分层架构，但针对疫情追踪的特殊性做了优化：

// 典型控制器示例 @RestController @RequestMapping("/api/contact") public class ContactTraceController { @Autowired private TraceService traceService; @PostMapping("/risk-assessment") public ResponseEntity<RiskAssessment> assessRisk( @RequestBody ContactHistory history) { // 基于接触时间、距离等参数计算风险值 return ResponseEntity.ok(traceService.assessRisk(history)); } }

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

人员表(person)与接触记录表(contact_record)采用外键关联
为高频查询字段（如手机号、身份证号）添加索引
使用空间索引支持地理位置查询（如GPS轨迹匹配）

2.2 前端Vue实现技巧

Vue组件化开发是本项目的关键优势。通过以下方式优化性能：

使用Vuex管理全局状态（如用户权限）
采用Element UI快速构建表单
通过ECharts实现疫情数据可视化

// 典型Vue组件 export default { data() { return { contactGraph: null } }, mounted() { this.loadContactNetwork() }, methods: { async loadContactNetwork() { // 使用D3.js渲染接触关系图谱 const res = await getContactNetwork() this.renderGraph(res.data) } } }

3. 核心功能实现细节

3.1 密接关系图谱构建

这是系统最具技术挑战的部分。我们采用图数据库的思想在MySQL中实现：

邻接表存储：使用person_id和contact_person_id的双向关联
广度优先搜索：通过CTE递归查询实现n度密接查找
权重计算：结合接触时长、场所类型等参数

-- 查找二级密接者（示例） WITH RECURSIVE contact_tree AS ( SELECT * FROM contact_record WHERE person_id = 123 UNION ALL SELECT c.* FROM contact_record c JOIN contact_tree ct ON c.person_id = ct.contact_person_id ) SELECT DISTINCT person_id FROM contact_tree LIMIT 10;

3.2 风险等级评估算法

我们设计了多因素加权评估模型：

评估因素	权重	评分标准
接触时长	0.3	每10分钟增加1分
接触场所	0.4	室内=3分，室外=1分
防护措施	0.2	无防护=3分，口罩=1分
病例传染性	0.1	确诊=3分，疑似=2分

注意：实际项目中应该允许管理员动态调整这些参数，我们团队就遇到过政策变化导致算法需要紧急调整的情况。

4. 开发环境搭建指南

4.1 后端环境配置

JDK 1.8+（推荐Amazon Corretto）
Maven 3.6+（注意配置阿里云镜像）
MySQL 5.7+（需要开启innodb引擎）

# 初始化数据库（示例） mysql> CREATE DATABASE contact_tracing CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

4.2 前端环境准备

Node.js 14+
Vue CLI 4.5+
推荐VS Code插件：
- Vetur
- ESLint
- Vue VSCode Snippets

# 安装依赖 npm install # 开发模式运行 npm run serve

5. 典型问题排查实录

5.1 跨域问题解决方案

开发阶段常见跨域问题，可通过以下方式解决：

SpringBoot配置CORS（生产环境需谨慎）

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

前端代理配置（vue.config.js）

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

5.2 性能优化经验

数据库层面：
- 为contact_record表添加复合索引(person_id, contact_date)
- 对大文本字段（如备注）使用垂直分表
- 定期归档历史数据
前端层面：
- 使用Virtual Scroll优化长列表渲染
- 对ECharts图表进行懒加载
- 启用Gzip压缩

6. 项目扩展建议

如果想提升项目竞争力，可以考虑：

加入微信小程序端（使用uni-app跨平台方案）
集成短信通知功能（阿里云短信服务）
实现自动化部署（Jenkins+Docker）
添加基于GIS的轨迹重合度分析

我在实际项目中遇到过的一个有趣需求是"接触概率预测"——通过机器学习分析人员移动模式，预测未来可能的密接风险。这需要集成Python的scikit-learn，通过REST API与Java后端交互。

7. 毕设答辩技巧

根据我指导学生答辩的经验，需要特别注意：

技术亮点要讲透：
- 如何实现高效的关系图谱查询
- 风险评估算法的设计思路
- 前后端分离架构的优势
演示准备：
- 准备两套测试数据：正常流程和异常case
- 对关键功能录制备用视频
- 提前测试投影仪兼容性
常见问题准备：
- "与传统Excel登记方式相比的优势"
- "系统如何保证数据隐私"
- "如果用户提供虚假信息怎么办"

最后分享一个数据库设计的教训：最初我们没考虑国际手机号格式，结果上线后无法处理+86开头的号码，不得不紧急修改表结构。建议在person表中将手机号字段设为varchar(20)并添加国家码字段。

SpringBoot+Vue构建疫情密接者跟踪系统实战