【毕业设计】基于SpringBoot+Vue+ElementUI的人力资源管理系统源码

1、前言介绍

在如今这个人才需求量大的时代，各方企业为了永葆企业的活力与生机，在不断开 拓进取的同时，又广泛纳用人才，为企业的长久发展奠定了基础。于是，各个企业与部 门机构，都不可避免地会接触到人力资源管理的问题。

Hrm 是一款人力资源管理系统，其主要功能模块有员工个人信息修改、请假、员工 的薪资管理、考勤管理、社保管理。其中考勤管理实现了员工考勤状态的修改与员工考 勤月报表的导出，以及通过员工考勤记录的导入来实现员工考勤状态的判断。社保管理， 主要实现了员工社保的计算以及明细的修改。薪资管理，实现了员工工资的调整，以及 员工月工资报表的导出。 本项目采用了前后端分离的技术，前端是基于 Vue+ElementUI+Axios 开发的，后端 则是基于 Spring Boot+MyBatis Plus+ Jwt+Mysql。本项目实现了权限菜单管理，通过员 工的权限动态渲染菜单，并动态生成路由。通过 Jwt token 来判断当前登录的员工以及 员工的登录状态。

2、主要技术

技术名	作用
SpringBoot	后端框架
Vue	前端框架
MySQL	数据库

3、系统设计

3.1、功能结构设计

本系统主要分四个模块，分别是系统管理和权限管理、薪资管理、考勤管理，系统 管理主要用于日常事务管理管理，权限管理，用于控制员工的访问权限，薪资管理主要 是对员工的五险一金以及社保数据的修改和添加，考勤管理主要是对员工的日常打卡进 行记录和统计。

3.2、前端设计

3.2.1、前端接口封装

本项目对 Axios 进行了全局的封装，对前端请求和后端响应进行了统一的拦截，并人力资源管理系统进行相应的处理。前端调用的 Api 都封装在 src/api 模块下，进行统一的管理。

3.2.2、组件封装

为了解决代码复用的问题，通过结合 Element UI。本项目对 form 表单和 table 数据 表进行了进一步的组件封装。

3.2.3、动态路由

本项目采用了基于后端权限菜单的来实现动态路由，为了保证菜单数据的全局共享， 菜单数据使用 vuex 来保存。当员工访路由时，通过全局路由守卫进行拦截，并向后端 请求该员工的菜单数据。

3.3、后端设计

3.3.1、全局异常处理

为 了 高 效 地 处 理 异 常 ， 本 项 目 对 异 常 进 行 了 全 局 的 统 一 处 理 ， 使 用

@ControllerAdvice 声明一个全局异常处理器，并通过继承 RuntimeException 实现一个异 常类，在需要异常处理的地方抛出自定义的异常。

3.3.2、数据传输对象

本项目中，后端响应给前端的数据都统一封装在 ResponseDTO 中，然后前端通过 解析得到 ResponseDTO 的 json 对象。通过定义全局的业务状态码枚举类。前端通过后 端响应数据的状态码来判断业务处理是否异常。

3.4、数据库设计

根据《阿里开发手册》，本项目的每张表都包含 id、create_time、update_time 三个 字段。项目统一采用逻辑删除，每张表都包括 is_deleted 字段。根据实际业务需求，项 目分为系统管理、权限管理、薪资管理、考勤管理四大模块。表前缀 sys_(系统管理)、

per_(权限管理)、att_(考勤管理)、sal_(工资管理)、soc_(五险一金)。

3.4.1、系统管理模块

系统管理模块主要涉及 3 张表，负责对员工、部门、以及被上传文件的数据信息进人力资源管理系统行保存。

3.4.2、权限管理模块

权限管理模块主要涉及 5 张表，主要对菜单数据、角色数据进行保存。

3.4.3、考勤管理模块

员工考勤模块主要涉及 9 张表，主要对员工的考勤数据，以及各部门的考勤规则、 加班、请假、工作时间等规则信息的保存。

3.4.4、薪资管理模块 

薪资管理模块主要涉及 7 张表，用于保存参保城市社保信息、员工每个的工资明细、 以及考勤扣款情况。

4、系统实现

4.1、登录

此模块完成了员工的登录功能，员工通过工号和密码进行登录。若员工状态异常则 无法登录。

登录接口：

@PostMapping("/login") public ResponseDTO login(@RequestBody Staff staff)

接口说明： 当员工填写好登录账号和密码之后，前端会提交登录表单。后端接收到数据之后， 会进行数据库查询，并将最终的查询结果以状态码的形式封装在 ResponseDTO 之中， 并返回到前端。

核心代码：

public ResponseDTO login(Staff staff) { 
    String password = MD5Util.MD55(staff.getPassword()); 
    StaffDeptVO staffDeptVO = this.staffMapper.findStaffInfo(staff.getCode(), password); 
    if (staffDeptVO != null) { // 验证用户状态
        if (staffDeptVO.getStatus() == 1) { 
            String token = JWTUtil.generateToken(staffDeptVO.getId(),password); 
            return Response.success(staffDeptVO, token); // 返回员工信息和 token 
        } 
        return Response.error(BusinessStatusEnum.STAFF_STATUS_ERROR); 
    } 
    return Response.error("用户名或密码错误！"); 
}

登录流程： 首先通过前端传递的账号和密码进行员工查询，之后对查询到的员工进行状态判断， 如果状态正常，则将用户的信息和生成的 token 返回给前端，前端将 token 保存在

localstorage 中。

4.2、个人信息编辑

此模块实现了员工个人信息的查看与修改，员工可以进行个人头像的修改。

编辑接口：

@PutMapping public ResponseDTO edit(@RequestBody Staff staff)

接口说明:

员工填写的信息会通过 el-form 组件的 data 属性，将数据绑定到一个 json 对象中， 并通过 put 提交，最后后端接收数据，并完成相应员工信息的更新。 核心代码：

public ResponseDTO edit(Staff staff) { 
    if (updateById(staff)) { 
        return Response.success(); 
    } 
    return Response.error(); 
}

流程： 员工填写的信息会通过 el-form 组件的 data 属性，