ホームページ > 記事 > バックエンド開発 > PHP と Vue を使用してオンライン従業員勤怠アプリケーションを開発する方法

PHP と Vue を使用してオンライン従業員勤怠アプリケーションを開発する方法

WBOYオリジナル: 2023-09-24 17:13:50458ブラウズ

要約: テクノロジーの急速な発展に伴い、従業員勤怠管理システムを次の企業に移行することを選択する企業が増えています。オンラインプラットフォーム。この記事では、PHP と Vue という 2 つの人気のある開発テクノロジを使用して、オンライン従業員勤怠アプリケーションを開発する方法を紹介します。読者がよりよく理解して適用できるように、具体的なコード例を提供します。

環境セットアップ

始める前に、開発環境が正しく設定されていることを確認してください。 XAMPP (Windows ユーザーの場合) や MAMP (Mac ユーザーの場合) など、PHP と Vue の開発環境をインストールする必要があります。同時に、従業員の勤怠データを保存するための MySQL などのデータベースサーバーも必要です。

データベースの作成

MySQL 管理者ツール (phpMyAdmin など) を使用して、従業員の勤怠データを保存するための新しいデータベースを作成します。「attendance」という名前のデータベースを作成し、次に従業員情報を保存する「employees」という名前のテーブルと、従業員の勤怠記録を保存する「attendance」という名前のテーブルを作成します。以下は、これら 2 つのテーブルを作成する SQL コードの例です。

従業員テーブルの作成:

CREATE TABLE employees (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

出席テーブルの作成:

CREATE TABLE attendances (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    employee_id INT(11) NOT NULL,
    check_in DATETIME NOT NULL,
    check_out DATETIME,
    FOREIGN KEY (employee_id) REFERENCES employees(id)
);

バックエンド開発 - PHP

まず、バックエンドロジックを処理するための PHP ファイルを作成する必要があります。このファイルに「api.php」という名前を付けることができます。このファイルには、API を介してフロントエンド Vue アプリケーションとデータをやり取りするためのコードを記述します。簡単な例を次に示します。

<?php

header('Content-Type: application/json');

// 连接到数据库
$dsn = 'mysql:host=localhost;dbname=attendance';
$username = 'root';
$password = '';

try {
    $db = new PDO($dsn, $username, $password);
} catch (PDOException $e) {
    echo '数据库连接失败: ' . $e->getMessage();
    exit();
}

// 获取所有员工信息
function getEmployees() {
    global $db;
    
    $stmt = $db->prepare('SELECT * FROM employees');
    $stmt->execute();
    
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

// 添加新的考勤记录
function addAttendance($employeeId, $checkIn) {
    global $db;
    
    $stmt = $db->prepare('INSERT INTO attendances(employee_id, check_in) VALUES(?, ?)');
    $stmt->execute([$employeeId, $checkIn]);
    
    return $db->lastInsertId();
}

// 更新考勤记录
function updateAttendance($attendanceId, $checkOut) {
    global $db;
    
    $stmt = $db->prepare('UPDATE attendances SET check_out = ? WHERE id = ?');
    $stmt->execute([$checkOut, $attendanceId]);
    
    return $stmt->rowCount();
}

// 获取指定员工的考勤记录
function getAttendances($employeeId) {
    global $db;
    
    $stmt = $db->prepare('SELECT * FROM attendances WHERE employee_id = ?');
    $stmt->execute([$employeeId]);
    
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

// 根据传入的API请求参数调用相应的函数
if (isset($_GET['action'])) {
    $action = $_GET['action'];
    if ($action === 'getEmployees') {
        echo json_encode(getEmployees());
    } else if ($action === 'addAttendance') {
        $employeeId = $_POST['employeeId'];
        $checkIn = $_POST['checkIn'];
        
        echo json_encode(['id' => addAttendance($employeeId, $checkIn)]);
    } else if ($action === 'updateAttendance') {
        $attendanceId = $_POST['attendanceId'];
        $checkOut = $_POST['checkOut'];
        
        echo json_encode(['rowsAffected' => updateAttendance($attendanceId, $checkOut)]);
    } else if ($action === 'getAttendances') {
        $employeeId = $_GET['employeeId'];
        
        echo json_encode(getAttendances($employeeId));
    }
}

この PHP ファイルでは、まずデータベースに接続し、さまざまな API リクエストを処理するいくつかの関数を定義します。具体的なロジックとしては、従業員情報の取得、勤怠記録の追加・更新、指定した従業員の勤怠記録の取得などが挙げられます。

ここでは、いくつかの基本的な関数の例のみを提供します。実際のニーズに応じて拡張および変更できます。

フロントエンド開発 - Vue

次に、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>
    <ul>
      <li v-for="employee in employees" :key="employee.id">
        {{ employee.name }} - {{ employee.department }}
        <button @click="addAttendance(employee.id)">签到</button>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
        el: "#app",
        data: {
            employees: []
        },
        mounted() {
            this.getEmployees();
        },
        methods: {
            getEmployees() {
                fetch('api.php?action=getEmployees')
                    .then(response => response.json())
                    .then(data => {
                        this.employees = data;
                    });
            },
            addAttendance(employeeId) {
                fetch('api.php?action=addAttendance', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        employeeId: employeeId,
                        checkIn: new Date().toISOString()
                    })
                })
                .then(response => response.json())
                .then(data => {
                    alert(`签到成功，考勤ID: ${data.id}`);
                });
            }
        }
    });
  </script>
</body>
</html>

この例では、まず Vue JavaScript ファイルを紹介します。次に、Vue インスタンスを作成し、従業員のリストと、従業員情報を取得して勤怠記録を追加するための 2 つのメソッドを定義しました。ページが読み込まれると、Vue インスタンスはマウントされたメソッドを自動的に呼び出して従業員情報を取得し、従業員プロパティにバインドします。リストでは、v-for ディレクティブを使用して各従業員をループし、各従業員にチェックインボタンを追加します。ユーザーがサインインボタンをクリックすると、addAttendance メソッドがトリガーされて、バックエンドに出席レコードを追加するリクエストが開始され、成功するとサインイン成功のプロンプトが表示されます。

この例の API リクエストでは、フェッチ関数を使用して非同期リクエストを開始することに注意してください。axios などの他の同様のライブラリを使用することもできます。

結論

PHP と Vue を使用してオンライン従業員勤怠アプリケーションを開発することで、シンプルで実用的な従業員勤怠システムを実装できます。この記事では、読者がデータの保存と対話のプロセスを理解できるように、具体的なコード例を提供します。もちろん、これは基本的なフレームワークにすぎず、ニーズや実際の状況に応じて拡張および変更できます。この記事が、PHP と Vue を使用してオンライン従業員勤怠アプリケーションを開発する方法を理解するのに役立つことを願っています。

以上がPHP と Vue を使用してオンライン従業員勤怠アプリケーションを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript sql mysql for 循环异步 windows 数据库 phpMyAdmin axios

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PHP を通じて従業員の勤怠データをインポートおよびエクスポートするにはどうすればよいですか?次の記事：PHP を通じて従業員の勤怠データをインポートおよびエクスポートするにはどうすればよいですか?

続きを見る