DIY飞跃计划1. 项目概述：SpringBoot+Vue+MySQL全栈人事管理系统
这套中小企业人事管理系统采用当前主流的前后端分离架构，后端基于SpringBoot 2.7.x构建，前端使用Vue 3组合式API开发，数据存储采用MySQL 8.0关系型数据库。系统实现了员工信息管理、考勤统计、薪资核算、部门管理等HR核心功能模块，代码开箱即用，特别适合50-500人规模的中小企业快速部署。
我在实际部署测试中发现，这套源码的亮点在于：
- 权限控制采用RBAC模型，通过JWT实现无状态认证
- 前端表格组件封装了Excel导入导出功能
- 薪资模块内置了五险一金计算公式模板
- 考勤统计支持多种排班规则配置
注意：运行前需确保JDK11+、Node.js 16+和MySQL 8.0环境已就绪，开发工具推荐IntelliJ IDEA+VSCode组合
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境搭建与项目初始化
2.1 后端SpringBoot环境配置
创建数据库并导入初始化SQL：
sql复制CREATE DATABASE hr_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE hr_system;
SOURCE /path/to/init.sql;
修改application.yml中的数据库连接配置：
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/hr_system?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: yourpassword
driver-class-name: com.mysql.cj.jdbc.Driver
2.2 前端Vue项目启动
安装依赖并运行开发服务器：
bash复制cd hr-system-frontend
npm install --registry=https://registry.npm.taobao.org
npm run dev
常见问题解决方案：
- 若出现"sass-loader"报错，需执行：
bash复制
npm uninstall sass-loader npm install sass-loader@10.1.1 --save-dev - 端口冲突时修改vite.config.js中的server.port配置
3. 核心功能模块解析
3.1 员工信息管理模块
数据库表设计关键字段：
sql复制CREATE TABLE `employee` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`employee_no` varchar(20) NOT NULL COMMENT '工号',
`name` varchar(50) NOT NULL COMMENT '姓名',
`gender` tinyint DEFAULT '0' COMMENT '性别',
`id_card` varchar(18) COMMENT '身份证号',
`department_id` bigint COMMENT '部门ID',
`position` varchar(50) COMMENT '职位',
`hire_date` date COMMENT '入职日期',
`status` tinyint DEFAULT '1' COMMENT '状态(1在职 0离职)',
PRIMARY KEY (`id`),
UNIQUE KEY `idx_employee_no` (`employee_no`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
后端接口设计遵循RESTful规范：
- GET /api/employees - 分页查询员工列表
- POST /api/employees - 新增员工
- PUT /api/employees/{id} - 更新员工信息
- DELETE /api/employees/{id} - 删除员工(逻辑删除)
3.2 考勤统计模块
考勤规则配置示例：
java复制public class AttendanceRule {
private Long id;
private String ruleName; // 规则名称如"标准朝九晚六"
private LocalTime workStartTime; // 上班时间
private LocalTime workEndTime; // 下班时间
private Integer lateMinutes; // 迟到分钟阈值
private Integer earlyMinutes; // 早退分钟阈值
private List<LocalDate> holidays; // 节假日列表
}
考勤数据统计SQL示例：
sql复制SELECT
e.name,
COUNT(CASE WHEN a.status = 'NORMAL' THEN 1 END) AS normal_days,
COUNT(CASE WHEN a.status = 'LATE' THEN 1 END) AS late_times,
COUNT(CASE WHEN a.status = 'EARLY' THEN 1 END) AS early_times
FROM
attendance a
JOIN
employee e ON a.employee_id = e.id
WHERE
a.date BETWEEN '2023-06-01' AND '2023-06-30'
GROUP BY
e.id;
4. 系统特色功能实现
4.1 薪资自动计算引擎
薪资计算公式配置界面采用JSON Schema动态表单：
json复制{
"title": "薪资计算公式",
"type": "object",
"properties": {
"baseSalary": {
"title": "基本工资",
"type": "number"
},
"performance": {
"title": "绩效系数",
"type": "number",
"minimum": 0,
"maximum": 2
},
"insurance": {
"title": "社保扣除",
"type": "number"
}
},
"required": ["baseSalary"]
}
Java计算引擎核心逻辑：
java复制public BigDecimal calculateSalary(SalaryTemplate template, Employee employee) {
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("js");
engine.put("base", employee.getBaseSalary());
engine.put("attendance", getAttendanceFactor(employee));
try {
return new BigDecimal(engine.eval(template.getFormula()).toString());
} catch (ScriptException e) {
throw new SalaryCalculateException("薪资计算失败", e);
}
}
4.2 多维度数据报表
使用ECharts实现的可视化报表配置：
vue复制<template>
<div ref="chart" style="width: 600px; height: 400px;"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
const chart = ref(null)
const props = defineProps(['data'])
onMounted(() => {
const myChart = echarts.init(chart.value)
myChart.setOption({
tooltip: {},
xAxis: { data: props.data.months },
yAxis: {},
series: [{
name: '入职人数',
type: 'bar',
data: props.data.counts
}]
})
})
</script>
5. 系统部署与运维
5.1 生产环境打包部署
后端SpringBoot打包：
bash复制mvn clean package -DskipTests
java -jar target/hr-system-backend.jar --spring.profiles.active=prod
前端Vue项目构建：
bash复制npm run build
Nginx配置示例：
nginx复制server {
listen 80;
server_name hrm.example.com;
location / {
root /path/to/dist;
index index.html;
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;
}
}
5.2 数据库备份方案
使用mysqldump定时备份：
bash复制#!/bin/bash
DATE=$(date +%Y%m%d%H%M)
BACKUP_DIR="/data/backups"
DB_NAME="hr_system"
mysqldump -uroot -p"${DB_PASSWORD}" --single-transaction \
--routines --triggers ${DB_NAME} > ${BACKUP_DIR}/${DB_NAME}_${DATE}.sql
# 保留最近7天备份
find ${BACKUP_DIR} -name "*.sql" -mtime +7 -exec rm -f {} \;
6. 二次开发建议
6.1 功能扩展方向
- 移动端适配：基于Uniapp开发微信小程序版本
- 生物识别集成：对接人脸识别考勤设备API
- 电子签章：集成PDF电子签名功能
- 消息推送：增加企业微信/钉钉消息通知
6.2 性能优化方案
MySQL查询优化示例：
sql复制-- 原始查询
EXPLAIN SELECT * FROM employee WHERE name LIKE '%张%';
-- 优化方案1：添加索引
ALTER TABLE employee ADD INDEX idx_name(name);
-- 优化方案2：使用全文索引
ALTER TABLE employee ADD FULLTEXT INDEX ft_idx_name(name);
SELECT * FROM employee WHERE MATCH(name) AGAINST('张*' IN BOOLEAN MODE);
缓存策略实现：
java复制@Cacheable(value = "employees", key = "#id")
public Employee getEmployeeById(Long id) {
return employeeMapper.selectById(id);
}
@CacheEvict(value = "employees", key = "#employee.id")
public void updateEmployee(Employee employee) {
employeeMapper.updateById(employee);
}
这套系统在实际部署时，我建议特别注意员工照片等文件的存储方案。初期可以使用本地存储，当文件量增大时，应该及时迁移到MinIO或阿里云OSS等对象存储服务，避免应用服务器磁盘空间不足的问题。另外，薪资计算模块建议增加计算日志功能，记录每次计算的详细参数和结果，便于后续审计核查。