首頁 >後端開發 >php教程 >如何透過PHP和Vue產生員工考勤的遲到早退報表

如何透過PHP和Vue產生員工考勤的遲到早退報表

王林原創: 2023-09-24 12:05:181337瀏覽

員工考勤是企業中一項重要的管理工作，準確記錄員工遲到早退的情況有助於提高考勤效率和員工紀律性。本文將介紹透過PHP和Vue兩個技術實現員工考勤的遲到早退報表生成，並提供具體的程式碼範例，供讀者參考。

一、建立資料庫和資料表
首先需要建立一個名為"attendance"的資料庫，並在該資料庫中建立一個名為"employee_attendance"的資料表。資料表的結構需要包含以下欄位：

id：員工id
name：員工姓名
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產生員工考勤的遲到早退報表的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php json html date JS 数据库

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何實現線上答案中的答題記錄備份和同步功能下一篇：如何實現線上答案中的答題記錄備份和同步功能

看更多