这次我们来看一个基于 Vue 和 Spring Boot 的前后端分离人事管理系统。对于正在寻找 Java 毕业设计、JavaWeb 开发实战项目或是需要完成期末作业的同学来说一个结构清晰、功能完整且附带源码和文档的项目无疑是极具价值的。这个项目不仅涵盖了企业人事管理的核心业务流程更采用了当前主流的开发架构是学习现代 Web 开发技术栈的绝佳范本。项目的核心价值在于其“开箱即用”的特性。它提供了完整的源代码、数据库脚本以及相关文档这意味着你可以直接部署运行快速了解一个企业级应用从数据库设计到前后端交互的全貌。本文将带你从零开始完成这个人事管理系统的环境搭建、项目启动、功能验证以及核心代码的解读。无论你是想学习 Vue 和 Spring Boot 的整合还是需要借鉴其设计思路来完成自己的作业或项目这篇文章都能提供一条清晰的路径。1. 核心能力速览在深入细节之前我们先通过一个表格快速了解这个项目的关键信息判断它是否符合你的需求。能力项说明项目类型前后端分离的 Web 应用毕业设计/学习项目技术栈前端Vue.js Element UI后端Spring Boot MyBatis-Plus数据库MySQL核心功能员工信息管理、部门管理、考勤统计、薪资管理、招聘管理等基础人事模块部署方式需分别启动后端 Spring Boot 服务和前端 Vue 开发服务器硬件门槛无特殊要求普通开发机即可运行需安装 JDK, Node.js, MySQL适合场景Java/Vue 初学者实战、毕业设计/期末作业参考、微人事系统原型开发源码完整性提供完整的前后端源码、SQL 数据库文件及基础文档2. 适用场景与使用边界这个人事管理系统源码主要适用于以下几类人群和场景在校学生毕业设计/期末作业这是最核心的适用人群。项目提供了从需求分析、技术选型到代码实现的完整案例你可以直接运行、修改、扩展快速完成自己的作业或设计。重点学习其如何将业务需求转化为数据库表和接口设计。Java/前端初学者对于正在学习 Spring Boot 或 Vue 的开发者这是一个非常好的全栈实战项目。你可以清晰地看到前端如何通过 Axios 调用后端 RESTful API后端如何通过 MyBatis-Plus 操作数据库以及前后端如何协同工作。需要快速搭建原型者如果你需要一个小型的人事管理模块来验证想法或作为更大系统的一部分此项目的代码结构清晰模块划分明确可以方便地抽取所需功能进行集成。使用边界与注意事项非生产级应用作为学习项目和毕业设计其代码在安全性如更细粒度的权限控制、SQL注入防护、性能优化如缓存、数据库连接池调优、高并发处理等方面可能未做深入考虑不建议直接用于正式的生产环境。版权与合规源码可用于学习和研究。若在修改后用于课程作业或毕业设计请遵守学校的学术规范理解代码逻辑并进行必要的个性化修改避免直接抄袭。如果用于商业用途需进行全面的代码审计、安全加固和功能扩展。功能范围它实现了人事管理的基础核心功能但更复杂的功能如复杂的绩效考核流程、智能排班、与第三方系统的集成等需要自行扩展开发。3. 环境准备与前置条件要成功运行此项目你的开发环境需要满足以下基础条件。请务必在开始前逐一检查。Java 开发环境JDK版本 1.8 或更高推荐 JDK 8, 11, 17。这是运行 Spring Boot 后端的基础。验证命令打开终端或命令提示符输入java -version和javac -version确认版本信息正确输出。Node.js 与 npmNode.js版本 14.x 或更高推荐 LTS 版本。这是运行 Vue 前端项目和打包工具的基础。npm通常随 Node.js 安装。用于安装前端依赖。验证命令在终端输入node -v和npm -v。数据库MySQL版本 5.7 或 8.0。你需要提前安装并启动 MySQL 服务。数据库管理工具推荐使用 Navicat、MySQL Workbench 或任何你熟悉的客户端用于执行 SQL 脚本和查看数据。开发工具IDE后端IntelliJ IDEA推荐、Eclipse 或 VS Code需安装 Java 插件。前端VS Code推荐、WebStorm 或 HBuilderX。项目管理Maven用于后端依赖管理IDEA 已内置。网络与端口确保本地环境无特殊网络限制。检查常用端口是否被占用如后端默认的8080前端开发服务器的8081或3000。如有冲突后续启动时需要修改配置。4. 项目结构与源码导入通常此类前后端分离项目的源码包会包含两个主要目录一个后端backend或类似名称和一个前端frontend或web。在开始部署前我们先理清结构。解压源码将下载的源码压缩包解压到一个干净的目录例如D:\Projects\hr-system。查看目录结构hr-system/ ├── 文档/ # 可能包含需求说明书、部署文档等 ├── 数据库脚本/ # 最重要的文件通常为 hr_system.sql ├── 后端代码/ # Spring Boot 项目目录 │ ├── src/ │ ├── pom.xml # Maven 项目对象模型文件 │ └── application.yml # 或 application.properties配置文件 └── 前端代码/ # Vue 项目目录 ├── public/ ├── src/ ├── package.json # 前端依赖声明文件 └── vue.config.js # Vue 项目配置文件导入后端项目到 IDEA打开 IntelliJ IDEA选择File-Open导航到后端代码目录选中pom.xml文件所在目录或直接选中pom.xml点击Open。IDEA 会自动识别为 Maven 项目并开始下载依赖右下角有进度条。等待依赖下载完成这个过程取决于网络速度。打开前端项目到 VS Code打开 VS Code选择File-Open Folder导航到前端代码目录并打开。5. 数据库初始化与后端配置这是让系统“活”起来的关键一步。5.1 创建数据库并导入数据启动你的 MySQL 服务。使用数据库客户端如 Navicat连接 MySQL。新建一个数据库字符集建议设置为utf8mb4排序规则为utf8mb4_general_ci。数据库名可以自定义例如hr_system。在新建的数据库上右键选择“运行 SQL 文件”。浏览并选择源码包中的数据库脚本/hr_system.sql文件点击“开始”执行。脚本会创建所有必要的表结构并可能插入一些初始测试数据。执行完毕后刷新数据库你应该能看到一系列以hr_或类似前缀开头的表。5.2 配置后端数据库连接后端项目需要通过配置文件连接到刚创建的数据库。在 IDEA 中找到后端项目的配置文件通常是src/main/resources/application.yml或application.properties。打开配置文件找到关于数据库连接的部分进行修改。以下是一个application.yml格式的示例spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver # 修改为你自己的数据库连接信息 url: jdbc:mysql://localhost:3306/hr_system?useUnicodetruecharacterEncodingutf-8useSSLfalseserverTimezoneAsia/Shanghai username: root # 你的数据库用户名 password: 123456 # 你的数据库密码 # 可选在控制台打印SQL语句方便调试 jpa: show-sql: true请务必将url中的数据库名hr_system、username和password替换为你实际的环境信息。6. 启动后端 Spring Boot 服务配置完成后就可以启动后端了。在 IDEA 中找到项目的主启动类。通常它被命名为*Application.java例如HrSystemApplication.java并且类上会有SpringBootApplication注解。右键点击这个类选择Run ‘HrSystemApplication.main()‘。观察 IDEA 的运行控制台。如果启动成功你将看到类似以下的日志. ____ _ __ _ _ /\\ / ____ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | _ | _| | _ \/ _ | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) |____| .__|_| |_|_| |_\__, | / / / / |_||___//_/_/_/ :: Spring Boot :: (v2.x.x) ... (初始化日志) Started HrSystemApplication in 5.234 seconds (JVM running for 6.112)特别注意最后一行Started ...这表示后端服务已成功启动。默认情况下Spring Boot 应用运行在http://localhost:8080。你可以打开浏览器访问http://localhost:8080。如果返回一个空白页或简单的错误页如 Whitelabel Error Page这通常是正常的因为后端是纯 API 服务没有提供前端页面。更直接的验证方式是访问一个健康检查接口或 Swagger 文档如果项目集成了的话例如尝试访问http://localhost:8080/doc.html如果用了 Knife4j或http://localhost:8080/swagger-ui.html。7. 安装前端依赖并启动 Vue 项目后端服务在后台运行后我们再来启动前端。在 VS Code 中打开终端Terminal-New Terminal。确保终端当前路径在前端项目根目录下。安装项目依赖这是必须的一步Vue 项目需要node_modules。在终端中运行npm install # 或者使用淘宝镜像加速 # npm install --registryhttps://registry.npmmirror.com这个过程会下载所有依赖包需要一些时间。当出现added xxx packages且没有大量红色ERROR时表示安装成功。配置前端代理关键步骤前端开发服务器需要知道后端 API 的地址。这通常在vue.config.js文件中配置。找到并打开这个文件内容可能类似module.exports { devServer: { port: 8081, // 前端开发服务器端口可改 proxy: { /api: { // 所有以 /api 开头的请求都会被代理 target: http://localhost:8080, // 后端服务地址 changeOrigin: true, pathRewrite: { ^/api: // 重写路径去掉 /api 前缀根据后端实际接口路径调整 } } } } }请确认target的地址和端口与你的后端服务一致。pathRewrite规则需要根据后端接口的实际前缀来调整。如果后端接口本身就是http://localhost:8080/api/xxx那么这里可能不需要重写。启动前端开发服务器在终端中运行npm run serve # 或者有些项目配置是 npm run dev成功启动后终端会输出类似信息App running at: - Local: http://localhost:8081/ - Network: http://192.168.x.x:8081/打开浏览器访问http://localhost:8081端口以实际输出为准。你应该能看到人事管理系统的登录界面。8. 功能测试与效果验证成功访问登录页后我们就可以开始验证系统的核心功能了。通常系统会提供默认的测试账号。登录验证在登录页尝试使用常见的默认账号登录如admin/123456。具体账号密码请查阅项目文档或数据库中的用户表如sys_user或hr_user。登录成功后应跳转到系统主页面或仪表盘。核心模块功能遍历 登录后侧边栏或顶部导航应包含主要功能菜单。请逐一点击测试观察页面是否能正常加载数据是否能正确显示和操作。重点测试以下典型模块员工管理查看员工列表、添加新员工、编辑/删除员工信息、搜索筛选。部门管理查看部门树形结构、新增/编辑部门。考勤管理查看考勤记录、录入或模拟考勤数据。薪资管理查看薪资列表、可能包含薪资项设置和计算功能。招聘管理查看职位列表、应聘者信息等。系统管理用户管理、角色管理、菜单权限管理如果具备。数据操作测试增在任意管理模块如员工管理点击“新增”按钮填写表单并提交。观察页面提示成功/失败并刷新列表查看新数据是否出现。删选中一条测试数据点击“删除”确认删除后列表更新。改点击一条数据的“编辑”修改信息后保存。查使用搜索框输入关键字测试筛选功能是否正常。前后端联调观察打开浏览器的开发者工具F12切换到Network网络标签页。在页面上进行任何操作如点击查询、新增在Network中会看到发出的 HTTP 请求。检查请求的Status是否为200成功并可以查看请求的Payload参数和Response后端返回的数据。这是理解前后端交互最直观的方式。9. 接口 API 与二次开发指引作为开发者理解系统的 API 设计是进行二次开发或学习的关键。接口文档如果项目集成了 Swagger 或 Knife4j在启动后端后直接访问http://localhost:8080/doc.html或http://localhost:8080/swagger-ui.html这里会列出所有可用的 RESTful API并可以直接在线测试。API 调用示例以“获取员工列表”为例一个典型的调用流程如下。前端 Vue 组件中的代码片段// 在 Vue 组件的 methods 中 async fetchEmployeeList() { try { // 使用 axios 发起 GET 请求/api/employee 会被代理到后端 const response await this.$axios.get(/api/employee, { params: { // 查询参数 pageNum: this.currentPage, pageSize: this.pageSize, name: this.searchName } }); if (response.data.code 200) { // 假设后端统一返回格式 this.employeeList response.data.data.records; this.total response.data.data.total; } else { this.$message.error(response.data.msg); } } catch (error) { console.error(获取员工列表失败:, error); this.$message.error(网络请求失败); } },后端 Spring Boot Controller 示例RestController RequestMapping(/api/employee) public class EmployeeController { Autowired private EmployeeService employeeService; GetMapping public Result getEmployeePage(RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String name) { PageEmployee page new Page(pageNum, pageSize); LambdaQueryWrapperEmployee wrapper new LambdaQueryWrapper(); if (StringUtils.isNotBlank(name)) { wrapper.like(Employee::getName, name); } PageEmployee employeePage employeeService.page(page, wrapper); return Result.success(employeePage); } // 其他接口POST新增PUT更新DELETE删除... }如何进行二次开发新增一个模块① 在数据库设计新表。② 使用 MyBatis-Plus 的代码生成器如果项目有或手动创建对应的Entity、Mapper、Service、ServiceImpl、Controller。③ 在前端src/views/下新建 Vue 组件配置路由编写页面和调用 API 的逻辑。修改现有功能直接在前端对应组件和后端对应 Controller/Service 中修改业务逻辑即可。10. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供排查思路。问题现象可能原因排查方式解决方案后端启动失败端口冲突本地 8080 端口被其他程序占用控制台日志会明确报错Port 8080 was already in use1. 关闭占用 8080 端口的进程。2. 在application.yml中修改server.port为其他端口如8082。前端npm install失败网络问题或 Node.js 版本不兼容查看终端报错信息常见有network timeout,unable to resolve dependency或incompatible1. 使用淘宝镜像npm config set registry https://registry.npmmirror.com。2. 检查 Node.js 版本尝试升级或降级到稳定 LTS 版本。3. 删除node_modules和package-lock.json重试npm install。前端npm run serve失败依赖未安装或脚本配置错误终端报错command not found: vue-cli-service等1. 确保已成功执行npm install。2. 检查package.json中scripts里是否有serve: vue-cli-service serve。能打开前端页面但登录/加载数据失败前后端连接问题或 API 路径错误打开浏览器开发者工具Network标签查看请求状态码和响应内容1. 状态码 404检查前端vue.config.js中的proxy配置确保target正确且后端服务正在运行。2. 状态码 500查看后端控制台日志通常是后端代码报错如 SQL 异常。登录失败提示用户名密码错误数据库中没有对应的用户数据1. 确认数据库初始化脚本已执行。2. 直接在数据库用户表中查询默认账号密码。1. 重新执行 SQL 脚本。2. 手动在数据库用户表中插入一条测试用户数据注意密码加密方式通常为 BCrypt。页面样式错乱或 JS 错误前端依赖版本问题或浏览器兼容性浏览器控制台Console标签页会有红色错误信息1. 尝试使用 Chrome 最新版。2. 清除浏览器缓存并硬刷新CtrlF5。3. 检查是否按步骤安装了所有前端依赖。11. 项目优化与扩展建议在成功运行基础版本后如果你希望将其提升到一个更高的水平可以考虑以下方向安全性加固密码加密确保所有密码使用 BCrypt 等强哈希算法加密存储而非明文。接口鉴权使用 JWT (JSON Web Token) 或 Spring Security 实现更完善的登录状态维持和接口权限控制替代简单的 Session 或简单拦截器。SQL 注入防护坚持使用 MyBatis-Plus 的 Wrapper 或#{}预编译避免字符串拼接 SQL。XSS 防护对用户输入进行转义或过滤或使用前端框架如 Vue的默认文本绑定避免v-html的不当使用。性能与体验优化后端缓存对不常变的数据如部门信息、枚举字典使用 Redis 或 Caffeine 进行缓存。数据库优化为常用查询字段添加索引优化复杂 SQL。前端优化组件按需加载、图片等资源压缩、使用 Webpack 进行代码分割。分页查询确保所有列表接口都支持分页避免一次性加载海量数据。功能扩展文件上传增加员工头像、证件附件上传功能集成 OSS对象存储服务。数据导出集成 EasyExcel 或 POI支持将员工列表、考勤报表导出为 Excel。工作流集成对于请假、报销等审批流程可以集成 Activiti 或 Flowable 工作流引擎。仪表盘使用 ECharts 等图表库在首页展示员工统计、考勤趋势等可视化数据。这个基于 Vue 和 Spring Boot 的人事管理系统项目提供了一个非常标准的现代 Web 应用开发样板。从环境搭建到功能验证的完整流程清晰地展示了一个全栈项目是如何运作的。对于学习者而言最大的收获不是仅仅让项目跑起来而是通过阅读和调试源码理解每一行代码背后的设计意图掌握前后端分离架构下数据流转的每一个环节。建议你在成功运行后尝试修改一个现有功能或增加一个简单的新模块这比单纯阅读十篇理论文章都更有价值。