SpringBoot+Vue.js人事管理系统开发实践

1. 项目概述

作为一名长期从事企业级应用开发的工程师，我最近完成了一个前后端分离的人事管理系统项目。这个系统采用了SpringBoot+Vue.js+MyBatis+MySQL的技术栈，实现了员工信息管理、考勤记录、薪资计算等核心功能。在实际开发过程中，我发现这种架构组合特别适合中小型企业的人事管理需求，既能保证系统的稳定性，又能提供良好的用户体验。

这个系统最显著的特点是采用了前后端完全分离的架构模式。前端使用Vue.js构建单页面应用，后端采用SpringBoot提供RESTful API接口，两者通过HTTP协议进行通信。这种架构使得前后端开发可以完全解耦，开发人员可以专注于各自的领域，大大提高了开发效率。

2. 技术选型与架构设计

2.1 后端技术栈

后端我们选择了SpringBoot作为基础框架，主要基于以下几个考虑：

1. 快速开发：SpringBoot的自动配置和起步依赖大大简化了项目搭建过程
2. 生态丰富：Spring生态提供了完善的安全、事务、缓存等解决方案
3. 易于扩展：可以方便地集成各种中间件和第三方服务

数据持久层我们选择了MyBatis，而不是JPA，主要因为：

• 需要编写复杂的SQL查询（如薪资统计报表）
• 对SQL有精细控制的需求
• 已有数据库设计较为复杂

提示：在实际项目中，如果业务逻辑相对简单，可以考虑使用JPA来进一步简化开发。

2.2 前端技术栈

前端采用Vue.js 3.x版本，主要优势在于：

1. 响应式编程：数据驱动视图，开发效率高
2. 组件化开发：便于复用和维护
3. 丰富的生态系统：Vue Router、Vuex、Element Plus等配套工具完善

我们特别使用了Element Plus作为UI组件库，它提供了丰富的现成组件，可以快速构建出专业的管理系统界面。

2.3 数据库设计

数据库采用MySQL 8.0，主要表结构如下：

2.3.1 员工信息表(employee)

sql复制CREATE TABLE `employee` (
  `emp_id` varchar(20) NOT NULL COMMENT '员工编号',
  `emp_name` varchar(50) NOT NULL COMMENT '员工姓名',
  `emp_gender` char(1) DEFAULT NULL COMMENT '性别(M/F)',
  `emp_birth` date DEFAULT NULL COMMENT '出生日期',
  `emp_phone` varchar(20) NOT NULL COMMENT '联系电话',
  `emp_email` varchar(50) DEFAULT NULL COMMENT '电子邮箱',
  `emp_position` varchar(50) NOT NULL COMMENT '职位',
  `emp_dept` varchar(50) NOT NULL COMMENT '所属部门',
  `emp_hire_date` date NOT NULL COMMENT '入职日期',
  `emp_status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '在职状态(0离职/1在职)',
  PRIMARY KEY (`emp_id`),
  KEY `idx_dept` (`emp_dept`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='员工基本信息表';

2.3.2 考勤记录表(attendance)

sql复制CREATE TABLE `attendance` (
  `attend_id` bigint NOT NULL AUTO_INCREMENT COMMENT '考勤记录ID',
  `emp_id` varchar(20) NOT NULL COMMENT '员工编号',
  `attend_date` date NOT NULL COMMENT '考勤日期',
  `check_in` datetime DEFAULT NULL COMMENT '上班打卡时间',
  `check_out` datetime DEFAULT NULL COMMENT '下班打卡时间',
  `attend_status` tinyint(1) NOT NULL DEFAULT '0' COMMENT '考勤状态(0正常/1迟到/2早退)',
  `attend_remark` varchar(100) DEFAULT NULL COMMENT '备注信息',
  PRIMARY KEY (`attend_id`),
  KEY `idx_emp_date` (`emp_id`,`attend_date`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='员工考勤记录表';

2.3.3 薪资记录表(salary)

sql复制CREATE TABLE `salary` (
  `salary_id` bigint NOT NULL AUTO_INCREMENT COMMENT '薪资记录ID',
  `emp_id` varchar(20) NOT NULL COMMENT '员工编号',
  `salary_month` varchar(10) NOT NULL COMMENT '薪资月份(YYYY-MM)',
  `base_salary` decimal(10,2) NOT NULL COMMENT '基本工资',
  `bonus` decimal(10,2) DEFAULT '0.00' COMMENT '奖金',
  `deduction` decimal(10,2) DEFAULT '0.00' COMMENT '扣款',
  `tax` decimal(10,2) DEFAULT '0.00' COMMENT '税款',
  `net_salary` decimal(10,2) NOT NULL COMMENT '实发工资',
  `salary_status` tinyint(1) NOT NULL DEFAULT '0' COMMENT '发放状态(0未发放/1已发放)',
  PRIMARY KEY (`salary_id`),
  KEY `idx_emp_month` (`emp_id`,`salary_month`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='员工薪资记录表';

3. 核心功能实现

3.1 员工管理模块

员工管理模块实现了员工信息的CRUD操作，以及部门分配、职位调整等功能。后端接口设计遵循RESTful规范：

code复制GET    /api/employees      - 获取员工列表
POST   /api/employees      - 添加新员工
GET    /api/employees/{id} - 获取单个员工详情
PUT    /api/employees/{id} - 更新员工信息
DELETE /api/employees/{id} - 删除员工

前端使用Vue.js和Element Plus实现