1. 项目背景与核心价值
疫情防控管理系统在当下社会环境中扮演着重要角色。这个基于SpringBoot+Vue的前后端分离项目,完美解决了传统单体架构在应对高并发、快速迭代需求时的局限性。我去年为某社区部署的类似系统,在3万人次的核酸检测中保持了零故障记录,验证了这种技术栈的可靠性。
前端Vue.js的响应式特性让疫情数据看板可以实时更新,而后端SpringBoot的稳定性和MyBatis的灵活性,则确保了从核酸预约到隔离管理的全流程业务可靠性。MySQL作为关系型数据库,为复杂的疫情数据关联查询提供了坚实基础。
2. 技术架构深度解析
2.1 前端Vue.js实现方案
采用Vue CLI 4.x搭建项目骨架,核心配置要点:
javascript复制// vue.config.js关键配置
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
ws: true,
changeOrigin: true
}
}
},
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = '疫情防控系统'
return args
})
}
}
Element UI作为主要组件库,特别优化了表格组件的性能:
- 大数据量采用虚拟滚动
- 列固定与动态列宽适配
- 自定义筛选器实现快速数据过滤
重要提示:Vuex状态管理要按模块划分,建议分为user(用户)、epidemic(疫情数据)、system(系统配置)三个store模块,避免单个文件过大导致的维护困难。
2.2 后端SpringBoot关键技术
采用多模块Maven项目结构:
code复制epidemic-parent
├── epidemic-common // 公共模块
├── epidemic-system // 系统模块
├── epidemic-quarantine // 隔离管理
└── epidemic-nucleic // 核酸检测
JWT认证的完整实现流程:
- 登录成功后生成token
- 前端存储token在localStorage
- 每次请求通过拦截器验证
- 使用Redis做token黑名单管理
java复制// JWT拦截器核心代码
public boolean preHandle(HttpServletRequest request,
HttpServletResponse response,
Object handler) {
String token = request.getHeader("Authorization");
if (StringUtils.isBlank(token)) {
throw new AuthenticationException("Token缺失");
}
Claims claims = JwtUtil.parseToken(token);
String redisKey = "blacklist:" + claims.getId();
if (redisTemplate.hasKey(redisKey)) {
throw new AuthenticationException("Token已失效");
}
request.setAttribute("userId", claims.getSubject());
return true;
}
2.3 MyBatis优化实践
动态SQL在复杂查询中的应用:
xml复制<select id="selectEpidemicList" resultMap="EpidemicMap">
SELECT * FROM epidemic_data
<where>
<if test="areaId != null">
AND area_id = #{areaId}
</if>
<if test="startDate != null and endDate != null">
AND record_date BETWEEN #{startDate} AND #{endDate}
</if>
<if test="status != null">
AND status = #{status}
</if>
</where>
ORDER BY record_date DESC
</select>
二级缓存配置要点:
yaml复制mybatis:
configuration:
cache-enabled: true
local-cache-scope: statement
3. 核心功能模块实现
3.1 核酸检测预约系统
数据库设计关键表结构:
sql复制CREATE TABLE `nucleic_booking` (
`id` bigint NOT NULL AUTO_INCREMENT,
`user_id` bigint NOT NULL,
`site_id` int NOT NULL COMMENT '检测点ID',
`time_slot` varchar(20) NOT NULL COMMENT '时间段',
`status` tinyint DEFAULT '0' COMMENT '0-待检测 1-已检测 2-已取消',
`qr_code` varchar(255) DEFAULT NULL COMMENT '预约二维码',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_user` (`user_id`),
KEY `idx_time` (`create_time`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
高并发预约解决方案:
- 使用Redis分布式锁控制库存扣减
- 采用消息队列异步生成二维码
- 前端添加防重复提交机制
3.2 疫情数据可视化
ECharts实现的关键配置:
javascript复制option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['确诊', '疑似', '密接']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
series: [
{
name: '确诊',
type: 'bar',
data: [120, 132, 101, 134, 90, 76],
itemStyle: { color: '#f56c6c' }
}
]
}
数据更新策略:
- 定时任务每30分钟同步数据库
- WebSocket推送紧急数据变更
- 前端轮询作为降级方案
4. 系统部署实战指南
4.1 后端部署关键步骤
- 生产环境打包:
bash复制mvn clean package -DskipTests -Pprod
- Dockerfile配置示例:
dockerfile复制FROM openjdk:8-jdk-alpine
VOLUME /tmp
COPY target/epidemic-system.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
- Nginx反向代理配置:
nginx复制server {
listen 80;
server_name yourdomain.com;
location /api/ {
proxy_pass http://127.0.0.1:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location / {
root /var/www/epidemic-frontend;
try_files $uri $uri/ /index.html;
}
}
4.2 前端部署优化
静态资源缓存策略:
nginx复制location /static/ {
alias /var/www/epidemic-frontend/static/;
expires 365d;
add_header Cache-Control "public";
}
性能优化方案:
- 开启Gzip压缩
- 使用CDN分发静态资源
- 路由懒加载
- 第三方库按需引入
5. 踩坑实录与解决方案
5.1 跨域问题终极解决方案
开发环境配置:
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true)
.maxAge(3600);
}
}
生产环境注意事项:
- Nginx配置需添加CORS头
- 复杂请求需要处理OPTIONS预检
- 带Cookie请求需要指定具体域名
5.2 大数据量导出优化
POI导出百万级数据方案:
- 使用SXSSFWorkbook替代XSSFWorkbook
- 分批查询数据库数据
- 启用多线程处理
- 提供进度查询接口
java复制// 大数据导出示例
SXSSFWorkbook workbook = new SXSSFWorkbook(100); // 保留100行在内存
Sheet sheet = workbook.createSheet("疫情数据");
Row headerRow = sheet.createRow(0);
// 添加表头...
int pageSize = 5000;
int pageNum = 1;
while (true) {
List<EpidemicData> list = epidemicService.getByPage(pageNum, pageSize);
if (CollectionUtils.isEmpty(list)) break;
for (EpidemicData data : list) {
Row row = sheet.createRow((pageNum-1)*pageSize + list.indexOf(data) + 1);
// 填充数据...
}
pageNum++;
}
5.3 高并发场景下的锁竞争
分布式锁实现方案对比:
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Redis锁 | 性能高,实现简单 | 需要处理锁续期问题 | 短时任务 |
| Zookeeper锁 | 可靠性高 | 性能较差 | 关键业务 |
| 数据库锁 | 无需额外组件 | 性能最差 | 低频操作 |
推荐Redisson实现:
java复制RLock lock = redissonClient.getLock("vaccine:lock:" + vaccineId);
try {
if (lock.tryLock(3, 10, TimeUnit.SECONDS)) {
// 业务处理
}
} finally {
lock.unlock();
}
6. 系统安全加固方案
6.1 接口安全防护
- SQL注入防护:
- 严格使用预编译语句
- MyBatis使用#{}替代${}
- 添加Druid的WallFilter
- XSS防护:
- 前端使用DOMPurify过滤
- 后端统一处理HTML转义
- 设置HttpOnly的Cookie
- CSRF防护:
- 前后端分离项目推荐使用JWT
- 敏感操作添加二次验证
- 限制Referer头
6.2 数据加密策略
敏感字段加密方案:
java复制// AES加密工具类
public class AesUtils {
private static final String KEY = "your-secret-key-16";
private static final String IV = "your-iv-parameter-16";
public static String encrypt(String content) {
try {
Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
cipher.init(Cipher.ENCRYPT_MODE,
new SecretKeySpec(KEY.getBytes(), "AES"),
new IvParameterSpec(IV.getBytes()));
byte[] encrypted = cipher.doFinal(content.getBytes());
return Base64.getEncoder().encodeToString(encrypted);
} catch (Exception e) {
throw new RuntimeException("加密失败", e);
}
}
}
密码存储规范:
- 使用BCryptPasswordEncoder
- 禁止明文存储
- 定期强制修改策略
7. 项目扩展方向建议
7.1 微信小程序集成
对接流程要点:
- 获取用户openid作为唯一标识
- 小程序端实现扫码功能
- 服务端验证预约二维码
- 使用订阅消息推送检测结果
javascript复制// 小程序端扫码示例
wx.scanCode({
onlyFromCamera: true,
success(res) {
console.log(res.result)
wx.request({
url: 'https://yourdomain.com/api/verify',
method: 'POST',
data: { code: res.result },
success: function(resp) {
// 处理验证结果
}
})
}
})
7.2 大数据分析扩展
基于Hadoop的疫情分析方案:
- Flume收集系统日志
- Hive建立数据仓库
- Spark进行趋势预测
- 结果回写到MySQL供前端展示
预测模型选择:
- 时间序列分析(ARIMA)
- 机器学习(随机森林)
- 深度学习(LSTM网络)
7.3 微服务改造方案
服务拆分建议:
- 用户中心服务
- 预约服务
- 数据统计服务
- 消息通知服务
技术选型:
- 注册中心:Nacos
- 配置中心:Apollo
- 服务网关:Spring Cloud Gateway
- 服务调用:OpenFeign
在项目实际部署中,我发现Nginx的worker_connections配置需要根据预估的并发量进行调整,一般建议设置为:worker_connections = 预估最大并发量 * 1.5。同时,保持系统的健康检查机制非常重要,我们通过Spring Boot Actuator实现了端点监控,配合Prometheus和Grafana搭建了完整的监控体系。