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