如何透過PHP和Vue產生線上員工考勤報告-php教程-PHP中文網

如何透過PHP和Vue產生線上員工考勤報告

WBOY

發布： 2023-09-24 16:20:01

原創

786 人瀏覽過

如何透過PHP和Vue產生線上員工考勤報告

在現代的辦公環境中，管理員工的考勤是非常重要的一項工作。而隨著技術的不斷發展，透過自動化系統產生線上員工考勤報告已經成為了一個常見的需求。本文將介紹如何使用PHP和Vue來實現這個功能，並提供具體的程式碼範例。

前期準備
在開始之前，我們需要確保伺服器上已經安裝了PHP和Vue的相關環境。如果沒有安裝，可以透過下面的連結找到相應的安裝教學。

PHP的安裝教學：https://www.php.net/manual/en/install.php
Vue的安裝教學：https://vuejs .org/v2/guide/installation.html

建立資料庫表格
在產生考勤報告之前，我們需要先建立一個用於儲存員工考勤記錄的資料庫表。可以使用下面的SQL語句來建立一個簡單的表格結構。

CREATE TABLE `attendance` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `employee_id` int(11) NOT NULL,
  `date` date NOT NULL,
  `clock_in_time` time NOT NULL,
  `clock_out_time` time NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

登入後複製

在這個表中，我們儲存了每一次打卡的相關信息，包括員工ID、日期、上班時間和下班時間等。

建立PHP後台檔案
我們使用PHP來處理後台邏輯，並將資料從資料庫讀取出來。首先我們需要建立一個名為"getAttendance.php" 的文件，並寫入以下程式碼：

<?php

// 连接到数据库
$conn = new mysqli("localhost", "username", "password", "attendance");

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询数据库中的考勤记录
$sql = "SELECT * FROM attendance";
$result = $conn->query($sql);

// 检查查询结果是否为空
if ($result->num_rows > 0) {
    // 将查询结果转换为JSON格式，并输出给前端
    $rows = array();
    while ($row = $result->fetch_assoc()) {
        $rows[] = $row;
    }
    echo json_encode($rows);
} else {
    echo "没有找到考勤记录";
}

// 关闭数据库连接
$conn->close();

登入後複製

在這個文件中，我們先連接到資料庫，然後查詢資料庫中的考勤記錄，並將結果轉換為JSON格式輸出給前端。

建立Vue前端程式碼
接下來我們需要建立一個Vue的前端頁面，用來展示考勤記錄。首先建立一個名為 "index.html" 的文件，並引入Vue和axios庫。然後寫入以下程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工考勤报告</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>员工ID</th>
                    <th>日期</th>
                    <th>上班时间</th>
                    <th>下班时间</th>
                </tr>
            </thead>
            <tbody v-if="attendance.length">
                <tr v-for="record in attendance" :key="record.id">
                    <td>{{ record.employee_id }}</td>
                    <td>{{ record.date }}</td>
                    <td>{{ record.clock_in_time }}</td>
                    <td>{{ record.clock_out_time }}</td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="4">没有找到考勤记录</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                attendance: []
            },
            mounted() {
                this.getAttendance();
            },
            methods: {
                getAttendance() {
                    axios.get('getAttendance.php')
                        .then(response => {
                            this.attendance = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

登入後複製

在這段程式碼中，我們建立了一個Vue實例，並在mounted鉤子函數中呼叫了getAttendance方法來取得考勤記錄。然後使用v-for指令產生表格的每一行。