1. 项目概述与核心价值
这个基于SpringBoot+Vue3+MyBatis的员工健康管理系统，是当前企业数字化转型中非常典型的全栈开发实践案例。我去年为一家中型制造企业实施过类似系统，从需求调研到最终上线用了三个月时间，显著提升了他们的员工健康管理效率。
系统采用前后端分离架构，后端使用SpringBoot提供RESTful API，前端用Vue3构建响应式界面，数据持久层采用MyBatis操作MySQL数据库。这种技术组合在2023年的企业级应用开发中已经成为主流选择，既能保证系统稳定性，又能获得良好的开发体验。
2. 技术架构解析
2.1 后端技术栈设计
SpringBoot 2.7.x作为后端框架是经过深思熟虑的选择：
- 自动配置特性大幅减少了XML配置
- 内嵌Tomcat简化了部署流程
- Starter依赖机制让整合MyBatis、Redis等组件变得异常简单
我在实际项目中通常会这样组织包结构：
code复制src/main/java
├── config # 配置类
├── controller # 控制器层
├── service # 业务逻辑层
├── dao # 数据访问层
├── entity # 实体类
├── dto # 数据传输对象
└── util # 工具类
2.2 前端技术选型
Vue3相比Vue2有几个显著优势：
- Composition API让代码组织更灵活
- 更好的TypeScript支持
- 性能提升约30%
推荐使用以下前端架构：
bash复制src/
├── api/ # 接口定义
├── assets/ # 静态资源
├── components/ # 公共组件
├── router/ # 路由配置
├── store/ # 状态管理
├── utils/ # 工具函数
└── views/ # 页面组件
3. 数据库设计与实现
3.1 核心表结构
MySQL表设计需要特别注意健康数据的敏感性：
sql复制CREATE TABLE `employee_health` (
`id` bigint NOT NULL AUTO_INCREMENT,
`employee_id` varchar(32) NOT NULL COMMENT '员工工号',
`temperature` decimal(3,1) DEFAULT NULL COMMENT '体温',
`heart_rate` int DEFAULT NULL COMMENT '心率',
`blood_pressure` varchar(16) DEFAULT NULL COMMENT '血压',
`health_status` tinyint DEFAULT '1' COMMENT '1-健康 2-亚健康 3-异常',
`record_date` date NOT NULL COMMENT '记录日期',
`create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `idx_employee_date` (`employee_id`,`record_date`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.2 MyBatis优化实践
在mapper.xml中，我通常会这样处理复杂查询：
xml复制<select id="selectHealthReport" resultType="com.example.dto.HealthReportDTO">
SELECT
e.name,
h.temperature,
h.health_status,
d.dept_name
FROM employee_health h
JOIN employee e ON h.employee_id = e.employee_id
JOIN department d ON e.dept_id = d.id
<where>
<if test="startDate != null">
AND h.record_date >= #{startDate}
</if>
<if test="deptId != null">
AND e.dept_id = #{deptId}
</if>
</where>
ORDER BY h.record_date DESC
</select>
4. 关键功能实现细节
4.1 健康数据上报流程
前端Vue3组件关键代码：
vue复制<script setup>
import { ref } from 'vue'
import { submitHealthData } from '@/api/health'
const formData = ref({
temperature: null,
heartRate: null,
bloodPressure: ''
})
const handleSubmit = async () => {
try {
await submitHealthData(formData.value)
// 成功处理
} catch (error) {
// 错误处理
}
}
</script>
后端SpringBoot控制器：
java复制@RestController
@RequestMapping("/api/health")
public class HealthController {
@PostMapping
public Result submitHealthData(@RequestBody HealthRecordDTO dto) {
// 参数校验
if (dto.getTemperature() == null) {
return Result.fail("体温不能为空");
}
// 业务处理
return healthService.processHealthData(dto);
}
}
4.2 数据可视化展示
使用ECharts实现健康数据统计：
javascript复制import * as echarts from 'echarts'
const initChart = () => {
const chart = echarts.init(document.getElementById('health-chart'))
chart.setOption({
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: dates },
yAxis: { type: 'value' },
series: [
{
name: '体温',
type: 'line',
data: temperatures
}
]
})
}
5. 系统安全与性能优化
5.1 安全防护措施
- JWT认证实现：
java复制public class JwtUtil {
private static final String SECRET = "your-256-bit-secret";
public static String generateToken(UserDetails user) {
return Jwts.builder()
.setSubject(user.getUsername())
.setIssuedAt(new Date())
.setExpiration(new Date(System.currentTimeMillis() + 3600000))
.signWith(SignatureAlgorithm.HS256, SECRET)
.compact();
}
}
- 接口防刷策略：
java复制@Aspect
@Component
public class RateLimitAspect {
private final Cache<String, Integer> requestCounts = Caffeine.newBuilder()
.expireAfterWrite(1, TimeUnit.MINUTES)
.build();
@Around("@annotation(rateLimit)")
public Object around(ProceedingJoinPoint joinPoint, RateLimit rateLimit) throws Throwable {
String key = getRequestKey(joinPoint);
Integer count = requestCounts.getIfPresent(key);
if (count != null && count >= rateLimit.value()) {
throw new BusinessException("请求过于频繁");
}
requestCounts.put(key, count == null ? 1 : count + 1);
return joinPoint.proceed();
}
}
5.2 性能优化方案
- 二级缓存配置：
java复制@Configuration
@EnableCaching
public class RedisConfig extends CachingConfigurerSupport {
@Bean
public CacheManager cacheManager(RedisConnectionFactory factory) {
return RedisCacheManager.builder(factory)
.cacheDefaults(RedisCacheConfiguration.defaultCacheConfig()
.entryTtl(Duration.ofMinutes(30))
.disableCachingNullValues())
.build();
}
}
- 数据库连接池配置：
yaml复制spring:
datasource:
hikari:
maximum-pool-size: 20
minimum-idle: 5
idle-timeout: 30000
max-lifetime: 1800000
connection-timeout: 30000
6. 部署与运维实践
6.1 前后端分离部署
Nginx配置示例：
nginx复制server {
listen 80;
server_name health.example.com;
location / {
root /var/www/health-frontend;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
6.2 数据库备份策略
建议的MySQL备份方案：
bash复制#!/bin/bash
DATE=$(date +%Y%m%d)
mysqldump -u root -p'password' health_db > /backup/health_db_$DATE.sql
find /backup -type f -mtime +7 -exec rm {} \;
7. 常见问题解决方案
7.1 跨域问题处理
SpringBoot跨域配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.maxAge(3600);
}
}
7.2 MyBatis日志打印
在application.yml中配置：
yaml复制mybatis:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
8. 项目扩展方向
- 健康预警功能：通过设定阈值自动触发预警通知
- 移动端适配：开发微信小程序版本
- 大数据分析：集成Spark进行健康趋势预测
- 物联网接入：连接智能手环自动采集数据
在实际项目中，我发现系统上线后最受好评的功能是健康数据异常自动通知功能。通过简单的规则引擎配置，当员工体温超过37.3℃或心率异常时，系统会自动发送邮件给HR和部门负责人，这个功能帮助企业提前发现了多个潜在的健康问题。