如何通過(guò)PHP和Vue生成員工考勤的遲到早退報(bào)表
員工考勤是企業(yè)中一項(xiàng)重要的管理工作，準(zhǔn)確記錄員工遲到早退的情況有助于提高考勤效率和員工紀(jì)律性。本文將介紹通過(guò)PHP和Vue兩個(gè)技術(shù)實(shí)現(xiàn)員工考勤的遲到早退報(bào)表生成，并提供具體的代碼示例，供讀者參考。
一、創(chuàng)建數(shù)據(jù)庫(kù)和數(shù)據(jù)表
首先需要?jiǎng)?chuàng)建一個(gè)名為”attendance”的數(shù)據(jù)庫(kù)，并在該數(shù)據(jù)庫(kù)中創(chuàng)建一個(gè)名為”employee_attendance”的數(shù)據(jù)表。數(shù)據(jù)表的結(jié)構(gòu)需要包含以下字段：
id：?jiǎn)T工idname：?jiǎn)T工姓名date：考勤日期time_in：上班打卡時(shí)間time_out：下班打卡時(shí)間
二、后端代碼（PHP）
以下是使用PHP來(lái)實(shí)現(xiàn)后端邏輯的代碼示例：
<?php
// 建立數(shù)據(jù)庫(kù)連接
$conn = new mysqli("localhost", "username", "password", "attendance");
// 獲取員工考勤數(shù)據(jù)
$query = "SELECT * FROM employee_attendance";
$result = $conn->query($query);
$attendanceData = array();
// 循環(huán)遍歷查詢結(jié)果
while ($row = $result->fetch_assoc()) {
$attendanceData[] = $row;
}
// 關(guān)閉數(shù)據(jù)庫(kù)連接
$conn->close();
// 輸出JSON格式的結(jié)果
header('Content-Type: application/json');
echo json_encode($attendanceData);
?>
登錄后復(fù)制
三、前端代碼（Vue）
以下是使用Vue來(lái)實(shí)現(xiàn)前端界面和數(shù)據(jù)綁定的代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>員工考勤報(bào)表</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>員工考勤報(bào)表</h1>
<table>
<thead>
<tr>
<th>員工姓名</th>
<th>考勤日期</th>
<th>上班打卡時(shí)間</th>
<th>下班打卡時(shí)間</th>
</tr>
</thead>
<tbody>
<tr v-for="employee in employees">
<td>{{ employee.name }}</td>
<td>{{ employee.date }}</td>
<td>{{ employee.time_in }}</td>
<td>{{ employee.time_out }}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
employees: [],
},
mounted() {
fetch('backend.php')
.then(response => response.json())
.then(data => this.employees = data)
.catch(error => console.log(error));
},
});
</script>
</body>
</html>
登錄后復(fù)制
四、部署與運(yùn)行
將以上的后端代碼保存為”backend.php”，前端代碼保存為”frontend.html”。將兩個(gè)文件放置在一個(gè)Web服務(wù)器中，并確保你的服務(wù)器支持PHP和Vue.js庫(kù)。然后通過(guò)訪問(wèn)”frontend.html”頁(yè)面即可看到員工考勤的遲到早退報(bào)表。
總結(jié)
本文通過(guò)PHP和Vue兩個(gè)技術(shù)實(shí)現(xiàn)了員工考勤的遲到早退報(bào)表的生成，通過(guò)后端PHP代碼從數(shù)據(jù)庫(kù)中查詢數(shù)據(jù)，并通過(guò)JSON格式輸出。前端Vue代碼實(shí)現(xiàn)了數(shù)據(jù)的展示和動(dòng)態(tài)綁定。希望本文的示例對(duì)讀者理解和應(yīng)用PHP和Vue技術(shù)來(lái)生成員工考勤報(bào)表有所幫助。
以上就是如何通過(guò)PHP和Vue生成員工考勤的遲到早退報(bào)表的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
