基于Spring Boot与Vue的企业员工资料管理系统设计与实现

技术说明：本文围绕《基于Spring Boot与Vue的企业员工资料管理系统设计与实现》进行技术和设计过程整理，重点关注需求分析、系统架构、数据建模、功能实现和测试验证等内容。内容用于软件工程和信息系统设计复盘，不涉及商业推广或服务宣传。

摘 要

随着企业规模的扩大，企业人数由三十人编制增长至上百人，近些年来由于企业规模小，人工容易管理，使用传统的管理方式成本低且好用，但由于企业规模扩大，使用纸质档案的管理模式在员工资料信息管理中存在效率低、易出错、安全性差等问题。本文以北菱企业为研究对象，设计并实现了一个企业员工资料管理系统，系统基于Vue.js前端框架、Spring Boot 后端框架和 MySQL 数据库以及加入Element UI、Mybaits等加速开发进度的组件。该系统使用了前后端分离架构和后端的三层架构模式，实现了员工的信息管理、部门管理、请假申请管理、考勤记录管理、激励信息管理、薪资信息管理等功能模块。通过简单易懂的操作和将重要数据的输入限制规范格式，显著地提升了企业人力资源管理效率，结合权限分级与MD5加密，保障了敏感信息的安全性。同时，系统内置统计分析功能，为系统管理员提供考勤数据支持。

最终测试结果可以看出该系统运行稳定、响应速度快、操作简单易上手，能够使用较低的成本来满足企业对员工资料管理的核心需求。

关键词：信息化管理；数据安全；人力资源管理；前后端分离架构

ABSTRACT

As the scale of the enterprise expands, the number of employees has grown from a staff of thirty to over a hundred. In recent years, due to the small scale of the enterprise, traditional management methods have been cost-effective and easy to use. However, as the enterprise grows, the management of employee information using paper-based archives has become inefficient, error-prone, and insecure. This paper takes Beiling Enterprise as the research object and designs and implements an enterprise employee information management system. The system is based on the Vue.js front-end framework, Spring Boot back-end framework, and MySQL database, and incorporates components such as Element UI and MyBatis to accelerate the development process. The system adopts a front-end and back-end separation architecture and a three-tier architecture for the back-end, and realizes functional modules such as employee information management, department management, leave application management, attendance record management, incentive information management, and salary information management. Through simple and intuitive operations and restricting the input of important data to a standardized format, the system significantly improves the efficiency of enterprise human resource management. Combined with permission levels and MD5 encryption, it ensures the security of sensitive information. Additionally, the system has built-in statistical analysis functions to provide attendance data support for system administrators.

The final test results show that the system operates stably, has a fast response speed, and is easy to use. It can meet the core needs of enterprises for employee information management at a relatively low cost.

Key words：Information Management; Data Security; Human Resource Management; Front-end and Back-end Separation Architecture

第1章 绪论

1.1 研究背景

随着科技的发展，代码水平也在不断提高，本文根据人力资源管理领域结合互联网，开发出一套简易的企业员工信息管理系统。当前企业环境较为紧张，负责人力资源的员工不仅需要负责员工的信息管理，还需要兼职处理一些企业琐事，尽管现代科技水平不断进步，大量企业在管理实践中仍面临传统治理模式与互联网高新技术高额的成本。以纸质文档和固定地点存储的传统管理方式，普遍存在着信息更新的延迟、员工需求问题的处理效率低下、离职员工信息易缺失等缺陷，这在员工基数较大的企业中尤为突出，本文以百人企业的视角提供目前需求的解决方案。

现有的解决方案市场呈现明显的供需错配现象。主流的商业软件虽在基础功能覆盖度上具有优势，但其刚性架构设计与实际应用场景之间仍存在显著落差。企业用户调研表明，当前系统普遍面临功能扩展弹性不足、异构系统集成度有限、隐私保护机制不完善、多终端适配能力欠缺等共性问题。特别是对于成长型企业而言，技术选型常陷入成本控制与系统可持续性之间的两难困境，部分采用传统技术架构的解决方案已显现出明显的性能衰减与运维压力。

目前新一代信息技术集群式突破正在重构软件开发范式，现代化前端框架、分布式架构技术、智能数据引擎等创新成果的商业化应用日趋成熟，这为构建兼顾合规安全与弹性扩展的思路提供了全新可能性。

1.2 研究意义

本研究通过整合渐进式前端框架、后端功能模块化与关系型数据库技术，熟悉了轻量级全栈开发模式在企业级应用中的实践路径。相较于传统教学案例中落后的技术演示，本课题构建了贯通需求分析、架构设计到系统落地的完整实践闭环。

在技术实践层面采用前后端分离架构有效平衡了系统可维护性与开发效率。前端框架通过声明式编程范式与组件的使用，显著降低交互界面开发复杂度；后端运用注解驱动开发模式，实现业务逻辑的快速开发；关系型数据库配合事务管理机制，确保核心业务数据的完整性。这种技术组合既保持了开源技术栈的低成本优势，又通过模块化设计预留了功能扩展空间。

在应用价值层面，研究成长型企业的管理痛点验证解决方案有效性。通过业务流程半自动化，显著缩短关键业务流程处理时长；采用分层加密与权限控制，构建符合基础安全规范的数据防护体系。本系统实施可有效控制人为操作误差，提升管理决策的数据支撑质量。

本课题设计突破了分段式技术教学的局限性。通过模拟真实项目开发场景，使员工完整经历接口规范制定、性能优化等工程化实践环节，尝试接触了前端状态管理、RESTful API设计、数据库索引优化等典型技术痛点。这种全链路开发训练有效弥合了课堂教学与企业需求之间的能力鸿沟。

1.3 研究现状

1.3.1 国外研究现状

国外同类系统的研究与技术实践呈现差异化特征：

技术选型更倾向于全栈JavaScript（Node.js + React或Next.js）+ NoSQL数据库（MongoDB），注重开发效率与云原生适配。

功能创新性强调智能化与扩展性，如集成机器学习算法预测员工离职风险，或通过区块链技术实现不可篡改的考勤记录。

安全与合规严格遵循 GDPR、HIPAA 等法规，普遍采用 bcrypt 加密算法，并结合 OAuth 2.0 实现第三方授权登录。部分研究引入零信任架构（Zero Trust）保障分布式环境下的数据安全。

1.3.2 国内研究现状

国内企业员工管理系统的研究与实践主要呈现以下特点：

技术选型以 Java 技术栈Spring Boot+ Vue前端 + MySQL 为主流方案，强调快速开发与低成本部署。

功能侧重点聚焦基础功能实现。研究多围绕如何通过开源技术满足中小企业的基本需求，对高并发、分布式架构的探索较少。

安全性设计普遍采用 MD5 加密存储密码，部分研究结合 Spring Security 实现角色权限管理，但高级安全机制应用不足。

第2章 关键技术

2.1 JAVA语言

Java是一种面向对象的、跨平台的编程语言，一经推出就凭借“一次编写，到处运行”的理念，成为企业级应用开发的核心语言。其核心特性包括：

强类型与健壮性：严格的类型检查与异常处理机制，减少运行时错误；

内存自动管理：通过垃圾回收机制自动释放内存，降低开发复杂度；

多线程支持：内置线程模型与并发工具包，支持高并发场景；

丰富的生态系统：拥有 Spring全家桶等成熟框架，覆盖 Web 开发、数据访问、微服务等领域。

在本系统中作为后端开发的核心语言，Java 承担业务逻辑处理、数据持久化、功能接口等任务，结合 Spring 生态实现高效开发。例如，通过mybatis批量导入优化考勤数据的批量导入效率。

2.2 SpringBoot

Spring Boot 是 Spring 生态中用于简化配置、快速构建独立应用的框架，其核心优势包括：

自动配置：根据项目依赖自动生成默认配置，减少XML或注解的手动编写；

起步依赖：通过 Maven依赖封装，一键集成 Web开发所需组件；

内嵌容器：默认集成 Tomcat，支持直接打包为可执行JAR文件；

监控与管理：通过 Actuator 模块提供健康检查、性能监控等运维功能。

在本系统中作为后端服务的基础框架，Spring Boot 快速集成了 Spring MVC、Spring Data JPA、Spring Security等模块。例如，通过@RestController注解快速定义员工信息查询接口，利用 application.yml 统一管理数据库连接配置。

2.3 Mysql数据库

MySQL是关系型数据库，广泛应用于Web应用，其核心优势包括：

ACID事务支持：通过 InnoDB引擎保障原子性、一致性、隔离性、持久性；

高性能索引：支持 B+ 树、哈希索引，优化查询效率；

主从复制与分库分表：通过读写分离、水平分表应对高并发场景；

兼容性与扩展性：支持 SQL 标准，提供存储过程、触发器等高级功能。

在本系统中的应用作为系统的核心数据存储层，MySQL 用于存储员工基本信息、考勤记录、薪资明细等结构化数据。

2.4 Vue.js

Vue.js 是一套渐进式前端框架，其核心设计理念包括：

响应式数据绑定：通过 Object.defineProperty 或 Proxy 实现数据与视图的自动同步；

组件化开发：将页面拆分为可复用的组件（如员工信息卡片、考勤统计），提升代码可维护性；

虚拟 DOM：通过 Diff 算法最小化真实 DOM 操作，优化渲染性能；

生态系统集成：支持 Vue Router、Vuex、Axios等扩展库。

在本系统中作为前端开发的核心框架，Vue 实现了员工管理系统的用户界面。例如：通过 Vue Router 实现页面无刷新跳转（如从员工列表页跳转到详情页）；利用 Element UI 组件库快速构建表格、表单、弹窗等交互元素；结合 Axios 调用后端 RESTful API，实现前后端数据交互。

第3章 需求分析

3.1 可行性分析

3.1.1 经济可行性

从经济可行性维度分析，本研究采用的技术架构深度融入主流开源技术生态，构建起边际成本可控的轻量化部署方案。系统建设成本集中体现在技术投入层面，硬件基础设施仅需适配常规计算资源需求。相较于传统商业软件的授权费用和定制化开发成本，这种技术路径使中小企业在数字化转型初期即可实现高性价比的收效。

从价值创造视角审视，员工管理系统的战略价值体现在人力资源运营效能的持续性提升。通过自动化流程，系统有效降低重复性人力投入，将行政专员从枯燥的纸质资料中解放，转而聚焦战略人力资源开发。根据理想预估，系统的实施能够显著压缩管理决策响应周期，同时通过数据治理优化降低合规风险成本。

值得注意的是，系统的模块化设计预留了对接其他接口能力，这种可延展性有效规避了传统解决方案的沉没成本风险，确保信息化投资具备长期保值能力。

3.1.2 技术可行性

在技术实现维度，本研究采用分层架构设计理念，这种理念带来的是解耦式技术体系。前端交互层基于渐进式框架Vue.js实现组件化开发范式；业务逻辑层采用约定优于配置的开发模式，借助自动装配特性实现服务模块的高效编排；数据持久层依托关系型数据库MySQL的事务机制与ACID特性，构建起稳定的数据存储与访问通道。这些技术均为当前主流技术框架且拥有丰富的社区支持和文档资源。此外，系统的开发环境和运行环境均基于开源技术栈，能够在多种服务器上稳定运行。最后，这种架构选择形成了松耦合、高内聚的技术生态，使系统可维护性得到提升。

3.1.3 社会可行性

纸质档案信息化是当前社会发展的重要趋势，企业员工信息管理系统的开发与这一趋势高度契合。该系统能够为管理员和员工提供高效的考勤管理和反馈请假信息，帮助企业更好地存储员工信息，同时为员工提供更便捷的线上请假流程。此外，系统的应用有助于推动部分人力解放，提升办事效率。因此，该系统的开发在社会层面是可行的。

3.2 系统需求分析

3.2.1 管理员的功能需求分析

管理员在系统中有着独立的操作界面，负责员工信息的整体管理和维护。其主要功能包括个人中心、员工管理、部门管理、请假申请管理、考勤记录管理、员工激励管理、薪资信息管理等。管理员的用例如图3.1所示。

图3.1 管理员用例图

3.2.2 员工功能需求分析

员工是主要的系统使用人群，他们可以进行注册、登录、系统首页、请假申请管理、考勤记录管理、员工激励管理、薪资信息管理等操作。员工的用例如图3.2所示。

图3.2 员工用例图

3.3.3性能需求分析

企业员工资料管理系统需要具备一定的稳定性，用来给员工提供一个较为流程的使用体验。为确保系统的稳定运行，有以下解决办法：一是选择经典热门的开发框架和数据库，确保系统有丰富的技术选择；二是勤给系统做备份处理，以防止意外格式化等情况导致数据丢失。

由于系统涉及员工的个人信息，安全性也是系统设计的核心目标。为了保障系统内部资料的安全，可以采用权限管理机制，将管理员和员工的权限进行隔离，确保员工只能访问其权限范围内的功能。系统还需要对如员工身份证、手机号等敏感的数据进行加密存储处理，防止敏感信息被公开。最后系统内部需要有详细的操作日志，便于在出现异常时进行追踪处理，做到在短时间内查明系统异常源头并解决，确保系统始终处于安全状态。

3.4 流程分析

3.4.1 系统开发流程图

在系统开发之前，首先要以员工的视角提出对系统的需求，明确系统的功能。在此基础上，对系统的整体架构和功能模块再进行详细设计（系统代码结构、数据库设计、浏览器界面布局等）。紧接着就是开始搭建开发环境，安装必要的工具和依赖（如JDK、Maven、Node.js、npm、nvm等）为系统的开发做好前期准备，中间每完成一个功能模块，都需要及时对该模块进行测试，最后跑通代码时观察是否有依赖冲突问题，修复问题并看看能否优化。最后，将系统部署到TOMCAT服务器并上线运行，确保用户能够使用。系统开发流程图如图3.3所示。

图3.3 系统开发流程图

3.4.2 登录流程图

登录是系统必不可少的功能，也是区分管理员与员工的操作流程，登录时首先输入账号、密码，系统会验证账号与密码是否正确，如果验证成功，系统会跳转至不同身份权限账号的界面；如果验证失败，系统会跳出弹窗来提示输入的信息有误并提示员工重新输入。流程图见图3.4所示。

图3.4 登录流程图

3.4.3 注册流程图

注册流程是每个新员工必须要走的流程，员工输入完整的注册信息后，系统会进入后端的数据库查询本次注册的新员工用户名是否已存在，如已有该用户名，需员工重新输入用户名；新用户名判断通过后添加员工信息到数据库前会先验证注册信息是否完整、格式是否正确，员工信息出现错误时，提示错误位置并将系统内的流程返回到信息入库前；信息都正确且完整时，系统会将新员工的信息维护进数据库中并跳转至登录页面。该流程如图3.5所示。

图3.5 注册流程图

3.4.4 管理员模块总体流程图

管理员在登录界面输入用户名和密码，点击选择管理员按钮登录，系统在后台进行身份验证。如果验证通过，管理员可进入系统首页；如果验证失败，系统会提示错误信息并要求输入正确信息。登录成功后，管理员可按照需求来选择相应的功能模块进行操作，如员工管理、部门管理、请假申请管理、考勤记录管理、激励信息管理、薪资信息管理等。完成操作后，系统会自动保存修改后的数据，并更新数据库中的相关信息，管理员模块整体流程如图3.6所示。

图3.6 管理员模块整体流程图

当管理员成功登录后可以对员工信息进行管理。管理员可以对员工的信息进行CRUD的操作，每次操作都会在后台验证本次操作是否符合规范、是否操作成功。具体员工管理模块流程图如图3.7所示。

图3.7 员工管理模块流程图

当管理员成功登录后可以对部门信息进行管理。管理员可以对部门信息进行新增，删除，修改的操作，同样的每次操作都会在后台验证本次操作是否成功，若失败则初始化到系统首页的操作界面。具体部门管理模块流程图如图3.8所示。

图3.8 部门管理模块流程图

当管理员成功登录后可以对员工请假信息进行管理。管理员可以对员工请假信息进行CRUD的操作，同样的每次操作都会在后台验证本次操作是否成功。具体员工请假信息模块流程图如图3.9所示。

图3.9 员工请假信息模块流程图

当管理员成功登录后可以对员工考勤信息进行管理。管理员可以对员工考勤信息进行CRUD的操作，同样的每次操作都会在后台验证本次操作是否成功。具体员工考勤信息模块流程图如图3.10所示。

图3.10 员工考勤信息模块流程图

当管理员成功登录后可以对员工激励信息进行操作。管理员可以对员工激励信息进行CRUD的操作，同样的每次操作都会在后台验证本次操作是否成功。具体员工激励信息模块流程图如图3.11所示。

图3.11 员工激励信息模块流程图

（6）当管理员成功登录后可以对员工薪资信息进行管理。管理员可以对员工薪资信息进行CRUD的操作，同样的每次操作都会在后台验证本次操作是否成功。具体员工薪资信息模块流程图如图3.12所示。

图3.12 员工薪资信息模块流程图

（7）当管理员成功登录后可以对个人信息进行操作。管理员可以对个人信息进行修改、查看详情操作，同样的每次操作都会在后台验证本次操作是否成功。具体个人信息模块流程图如图3.13所示。

图3.13 个人信息模块流程图

3.4.5 员工模块总体流程图

员工在登录界面输入用户名和密码，点击员工按钮登录，系统开始进行身份验证。如果验证通过，员工进入系统首页开始正常使用；如果验证失败，系统会提示输入信息有误并提示重新输入。登录成功后，员工可按照需求来选择相应的功能进行操作，如请假申请管理、考勤记录管理、激励信息管理、薪资信息管理等。完成操作后，系统会自动保存修改后的数据，并更新数据库中的相关信息，员工模块整体流程与管理员的模块的功能有细微差别如图3.14、图3.15、图3.16、图3.17、图3.18、图3.19所示。

图3.14 员工模块整体流程图

图3.15 请假申请模块整体流程图

图3.16 考勤模块整体流程图

图3.17 激励信息模块整体流程图

图3.18 薪资信息模块整体流程图

图3.19 个人信息模块整体流程图

第4章 系统设计

4.1 系统设计目标

为了使系统更加稳定，本系统设计一开始就打算使用主流技术框架和RESTful风格的接口开发范式，方便未来系统的升级迭代，即后续可以利用接口直接新增功能。系统的核心功能模块采用分层架构设计，实现业务逻辑、数据存储与用户界面的解耦，通过模块化设计可以预留后续的扩展功能接口，保障系统能够适应企业动态调整需求；在系统信息安全方面建立数据防护体系，包含MD5数据加密、权限隔离机制，结合日志异常提示，实现员工数据的安全管控。

4.2 系统功能详细设计

企业员工资料管理系统按权限分为管理员和员工。通过对企业员工资料管理系统进行分析和总结，该系统实现了登录注册、个人中心、员工管理、部门管理、请假申请管理、考勤信息管理、员工激励管理、薪资信息管理等功能，并对相关的功能进行了操作和分析，让使用者拥有好的体验。图4.1展示管理员和用户的系统功能结构图。

图4.1 员工管理系统的功能结构图

4.3 数据库设计

4.4.1 数据库概念设计

E-R图作为数据库概念设计的核心工具,利用实体、属性及联系三部分来连接业务需求与数据模型，E-R图是从真实系统到数据库系统的数据逻辑设计的重要环节，直观揭示复杂业务场景中的数据逻辑关系，能够将抽象的业务规则转化为可视化的数据结构。因此，本文结合系统设计目标、功能详细设计和E-R图的概念设计，得到了一份实体属性图，根据实体属性图进一步画出局部E-R图，最后整合形成全局E-R图。以下是实体E-R图的详细说明。

请假申请实体E-R图如图4.2所示：

图4.2 请假申请实体E-R图

考勤信息实体E-R图如图4.3所示：

图4.3 考勤信息实体E-R图

激励信息实体E-R图如图4.4所示：

图4.4 激励信息实体E-R图

薪资信息实体E-R图如图4.5所示：

图4.5 薪资信息实体E-R图

全局E-R图如图4.6所示：

图4.6 全局E-R图

4.4.2 数据库物理结构设计

系统的数据库物理逻辑结构设计的数据库表如下：

表4.1：配置文件

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
name	varchar	100	配置参数名称
value	varchar	100	配置参数值

表4.2：用户表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
username	varchar	100	用户名
password	varchar	100	密码
role	varchar	100	角色		管理员
addtime	timestamp		新增时间		CURRENT_TIMESTAMP

表4.3：token表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
userid	bigint		用户id
username	varchar	100	用户名
tablename	varchar	100	表名
role	varchar	100	角色
token	varchar	200	密码
addtime	timestamp		新增时间		CURRENT_TIMESTAMP
expiratedtime	timestamp		过期时间		CURRENT_TIMESTAMP

表4.4：员工信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
yuangongzhanghao	varchar	200	员工账号
mima	varchar	200	密码
yuangongxingming	varchar	200	员工姓名
xingbie	varchar	200	性别
yuangongdianhua	varchar	200	员工电话
touxiang	longtext		头像
bumen	varchar	200	部门

表4.5：部门信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
bumen	varchar	200	部门

表4.6：请假申请

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAM
shenqingbianhao	varchar	200	申请编号
qingjiabiaoti	varchar	200	请假标题
qingjialeixing	varchar	200	请假类型
qingjiatianshu	varchar	200	请假天数
qingjiashijian	datetime		请假时间
qingjiashiyou	longtext		请假事由
yuangongzhanghao	varchar	200	员工账号
yuangongxingming	varchar	200	员工姓名
sfsh	varchar	200	是否审核		待审核
shhf	longtext		审核回复

表4.7：考勤记录

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
chuqinbianhao	varchar	200	出勤编号
chuqinbiaoti	varchar	200	出勤标题
dakashijian	datetime		打卡时间
chuqinzhuangtai	varchar	200	出勤状态
dakabeizhu	longtext		打卡备注
yuangongzhanghao	varchar	200	员工账号
yuangongxingming	varchar	200	员工姓名
bumen	varchar	200	部门
longitude	float		经度
latitude	float		纬度
fulladdress	varchar	200	地址

表4.8：激励信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
jilibianhao	varchar	200	激励编号
jilibiaoti	varchar	200	激励标题
jilileixing	varchar	200	激励类型
fabushijian	datetime		发布时间
zijin	float		资金
jilixiangqing	longtext		激励详情
yuangongzhanghao	varchar	200	员工账号
yuangongxingming	varchar	200	员工姓名
bumen	varchar	200	部门

表4.9：薪资信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
xinzihao	varchar	200	薪资编号
xinzibiaoti	varchar	200	薪资标题
dengjishijian	datetime		登记时间
yingfaxinzi	float		应发薪资
jiangli	float		奖励
lejuan	float		乐捐
shifaxinzi	float		实发薪资
xinziqingdan	longtext		薪资清单
yuangongzhanghao	varchar	200	员工账号
yuangongxingming	varchar	200	员工姓名
ispay	varchar	200	是否支付		未支付

·第5章 系统实现

5.1 登录、注册界面

系统登录、注册模块的实现如下图5.1图5.2所示。当员工注册成功后，系统将会自动跳转回登陆页面。当员工在登录界面输入账户、密码、权限的信息之后，系统将会传输数据到后端去验证账户和密码是否相符。一旦所有的验证都被通过，系统会进入到系统首页。

图5.1 员工登录界面

图5.2 员工注册界面

5.2 员工模块界面

图5.3展示了员工的系统首页设计，右上角从左到右依次为账号权限、账号名、退出登录功能，系统侧边栏上是员工权限能使用的功能。员工首页界面如有需要可以设计一个考勤记录日历，当然也是可以添加各个小模块嵌入首页中，如天气、入职天数、备忘录等。

图5.3 员工系统首页

图5.4展示的是个人中心的功能模块，按照提示输入原密码、新密码、确认密码并点击确定按钮后，首先页面会检查新密码与确认密码是否一致，若不一致则跳出提示，如果确认一致后，前端会将数据传入后端，后端接收到封装好的json数据后再转换格式获取json内的关键数据与数据库内进行比值，原密码一致后将新密码覆盖旧密码数据。

图5.4 个人中心-修改密码界面

图5.5展示的是员工个人的资料信息，内有员工账号、员工姓名、性别、员工电话、头像、部门等信息，员工可对除了员工账号这种唯一性的ID的资料进行更新，数据会在前端先进行格式的检验，若错误则弹出提示，若验证正确则通过from表单将其中的数据收集打包成json格式传回后端转换格式后写入数据库中，在将数据传回显示在页面。

图5.5 个人中心-个人信息界面

图5.6展示的是请假申请功能的界面。员工可点击新增进行请假，而后跳转至图5.7新增请假申请界面。其中可以看到图5.6所显示的信息资料以及多出的备注请假事由，按照格式正确填写后提交即可新增一条请假信息。请假申请界面的详细按钮可以竖向显示所有内容。更改按钮可以在未审核前用于及时更改误填写的信息，删除按钮同理。

图5.6 请假申请管理界面

图5.7新增请假申请界面

图5.8展示的是考勤记录功能的界面。方便管理员对员工考勤进行统计管理。还可以对考勤记录进行CRUD的功能。点击新增可进行考勤记录，而后跳转至图5.9新增考勤记录界面。

图5.8 考勤记录管理界面

图5.9新增考勤记录界面

图5.10展示的是激励信息功能的界面，其内部设计了激励编号、激励标题、激励类型、发布时间、资金、员工账号、员工姓名、部门等信息。方便管理员对员工考勤进行统计管理。员工在该界面只能有查询功能。

图5.10激励信息管理界面

图5.11展示的是薪资信用管理功能的界面。员工在该界面只能有查询功能。

图5.11薪资信息管理界面

5.3 管理员模块界面

图5.12为管理员的系统首页设计，与员工的功能相似的是右上角的功能以及侧边框多了员工和部门管理，其他功能样式大差不差。其中中心页面设计了三个小模块，分别是出勤记录总数、 出勤占比、出勤统计的饼状图柱状图。

图5.12管理员系统首页

图5.13展示的是管理员的个人中心界面，企业的管理员可以自己修改密码防止因初始密码简单而泄露被员工所操作管理员的账号在数据库中有着单独的表，这样方便跟员工数据进行隔离。

图5.13管理员个人中心

图5.14展示的是管理员的员工管理界面。管理员权限可以提前帮助新员工注册好账号和填入信息，也可以对员工的信息进行查看修改，当员工离职后可以将员工的账号注销删除掉，如图5.15所示。

图5.14员工管理界面

图5.15管理员新增员工界面

图5.16展示的是管理员的部门管理界面，其中可以看到所有的部门名称。如有需要可以对企业的部门信息进行增删改功能，如市场部业绩不理想，经董事会一致决定砍掉这个部门时可将关联了该部门的员工信息删除后剔除改部门。

图5.16 部门管理界面

图5.17展示的是管理员的请假申请界面。其中审核的功能可以给员工的请假申请信息进行审批，只有管理员的后台可以更改删除其中的内容。员工不在公司无法登录系统请假时也可以向管理员提出帮忙新增请假，这样企业的管理也更具有人情味。

图5.17 请假申请界面

图5.18展示的是管理员的考勤记录界面。其中黄色的删除按钮为批量删除功能，出勤占比为已出勤比例的饼状图，出勤统计可以看到各个员工的打卡情况。

图5.18 考勤记录界面

图5.19展示的是管理员的考勤记录界面。新增按钮可以给员工申请激励与负激励，即表现优秀的员工可以申请奖励，而犯了原则性错误的员工则给予扣除绩效等额的薪资的负激励。

图5.19 激励信息界面

图5.20展示的是管理员的薪资信息界面。管理员在每个月的月末进行考勤的统计和激励的计算，算好每名员工的月薪而后进行新增及付款发放。

图5.20 薪资信息界面

第6章 系统测试

6.1 测试方法

系统测试主要分成黑盒测试跟白盒测试两中测试方法。黑盒测试是站在用户的视角感受模拟系统的操作流程，通过验证系统的功能与性能表现来检测缺陷，这个方法的优势在于不需要看系统的底层代码逻辑且能感受员工视角下的操作逻辑；白盒测试则通过代码走查与分析程序逻辑定位潜在问题。本文采用黑盒测试技术对系统核心功能进行评估，并结合实例解析了黑盒测试的协同实施过程。

6.2 测试用例

6.2.1 登录注册功能测试

表6-1 登录注册功能测试

编号	测试项	测试用例	系统反应	测试结果
1	员工注册	账号:wangwu密码:123	注册成功	通过
2	员工注册	账号:wangwu密码:123	注册失败， 提示注册用户已存在	通过
4	员工登录	账号:wangwu密码:123456	登录失败， 提示账号或密码不正确	通过

测试结果1如下图6.1所示，员工正确填入信息后点击注册按钮会提示注册成功，与表中用例一致。

图6.1 编号为1的测试结果

测试结果2如下图6.2所示，员工填入重复的唯一性ID员工账号后点击注册按钮会提示注册与用户已存在，与表中用例一致。

图6.2编号为2的测试结果

测试结果3如下图6.3所示，员工输入错误的密码后点击登录按钮会提示账号或密码不正确，与表中用例一致。

图6.3编号为3的测试结果

6.2.2 管理员功能测试

表6-2 管理员功能测试

编号	测试项	测试用例	系统反应	测试结果
1	新增员工	输入提示要求的用户信息。	添加成功。将新增的用户信息呈现在管理员界面。	通过
2	新增部门	输入需要新增的部门	添加成功。将添加的部门显示在管理员界面。	通过

在管理员界面新增的员工如图6.4所示。管理员输入员工赵四的相关信息，点击提交后会提示添加成功。

图6.4 新增员工界面

添加新的用户后，在管理员界面的显示如图6.5所示。

图6.5 编号为1的测试结果

在管理员界面新增的部门如图6.6所示。

图6.6 新增部门界面

添加新的部门后，在管理员界面的显示如图6.7所示。

图6.7编号为2的测试结果

总结

本系统围绕企业员工资料管理的核心需求，以“北菱企业”为实际应用场景，针对传统人工管理模式效率低、易出错、安全性差等问题，采用前后端分离架构与模块化设计理念，整合了Vue.js、Spring Boot、MySQL等主流技术栈，构建了一套低成本、高可用的解决方案。前端通过Vue.js实现响应式交互界面，结合Element UI组件库快速搭建用户友好的浏览器页面操作环境；后端基于Spring Boot框架开发，使用restful API编程风格，通过MD5加密保障用户敏感信息安全；数据层采用MySQL存储员工档案、考勤记录等结构化数据，结合事务管理与索引优化技术提升查询效率。系统功能覆盖员工信息全生命周期管理、智能考勤统计、自动化薪资计算及多维度数据分析，提升了管理效率。

在技术实现层面，系统充分体现了主流技术栈的协同优势。例如，通过Vue.js开发降低前端维护成本，利用Spring Boot的自动配置特性简化后端环境部署。此外，系统采用三层架构思想，将考勤、薪资等核心功能模块拆分，为未来功能迭代预留了灵活空间。

本系统在基础功能与性能优化上取得了一定成果，但移动端离线操作的适配性不足，也未部署在服务器上。未来可引入Spring Cloud Alibaba生态完善分布式服务治理能力。这些改进方向将进一步提升系统的实用价值与行业适应性。总体而言，本设计不仅为小企业提供了可复用的数字化转型参考方案，更通过全链路开发实践，深化了对Java技术生态的理解，为以后从事开发岗位打下良好的基础。

参考文献

王艺蓉.试析面向软件工程数据挖掘的开发测试技术[J].电子技术与软件工程,2021,(18):64.

张毅宇,徐梦雨,马建勇.软件工程中 Web 开发技术的应用研究[J].中国高新科技,2023,(20):120-122.

郑宇.探析计算机软件工程工程管理[J].信息系统工程,2021,(09):38.

韦林涛.面向智慧课堂的智能题库系统设计与实现[D].西安电子科技大学,2022.

姜一波.基于SpringBoot+Vue的在线考试系统设计与实现[J].无线互联科技,2023,20(23):68-71.ssss

IAD,KKP,VNP.Modern web application development technologies[J].IOP Conference Series: Materials Science and Engineering,2021,1155(1).

Oswald C.Data Wrangling Using Pandas, SQL, and Java[M].Mercury Learning and Information:2022-10-09.

郜慧敏.基于计算机软件开发的JAVA编程应用初探[J].通讯世界,2020,27(04):119-120.

王志亮,纪松波.基于SpringBoot的Web前端与数据库的接口设计[J].工业控制计算机, 2023, 36 (03): 51-53.

王鹰汉,明小波.基于Vue的在线考试系统设计与实现[J].无线互联科技, 2023, 20 (06): 52-54+92.

郑智方,李彬,刘世坤,李鹏.探究mysql的运用实例-对数据库的宏观把握[J].科技风,2020(06):129.

杨雨成,任利峰.MySQL数据库性能优化技术研究[J].科技经济导刊,2020,28(03):32.

张霖山.基于云计算的企业工程档案信息管理系统设计与实现[J].中小企业管理与科技,2023,(15):141-143.

庄惠雯.基于云计算的现代企业人力资源信息管理系统设计[J].信息记录材料,2023,24(04):143-145.

马旭颖,赵甜甜.物联网技术背景下的皮革企业信息管理系统设计研究[J].西部皮革,2022,44(10):15-17.

致谢

至此，我要深深感谢我的指导老师。从选题方向的确立到论文框架的打磨，从实验设计的到最终文稿的润色，导师始终坚持提醒我多去看资料文献为我指引方向，始终耐心解答我的疑惑，帮助我梳理思路，使我在研究过程中少走弯路。

感谢与我一同奋斗的同学们，大家在学术上的交流与探讨让我受益匪浅，尤记得当初开发系统时晚上遇到依赖冲突的问题导致爆红时一起通宵讨论以及查资料，解决完天亮一起去饭堂吃早饭的舒畅。

还有感谢我的家人，父母始终以无条件的信任包容我的焦虑与疲惫，每次视频通话中那句早点睡觉，不要熬夜的叮嘱，胜过千言万语，你们的爱是我敢于直面困难、使我有着完成本篇本章的决心。

最后，谨向参与论文评审的各位专家，所有未能一一提及却曾给予帮助的人表达谢意，感谢他们对本作品提出了许多宝贵的意见。这些建议让我更加清晰地认识到自己的不足，也为未来的学习和工作指明了方向。

未来再见！