SpringBoot+Vue构建企业HR系统全栈开发实践-代码聚汇网

SpringBoot+Vue构建企业HR系统全栈开发实践

樱桃阳子·2026-08-12·阅读 22 GEO检测（免费）

SpringBootVueHR系统

|难度：普通|阅读约 14 分钟

1. 项目概述：现代企业HR系统的技术架构选型

这个基于SpringBoot+Vue的人力资源管理系统，是我为某中型制造企业开发的数字化HR解决方案。传统企业的人事管理往往依赖Excel表格和纸质档案，随着员工规模突破300人，他们在考勤统计、绩效评估和薪资核算上每月要耗费HR部门近200个工时。这套系统上线后，将审批流程效率提升60%，薪酬计算错误率从8%降至0.3%，直接印证了技术赋能业务的价值。

选择SpringBoot+Vue的全栈组合主要基于三个现实考量：首先，企业IT部门已有Java技术栈基础，SpringBoot的约定优于配置特性能让后端开发聚焦业务逻辑；其次，Vue的渐进式框架特性允许我们根据HR模块优先级分批次实现前端功能；最后，MyBatis在复杂SQL查询上的灵活性，正好应对制造业特有的跨部门绩效考核规则。这种技术组合既保证了开发效率，又为后期扩展留足空间。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 核心模块设计与技术实现

2.1 权限管理系统架构

采用RBAC模型实现多级权限控制，这是整个系统的安全基石。数据库设计上，我们建立了五张核心表：

sql复制CREATE TABLE `sys_user` (
  `user_id` bigint NOT NULL AUTO_INCREMENT COMMENT '用户ID',
  `dept_id` bigint DEFAULT NULL COMMENT '部门ID',
  `username` varchar(30) NOT NULL COMMENT '登录账号',
  `password` varchar(100) NOT NULL COMMENT '密码',
  `salt` varchar(20) DEFAULT NULL COMMENT '盐值',
  `status` char(1) DEFAULT '0' COMMENT '状态（0正常 1停用）',
  PRIMARY KEY (`user_id`),
  UNIQUE KEY `idx_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';

权限验证采用Spring Security + JWT方案，在网关层通过自定义过滤器实现：

java复制@Component
public class JwtAuthenticationFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, 
            HttpServletResponse response, FilterChain chain) {
        String token = request.getHeader("Authorization");
        if (StringUtils.hasText(token) && token.startsWith("Bearer ")) {
            Authentication authentication = jwtProvider.getAuthentication(token.substring(7));
            SecurityContextHolder.getContext().setAuthentication(authentication);
        }
        chain.doFilter(request, response);
    }
}

2.2 员工全生命周期管理

从入职到离职的全流程数字化是系统的核心价值。我们特别设计了智能合同模块：

使用Apache POI动态生成劳动合同
集成CA数字签名服务
通过Redis缓存员工证件有效期提醒

考勤模块对接了企业现有的门禁系统，处理复杂排班规则时采用了规则引擎Drools：

drl复制rule "夜班补贴规则"
    when
        $attendance : Attendance(shiftType == "NIGHT", 
            duration >= 8)
    then
        $attendance.setSubsidy(150.00);
end

2.3 薪酬计算引擎实现

制造业的薪资结构复杂，包含基本工资、绩效奖金、夜班补贴等12个计算维度。我们开发了可配置的薪酬公式引擎：

java复制public class SalaryCalculator {
    public BigDecimal calculate(SalaryContext context) {
        return context.getItems().stream()
            .map(item -> formulaEngine.execute(
                item.getFormula(), 
                context.getParams()))
            .reduce(BigDecimal.ZERO, BigDecimal::add);
    }
}

为避免高并发发薪日的性能问题，我们：

使用Spring Batch进行批量处理
关键表添加版本号乐观锁
采用Sharding-JDBC分库分表

3. 前后端协同开发实践

3.1 API设计规范

遵循RESTful原则的同时，针对HR业务特点做了适配：

code复制GET    /api/employees/{id}/promotions   # 获取晋升记录
POST   /api/employees/{id}/transfers    # 提交调岗申请
PATCH  /api/attendances/{id}/correct    # 考勤记录修正

使用Swagger UI生成文档时，通过自定义注解增强可读性：

java复制@Operation(summary = "获取部门树", 
    parameters = {
        @Parameter(name = "includeDisabled", 
            description = "是否包含停用部门")
    })
@GetMapping("/departments/tree")
public R<DepartmentTreeVO> getDepartmentTree(
        @RequestParam(required = false) Boolean includeDisabled) {
    //...
}

3.2 Vue前端工程化实践

采用模块化架构组织HR功能：

code复制src/
├── modules/
│   ├── attendance/    # 考勤模块
│   ├── payroll/       # 薪酬模块
│   └── recruitment/   # 招聘模块
├── core/              # 核心组件
└── store/             # Pinia状态管理

性能优化关键措施：

路由懒加载
使用v-virtual-scroll渲染大型员工列表
对薪资报表导出功能做Web Worker处理

vue复制<script setup>
import { useSalaryStore } from '@/modules/payroll/store'

const store = useSalaryStore()
const exportReport = async () => {
  const worker = new Worker('./export.worker.js')
  worker.postMessage(store.filters)
  worker.onmessage = (e) => {
    saveAs(e.data, '薪资报表.xlsx')
  }
}
</script>

4. 部署与运维方案

4.1 多环境配置管理

通过Spring Profiles实现环境隔离：

yaml复制# application-prod.yml
spring:
  datasource:
    url: jdbc:mysql://cluster-prod:3306/hr_system?useSSL=false
    hikari:
      maximum-pool-size: 20
      
  redis:
    cluster:
      nodes: redis-prod-1:6379,redis-prod-2:6379

前端使用.env文件管理环境变量：

code复制VUE_APP_API_BASE=https://api.hr.yourcompany.com
VUE_APP_SSO_ENABLED=true

4.2 监控与日志方案

使用Prometheus + Grafana监控JVM指标
通过ELK收集业务日志
关键操作审计日志单独存储

java复制@LogRecord(
    success = "更新了员工{{#employee.name}}的薪资信息",
    operator = "#request.user",
    type = LogType.SALARY_UPDATE)
@PostMapping("/salary/adjustment")
public R<String> adjustSalary(@RequestBody SalaryAdjustmentDTO dto) {
    //...
}

5. 典型问题排查实录

5.1 并发薪资计算冲突

现象：批量计算时出现"薪资已锁定"异常
根因：乐观锁重试机制未生效
解决方案：

java复制@Retryable(value = OptimisticLockingFailureException.class, 
           maxAttempts = 3,
           backoff = @Backoff(delay = 100))
public void batchCalculate(List<Long> employeeIds) {
    //...
}

5.2 内存泄漏问题

现象：每月末系统响应变慢
分析工具：Arthas的memory命令
定位：未关闭的POI Workbook对象
修复方案：

java复制try (Workbook workbook = new XSSFWorkbook(templateStream)) {
    // 操作workbook...
} // 自动关闭资源

5.3 Vue组件性能优化

现象：员工选择器卡顿
优化前：

vue复制<template>
  <div v-for="dept in departments" :key="dept.id">
    {{ dept.name }} <!-- 2000+部门时渲染缓慢 -->
  </div>
</template>

优化后：

vue复制<template>
  <vue-virtual-scroll-list :size="40" :remain="8">
    <div v-for="dept in visibleDepartments" 
         :key="dept.id"
         :style="{ height: '40px' }">
      {{ dept.name }}
    </div>
  </vue-virtual-scroll-list>
</template>

6. 项目演进方向

这套系统目前已在生产环境稳定运行18个月，后续计划：

集成OCR技术实现证件自动识别
增加BI看板展示人力成本分析
使用WebSocket实现审批实时提醒

在架构层面，我们正在评估将部分模块改造为微服务的可行性，特别是需要独立伸缩的考勤计算服务。对于Java技术栈的团队，这套方案最大的优势是开发效率与运行稳定性的平衡，特别是在处理制造业复杂的薪资规则时，Java的强类型特性帮我们规避了许多潜在错误。