软件工程人事管理系统设计与实现，过程实现文档

《人事管理系统》

实

现

过

程

文

档

目录

1. 引言... 3

2. 需求分析... 3

2.1 功能需求... 3

2.2 非功能需求... 3

3. 设计... 4

3.1 系统架构设计... 4

3.2 界面设计... 4

4．实现过程... 4

4.1 用户身份验证... 4

4.2基础信息管理... 8

4.3.员工绩效管理... 16

4.4. 员工考勤管理... 20

4.5员工薪资管理... 22

5 测试和部署... 29

5.1 功能测试... 30

5.2 性能测试... 30

5.3 部署... 30

6. 总结... 30

1. 引言

本文档旨在记录人事管理系统的实现过程，包括需求分析、设计、开发、测试和部署等具体步骤。系统旨在帮助企业高效管理人事信息，包括员工档案、薪资福利、考勤请假等模块。

2. 需求分析

本阶段对人事管理系统的具体需求进行调研和分析，定义系统功能和用户需求。

2.1 功能需求

对人事管理系统的各个模块进行详细描述，包括：

• 用户身份验证：用户身份验证模块负责对用户进行身份验证
• 基础信息管理：基础信息管理模块用于管理员工的基本信息
• 员工绩效管理：员工绩效管理模块用于管理员工的绩效信息
• 员工考勤管理：员工考勤管理模块用于管理员工的考勤信息
• 员工薪资管理：员工薪资管理模块用于管理员工的薪资信息

2.2 非功能需求

定义人事管理系统的性能、安全和可用性要求，包括：

• 响应时间：每个功能模块的操作时间不能超过2秒。
• 用户友好性：界面设计简洁明了，操作流程清晰可见。

3. 设计

在设计阶段，根据需求分[1]析的结果进行系统架构设计和界面设计。

3.1 系统架构设计

根据功能需求，设计人事管理系统的整体架构，包括前端和后端的技术选型和组件设计。

3.2 界面设计

设计人事管理系统的界面布局和样式，确保用户友好性和一致性。

4．实现过程

4.1 用户身份验证

4.1.1 实现思路

（1）设计用户登录界面：创建一个用户登录页面，包括用户名和密码输入框，并添加一个登录按钮。

（2）用户输入验证：在后端代码中，获取用户在登录界面输入的用户名和密码。对于用户名和密码的格式、长度等进行验证，确保输入的有效性。

（3）数据库连接：建立与数据库的连接，通过数据库查询操作来验证用户的身份。使用合适的数据库访问方式（如SQL语句）连接到数据库。

（4）验证用户身份：执行数据库查询操作，在数据库中查找与输入的用户名相匹配的记录。比对数据库中对应用户记录中的用户名和密码与用户输入的用户名和密码是否一致。

（5）访问控制：根据验证结果，判断用户是否通过身份验证。如果验证成功，则允许用户访问系统的各个功能模块。如果验证失败，则向用户展示适当的错误信息，并阻止用户进一步访问系统的功能。

（6）会话管理：如果用户通过身份验证，可以在服务器端创建一个会话（session）来保存用户的登录状态，以便后续的访问控制和权限管理。会话可以使用令牌（token）或Cookie等方式进行管理。

4.1.2 技术实现

• 设计登录界面

图 4.1.2-1 登陆页面

主要包括，用户名，密码，权限，登录等主键组成，权限是以管理员的身份进行登录。

• 实现用户输入验证逻辑，包括用户名和密码的验证

因为没有设置注册功能，所以通过我们自定义数据库里面的userName和password来进行登录进入系统界面。

    //数据库连接信息改成自己的 ：主机(单词localhost不用改)+数据库用户名+密码+要连接的数据库
    $servername = "php"; // 数据库服务器地址
$username = "root"; // 数据库用户名
$password = "123456"; // 数据库密码
$dbname = "22222222"; // 数据库名称

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

$sql = "SELECT * FROM userpassWord WHERE id = '$userName1'";
$result = $conn->query($sql);

• 用户名和密码的验证：

1. 当用户名和密码都为空时会出现《请输入用户名或密码！》让我们提示输入用户名和密码。

if(($userName1==null) || ($password1==null)){
    echo "<script> alert('请输入用户名或密码');parent.location.href='login.html'; </script>";

图 4.1.2-2

2.输入用户名和密码后通过数据库里面的username和password来验证用户名和密码的正确性，用户名输入错误时出现《该用户不存在！请联系管理员！》提示用户名错误。

if($id==null) {
        echo "<script>// alert('该用户不存在！请联系管理员！');parent.location.href='login.html';  </script>";
    }

图 4.1.2-3

3.当用户名正确密码有错误时会出现《该密码错误！若忘记密码，请联系管理员！》提示用户密码有错误。

else if($id!=$userName1||$passWord!=$password1)
    {
        echo "<script>// alert('密码错误！若忘记密码，请联系管理员！');parent.location.href='login.html'; </script>";
    }

图 4.1.2-4

4.用户名跟密码都正确并且相互匹配时系统会通过接口跳转到系统界面。

else if($id==$userName1 && $passWord==$password1){
    echo"<script>location.href='http://localhost:8080/';</script>";    
    }

• 接口连接，实现单点登录功能

4.2基础信息管理

4.2.1 实现思路

1. 页面设计及页面跳转关联：对于基础信息管理的页面设计，应当满足界面简洁美观，一目了然，让用户可以清楚的了解到每个页面的功能，以及如何使用；对于页面跳转关联性的设计，应当确立一个基础页面，对于后续添加的每个页面都给出与基础页面相互跳转的链接，以满足用户的跳转需求。
2. 添加、修改员工信息设计：对于增改信息，应当提供适当的输入框一共用户填写信息，并对用户的不当输入进行检测并及时回显，检查无误后再提交到数据库。
3. 删除员工信息设计：对于删除信息，应给予用户准确的删除信息，应当将入口设计在查看员工详细信息的页面，即删除当前正在查看的员工信息。
4. 查询员工信息设计：对于查询员工，我们应当提供模糊搜索和精确搜索两种功能，我们可以使用字符串匹配方法实现这一点；并对没有查询结果的情况做出回显。

4.2.2 技术实现

• 设计员工档案界面

员工基础信息概览及查询页面

图 4.2.2-1 员工基础信息概览及搜索页面

添加员工信息页面

图 4.2.2-2 添加员工信息页面

查询及修改员工详细信息页面

图 4.2.2-3 查询及修改员工详细信息页面

• 实现员工信息的增、删、改、查操作逻辑

1. 添加员工页面逻辑

我们首先使用form将所有待提交的信息组织起来，然后POST到save_info.php，将数据提交到数据库并保存。

<form action="save_info.php" method="POST" onsubmit="return valuecheck()">
    <div class='col'><div class='col-Name'>工号</div>
<div class='col-Value'><input type='text' id='ID' name='ID' maxlength='10'></div></div>
	<!-- 其他的输入框 --!>
	
    <!-- 右下角的保存信息按钮 -->
    <div id="submit-div"><button type="submit" name="submit1">
        <img src="resource/save.png" alt="保存信息">
    </button></div>
</form>

save_info.php内向数据库中插入数据的逻辑如下，取出收到的数据，组织成sql插入语句并提交到数据库中执行，随后检查执行结果并回显。

$ID=$_POST['ID'];$Name=$_POST['Name'];
$Birthdate=$_POST['Birth'];
$Dep=$_POST['Dep'];$Pos=$_POST['Pos'];
// sql语句
$sql="insert into `employee` values ('".$ID."', '".$Name."', '".$Birthdate."', '".$Dep."', '".$Pos."')";
$res=@mysqli_query($con, $sql);

此外在前端设计中，添加了对输入的检查，使用的函数如下。因为在html代码中我们限制了数据框的长度，所以我们仅检查未填写数据、数据格式错误和日期格式错误的情况。

function valuecheck(){  // 检查数据合法性
  var Id=document.getElementById('ID').value;
	<!-- 获取其他输入的信息 --!>
	
  var curdate=new Date();
  var birDate=new Date(bir+'T00:00:00');
  // 工号包含除数字外的字符
  if(!(/^\d+$/.test(Id))) {alert("工号格式错误！");return false;}
  // 工号长度错误
  else if(Id.length!==10) {alert("工号长度错误！");return false;}
  // 未填写姓名
  else if(Name.length===0) {alert("请填写姓名！");return false;}
  // 姓名有注入风险
  else if(InjectionRisk(Name)) {alert("请输入合法的姓名!");return false;}
  // 未填写出生日期
  else if(bir==='') {alert("请填写出生日期！");return false;}
  // 出生日期在当前日期后
  else if(birDate>=curdate) {alert("请输入合法的日期！");return false;}
  // 未填写部门
  else if(Dep.length===0) {alert("请填写部门！");return false;}
  // 部门有注入风险
  else if(InjectionRisk(Dep)) {alert("请输入合法的部门!");return false;}
  // 未填写职务
  else if(Pos.length===0) {alert("请填写职务！");return false;}
  // 职务有注入风险
  else if(InjectionRisk(Pos)) {alert("请输入合法的职务!");return false;}
  else return true;
}

该函数中用到的InjectionRisk()函数为检查一段字符串是否有sql注入风险，包括sql关键字检查和特殊符号检查。

function InjectionRisk(inputString) {
   // 定义 SQL 注入关键字
   const sqlKeywords=["SELECT","UPDATE","DELETE","INSERT","FROM","WHERE","OR","AND","UNION","DROP","EXEC","XP_CMDSHELL"];
  // 检查是否包含 SQL 注入关键字
  for(const keyword of sqlKeywords) {
    const pattern=new RegExp(`\\b${keyword}\\b`,'i');
    // 包含 SQL 注入关键字，可能存在注入风险
    if(pattern.test(inputString)) {return true;}
  }
  // 检查是否包含特殊符号
  const specialCharacters=[';',"'",'--','|','&','<','>','$','(',')','\\','/'];
  for(const character of specialCharacters) {
    // 包含特殊符号，可能存在注入风险
    if(inputString.includes(character)) {return true;}
  }
  return false; // 没有发现SQL注入风险
}

1. 删除员工页面逻辑

删除员工是从修改员工信息页面开始的，我们在修改信息页面提供了一个删除员工的按钮，代码部分如下，将ID作为hidden的input框，包含在form中提交。

<form action="del_info.php" method="POST">
	<input type="hidden" name="O_ID" value='<?php echo"$Id" ?>'>
	<!-- 右下角的删除按钮 -->
	<div id="delete-div"><button type="submit" name="submit2">
		<img src="resource/del.png" alt="删除员工">
	</button></div>
</form>

随后来到删除使用的逻辑代码，先获取传递的ID，随后组织成sql删除语句，提交到数据库并执行，随后检查结果并回显。

$ID=$_POST['O_ID'];
// sql语句
$sql="delete from `employee` where `ID`='$ID'";
$res=@mysqli_query($con, $sql);

1. 修改员工信息页面逻辑

我们将修改员工信息和展示员工详细信息页面合并为同一个页面，根据在概览页面选择的员工工号在数据库中进行查询，并显示查询得到的数据；对于数据修改，我们将所有信息组织到一个form里提交，并在save_edit_info.php中进行数据的保存。

<form action="save_edit_info.php" method="POST" onsubmit="return valuecheck()">
<?php
// sql语句
$query=$_GET['ID'];
$sql="select * from `employee` where `ID`=$query";
$res=mysqli_query($con,$sql);
	if(mysqli_num_rows($res)>0){
	while($dbrow=mysqli_fetch_assoc($res)){
		$Id=$dbrow['ID'];?>
	<div class='col'><div class='col-Name'>工号</div>
	<div class='col-Value'><input type='text' name='ID' id='ID' value='<?php echo"$Id"?>' maxlength='10'></div></div>
	<!-- 其他的输入框 --!>
	
	<input type='hidden' name='O_ID' value='<?php echo"$Id"?>'>
<?php }}?>
	<!-- 右下角的保存信息按钮 -->
	<div id="submit-div"><button type="submit" name="submit1">
		<img src="resource/save.png" alt="保存信息">
	</button></div>
</form>

下面是进行数据保存的逻辑，由于我们在设计时考虑到工号可能有修改的需求，又因为工号在数据库中作为主键存在，所以在传递数据时我们同时提供了修改前和修改后的工号，然后根据得到的数据组织成sql更新语句，提交到数据库中执行，检查执行结果并回显。

$O_ID=$_POST['O_ID'];$ID=$_POST['ID'];
$Name=$_POST['Name'];$Birthdate=$_POST['Birth'];
$Dep=$_POST['Dep'];$Pos=$_POST['Pos'];
// sql语句
$sql="update `employee` set `ID`='$ID', `Name`='$Name', `Birthdate`='$Birthdate', `Dep`='$Dep', `Pos`='$Pos' where `ID`='$O_ID'";
$res=@mysqli_query($con, $sql);

修改员工信息时同样进行了安全性检查，使用的检查函数同为valuecheck()，故此处不再展示。

1. 查询员工信息页面逻辑

我们将查询员工页面与展示员工概览信息页面合并为同一页面，此处是查询员工时使用的搜索栏。使用form组织输入框，提供一个button和对应图片用以查询。

<!-- 搜索栏 -->
<div id="search-frame">
    <form action="show_info.php" method="POST" onsubmit="return searchcheck()" style="width:100%;margin:0px;">
        <input type="text" name="EID" id="search" maxlength="10" value='<?php echo "$query" ?>' placeholder="请输入员工编号" >
        <!-- 搜索按钮和图片 -->
        <div id="search-div"><button type="submit" name="sunmit1">
            <img src="resource/search.png" alt="查询">
        </button></div>
    </form>
</div>

提交搜索请求后POST到当前页面，并获取搜索的工号，当没有POST请求时query为空，否则为对应工号。

// 使用post传递查询的工号
$query=NULL;
if($_SERVER['REQUEST_METHOD']==='POST'){
    if(!empty($_POST)){
        $query=$_POST['EID'];
    }
}

对于查询框，我们也设计了如下的输入检查，检查输入的工号是否全部为数字。

    function searchcheck(){
        var Id=document.getElementById('search').value;
        if((!(/^\d+$/.test(Id)))&&Id.length!==0) {alert("请输入合法的工号!");return false;}
        else return true;
    }

然后是搜索匹配工号的员工信息逻辑，我们首先检查查询字段query是否为空，若为空则直接得到所有数据；若不为空则将查询字段添加到sql查询语句，并使用%通配符来匹配对应的员工工号，最后提交到数据库执行并回显得到的数据。

// sql语句
$sql="select `ID`, `Name` from `employee`";
if($query!=NULL){$sql=$sql." where `ID` like '%$query%'";}
$res=mysqli_query($con, $sql);

4.3.员工绩效管理

 4.3.1实现思路

员工绩效管理模块用于管理员工的绩效信息，包括绩效考核指标的设定、员工绩效的评估等。该模块还提供绩效数据的分析和预测功能。该系统用于查询员工的绩效数据，还能手动添加、修改或删除员工的绩效。

4.3.2技术实现

• 设计绩效考核指标界面

输入员工id，点击“查询”按钮，即可显示该员工的绩效数据，如图4.3.2-1所示。

图 4.3.2-1 绩效管理页面

• 实现绩效指标的设定和编辑功能

输入员工id，然后输入要更改的各项指标，即可完成对该员工的绩效修改，如图4.3.2-2所示。

图 4.3.2-2 绩效更改页面

• 前端

       使用async/await发送POST请求给后端，等待后端响应，若响应失败则停止执行，并根据后端回复打印错误信息。

图 4.3.2-3 前端

处理后端响应并打印到控制台。然后刷新页面。

图 4.3.2-4 前端

• 后端

后端定义并实现一个Addelement类，使用@PostMapping注解将该方法映射到指定路径上。在前后端通信上，定义一个receiveAddData方法，接受一个Addelements对象作为参数。检查对象是否有效且存在，若对象有效且存在，则视操作调用salarymapper中的方法。

图 4.3.2-5 后端

在另一个类salarymapper中，定义了构造sql语句的方法，视请求调用不同的方法以实现查询、修改、删除的功能。

图 4.3.2-5 后端的mapper类

4.4. 员工考勤管理

4.4.1实现思路

员工考勤管理模块用于管理员工的考勤信息，是针对特定员工、日期时限、出勤状态进行查看并对应修改信息的管理界面。在后端通过数据库与其它模块相连，为绩效和员工基础信息管理提供数据支持。基础考勤信息由数据库存储，不可由管理员随意变更，但是考虑到员工出勤的系统误差和申报失误，允许员工按照规范流程申报考勤复核并更改假勤情况，在考勤管理端由用户修改“是否请假”项进行绩效等效修改。

界面设计的实现以直观简洁风格为主，在考勤分功能下直接显示一年来的全部考勤数据库信息表格，并在上方通过查询交互框为用户提供特定的查询项显示。输入限定条件点击“确认查询”即可呈现对应的考勤信息进行复核，配合公司具体事务情况针对个人、特定日期、特定假勤进行修改。点击右侧“编辑”选项即可重新输入正确的考勤信息，点击“完成”进行数据库端的信息保存。

4.4.2 技术实现

• 设计考勤记录界面：

使用HTML 结构和样式实现界面设计，引入外部 CSS 样式文件 style.css，用于定义页面的样式，表单允许用户输入日期、工作ID、请假状态和缺勤状态来进行查询，表单元素包括文本输入框、下拉选择框和提交按钮。

图 4.4.2-1 出勤管理页面

• 实现考勤记录的采集和存储功能

使用 PHP 脚本连接到 MySQL 数据库，数据库凭据包括服务器地址、用户名、密码和数据库名。检查数据库连接是否成功，若失败则输出错误信息。当表单提交时（通过 POST 方法），PHP 脚本接收输入值并构建一个 SQL 查询。查询可以根据日期、工作ID、请假状态和缺勤状态过滤数据，包括对特定行数据进行更新的功能，当用户编辑并保存更改时，PHP 脚本将更新数据库。查询结果以表格形式显示，包括工作ID、日期、上下班时间和请假状态等字段。

在页面上激活编辑和保存按钮的功能使用JavaScript实现。允许用户通过点击编辑按钮将表格中的某些字段变为可编辑，然后通过完成按钮保存更改。使用 Ajax 向服务器发送更新请求，而无需重新加载页面。确保使用预处理语句或参数化查询来防止 SQL 注入。同时也确保对用户输入进行适当的验证和清理，以防止 XSS 攻击。

    function saveChanges(index) {  // 获取编辑后的值  
        var newValue = document.querySelectorAll('.editable')[index].textContent;   // 获取行的唯一标识符（例如，通过隐藏的<input>元素）  
        var rowId = document.querySelectorAll('.row-id')[index].value;         // 使用Ajax将更改发送到服务器  
        var xhr = new XMLHttpRequest();  
        xhr.open("POST", "index.php", true);  
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
        xhr.onreadystatechange = function() {  
            if (xhr.readyState == 4 && xhr.status == 200) {   // 处理服务器响应  
            console.log(xhr.responseText); // 可以根据需要处理响应  
        }  
    };  
        var params = "save_changes=true&row_id=" + rowId + "&new_leaving_ask=" + newValue;  
    xhr.send(params);  
    }  

4.5员工薪资管理

4.5.1 实现思路

员工薪资管理模块用于管理员工的薪资信息，包括薪资核算、薪资调整等。通过该模块，可以计算员工的薪资并进行薪资调整。薪资调整分为三种方式：添加薪资项、删除薪资、修改薪资项，分别显示到多个界面。具体实现思路如下：

1. 员工薪资查询：设置一个查询框，由输入员工工号在数据库内查询相应的员工信息，即可在页面内显示出该员工的绩效、包括基础薪资在内的所有薪资项目以及总薪资。对于无效输入不予执行并显示错误。
2. 薪资计算：由于实际薪资由基础薪资与额外薪资组成，且基础薪资与绩效挂钩，故可以调用员工的绩效来自动计算基础薪资并显示最终薪资。
3. 薪资调整：提供适当的输入框以填写员工id以及对应的调整信息如薪资修改幅度，对提交信息生成查询数据库语句后提交到数据库执行。成功修改数据库后提示修改成功并刷新页面以显示修改后的薪资；若失败则弹窗显示错误信息。
4. 页面设计：薪资查询、添加、修改、删除分别使用薪资管理模块下的一个页面实现，都使用一个缩略图来显示部分员工的id、姓名。
5. 架构：薪资管理模块分为前后端，前端负责显示页面，后端负责修改数据库。

4.5.2 技术实现

• 软件界面

薪资查询界面如图4.5.2-1所示。页面下方显示员工的信息表，包括员工id、姓名、生日；在输入框输入员工id后点击“查询”按钮即可在中央区域显示该员工的基础薪资、绩效、总薪资。查询信息显示如图4.5.2-2所示。

图4.5.2-1 薪资查询页面

                        图4.5.2-2 显示薪资查询结果

薪资添加界面如图4.5.2-3所示。需在输入框输入员工id、基础薪资与额外薪资，点击“插入”即可添加该员工的薪资。

                                         图4.5.2-3 薪资添加页面

薪资删除页面如图4.5.2-4所示，输入员工id，点击“删除”按钮，即可删除有关该员工的所有薪资记录。

                                   图4.5.2-4 删除薪资页面

薪资更改页面如图4.5.2-5所示，输入员工id，点击“更改”按钮，即可更改有关该员工的薪资记录。

                       图4.5.2-5 更改薪资页面

•  代码部分：

前端代码逻辑：

查询部分，前端引入axios库，使用async/await发送POST请求给后端，等待后端响应，若响应成功则将返回数据赋值给tableData并刷新界面，出错时打印错误信息。

                   图4.5.2-6 薪资查询前端

薪资调整部分，与查询部分类似，引入axios库，使用async/await发送POST请求给后端，等待后端响应，若响应成功则将返回数据赋值给tableData并刷新界面，出错时打印错误信息。

后端代码逻辑：

后端均使用Springboot实现，定义一个POST请求的接口以接受前端发送的数据。

薪资查询部分，对于前端发送的数据，调用方法selectAllSalary()来获取数据库数据，并把函数回复赋值保存到类型为List<array>的容器s1中。若s1非空，则打印s1中的数据。如图4.5.2-6所示。

图4.5.2-6 薪资查询后端代码

负责薪资调整部分的后端，对于前端发送的数据，视调整方法的不同，调用不同方法来获取数据库数据。若调整方法为新增薪资，则调用addsalary()；若为删除薪资，则调用deletesalary();若为修改薪资，则调用updatesalary()。统一设置返回类型为int。如图4.5.2-7所示。

图4.5.2-7 薪资调整部分后端

后端代码还负责连接数据库并发送sql查询语句、获得查询结果。薪资查询部分的连接数据库的代码如图4.5.2-8所示，构造接口salarymapper，在接口中定义构造sql查询语句的方法。

图4.5.2-8 红框内为薪资查询部分连接数据库代码

薪资调整部分的连接数据库的代码如图4.5.2-9所示，构造接口salarymapper，视传递过来的操作请求不同，在接口中定义构造不同sql查询语句的方法。新增薪资、删除薪资、修改薪资对应的构造sql语句的部分如图4.5.2-9所示。

图4.5.2-9 薪资调整部分连接数据库代码

5 测试和部署

在测试和部署阶段，对系统进行全面测试，并将系统部署到生产环境。

5.1 功能测试

对系统的各个功能模块进行功能测试，模拟用户的操作场景进行测试。

5.2 性能测试

对系统的性能进行压力测试，确保系统在高负载下的稳定性和性能表现。

5.3 部署

将系统部署到生产环境，并进行配置和运维工作，确保系统的可用性和稳定性。

6. 总结

人事管理系统的实现过程包括用户身份验证、基础信息管理、员工绩效管理、员工考勤管理、员工薪资管理等多个模块。在每个模块中，我们需要设计相应的界面，实现后端逻辑，处理数据存储和访问，然后通过报表和统计展示相关数据。根据实际需求，可以进一步添加其他模块来满足特定的人事管理需求。本文档对人事管理系统的实现过程进行了详细的记录和总结，包括需求分析、设计、开发、测试和部署等各个阶段。通过本文档，可以了解到人事管理系统的实现步骤和具体实现内容。

 

---