基于SpringBoot和Vue实现档案人事系统全栈开发指南

一、开发环境准备

在开始编码之前，请确保本地开发环境已经安装了以下核心工具，并且版本符合要求，避免因版本过低导致兼容性问题：

• JDK 17+：后端运行环境，推荐使用Oracle JDK或OpenJDK 17版本。
• Node.js 16+：前端运行环境，建议使用LTS版本。
• Maven 3.6+：Java项目依赖管理工具。
• MySQL 8.0+：关系型数据库，用于存储档案数据。
• IntelliJ IDEA：推荐的后端开发IDE。
• VS Code：推荐的前端开发IDE。

二、数据库设计与初始化

首先我们需要设计一张简单的员工档案表employee，包含基础的人事信息字段。请在MySQL客户端执行以下SQL脚本，完成数据库和表的创建：

```sql CREATE DATABASE IF NOT EXISTS hr_system DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE hr_system; CREATE TABLE IF NOT EXISTS employee ( id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID', employee_no VARCHAR(20) NOT NULL UNIQUE COMMENT '员工工号', name VARCHAR(50) NOT NULL COMMENT '姓名', department VARCHAR(50) NOT NULL COMMENT '部门', position VARCHAR(50) NOT NULL COMMENT '职位', entry_date DATE COMMENT '入职日期', status TINYINT DEFAULT 1 COMMENT '状态：1-在职，0-离职', create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='员工档案表'; ```

三、后端服务搭建

后端采用Spring Boot框架，结合MyBatis-Plus作为ORM框架，以实现快速开发。

1. 项目依赖配置 (pom.xml)

创建一个Maven项目，在pom.xml中引入必要的依赖。这里使用MyBatis-Plus可以极大减少CRUD代码的编写量：

```xml org.springframework.boot spring-boot-starter-web com.mysql mysql-connector-j runtime com.baomidou mybatis-plus-boot-starter 3.5.3.1 org.projectlombok lombok true ```

2. 数据源配置

在src/main/resources/application.yml中配置数据库连接信息。请根据本地MySQL的实际密码修改password字段：

```yaml server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/hr_system?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false username: root password: your_password mybatis-plus: configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted logic-delete-value: 1 logic-not-delete-value: 0 ```

3. 实体类创建

在com.example.hr.entity包下创建Employee类，使用Lombok注解简化Getter/Setter/Constructor的编写：

```java package com.example.hr.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import lombok.Data; import java.time.LocalDate; import java.time.LocalDateTime; @Data public class Employee { @TableId(type = IdType.AUTO) private Long id; private String employeeNo; private String name; private String department; private String position; private LocalDate entryDate; private Integer status; private LocalDateTime createTime; private LocalDateTime updateTime; } ```

4. 持久层与业务层

创建Mapper接口和Service接口。由于使用了MyBatis-Plus，只需继承基类即可自动拥有基础CRUD功能。

Mapper接口 (com.example.hr.mapper.EmployeeMapper)：

```java package com.example.hr.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.example.hr.entity.Employee; import org.apache.ibatis.annotations.Mapper; @Mapper public interface EmployeeMapper extends BaseMapper { } ```

Service接口 (com.example.hr.service.EmployeeService)：

```java package com.example.hr.service; import com.baomidou.mybatisplus.extension.service.IService; import com.example.hr.entity.Employee; public interface EmployeeService extends IService { } ```

Service实现类 (com.example.hr.service.impl.EmployeeServiceImpl)：

```java package com.example.hr.service.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.example.hr.entity.Employee; import com.example.hr.mapper.EmployeeMapper; import com.example.hr.service.EmployeeService; import org.springframework.stereotype.Service; @Service public class EmployeeServiceImpl extends ServiceImpl implements EmployeeService { } ```

5. 控制层接口实现

在com.example.hr.controller包下创建EmployeeController，编写对外暴露的RESTful API接口。为了解决跨域问题，添加@CrossOrigin注解：

```java package com.example.hr.controller; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.hr.entity.Employee; import com.example.hr.service.EmployeeService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.; import java.util.List; @RestController @RequestMapping("/api/employees") @CrossOrigin(origins = "") public class EmployeeController { @Autowired private EmployeeService employeeService; @GetMapping public List list() { return employeeService.list(); } @PostMapping public boolean save(@RequestBody Employee employee) { return employeeService.saveOrUpdate(employee); } @DeleteMapping("/{id}") public boolean delete(@PathVariable Long id) { return employeeService.removeById(id); } } ```

四、前端页面开发

前端使用Vue 3配合Element Plus组件库，实现数据的展示、新增和删除功能。

1. 项目初始化与依赖安装

打开终端，执行以下命令创建Vue项目并安装必要的依赖包：

```bash npm create vite@latest hr-frontend -- --template vue cd hr-frontend npm install npm install element-plus axios ```

2. 全局配置与请求封装

在src/main.js中引入Element Plus样式和组件库，并配置全局属性：

```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('app') ```

3. 核心业务页面实现

直接修改src/App.vue，编写完整的业务逻辑。这里我们将实现一个包含表格、分页、新增/编辑弹窗的完整页面：

```vue ```

五、运行与测试

至此，所有代码已经编写完毕。现在分别启动后端服务和前端页面进行测试。

1. 启动后端服务

在IntelliJ IDEA中找到包含main方法的启动类（通常带有@SpringBootApplication注解），运行该类。观察控制台输出，确认Tomcat在8080端口启动成功，且数据库连接无异常。

2. 启动前端服务

在终端进入前端项目目录hr-frontend，执行以下命令启动开发服务器：

```bash npm run dev ```

终端会输出一个本地访问地址，通常是http://localhost:5173。在浏览器中打开该地址，你将看到一个包含员工列表的页面。点击“新增员工”按钮，填写表单并提交，数据将实时保存到MySQL数据库中，并在表格中刷新显示。点击“删除”或“编辑”按钮，也能正常操作数据。