PHP および Vue を使用してオンライン従業員勤怠レポートを生成する方法-PHPチュートリアル-php.cn

PHP および Vue を使用してオンライン従業員勤怠レポートを生成する方法

WBOY

リリース： 2023-09-24 16:20:01

オリジナル

813 人が閲覧しました

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 インスタンスを作成し、マウントされたフック関数の getAttendance メソッドを呼び出して出席レコードを取得します。次に、v-for ディレクティブを使用してテーブルの各行を生成します。

プロジェクトを実行します
あとは、上記の 2 つのファイルをサーバーのルートディレクトリに配置し、ブラウザで「index.html」ファイルにアクセスして、生成されたオンライン従業員を確認するだけです。出席報告。

上記の手順により、PHP と Vue を使用してオンラインの従業員勤怠レポートを生成することができました。もちろん、これは単なる例であり、実際のニーズに基づいてより複雑な開発を行うことができます。この記事がお役に立てば幸いです!

以上がPHP および Vue を使用してオンライン従業員勤怠レポートを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。