PHP と Vue を使用してオンライン従業員出席のための例外処理メカニズムを開発する方法

PHP と Vue を使用してオンライン従業員出席のための例外処理メカニズムを開発する方法

1. はじめに
   従業員出席は、重要なリンクの 1 つです。企業経営。従来の勤怠管理方法には、勤怠データのエラーや面倒な手作業による統計など、多くの欠点がありました。情報技術の発展に伴い、PHP と Vue を使用してオンライン従業員勤怠システムを開発することが、より効率的かつ正確な選択肢になりました。この記事では、PHP と Vue を使用してオンライン従業員勤怠システムを開発する方法を紹介し、例外処理メカニズムの実装に焦点を当てます。
2. PHP を使用してバックエンド インターフェイスを開発する
   PHP を使用してバックエンド インターフェイスを開発する前に、まずデータベース テーブル構造を設計する必要があります。この記事では、データベースとして MySQL を使用し、次のテーブルを設計します。
3. Employee テーブル (従業員): 名前、役職番号など、従業員の基本情報を保存します。
4. 出席テーブル (出席): 日付、勤務時間、勤務時間外などのフィールドを含む従業員の出席レコードを保存します。

次に、PHP を使用してバックエンド インターフェイスを開発します。まず、データベース接続情報を構成するための config.php という名前のファイルを作成します。サンプル コードは次のとおりです。

<?php
$host = 'localhost';  // 数据库主机名
$dbName = 'attendance';  // 数据库名
$username = 'root';  // 数据库用户名
$password = '123456';  // 数据库密码

次に、データベース操作用の関数をカプセル化する db.php という名前のファイルを作成します。サンプル コードは次のとおりです。

<?php
function connect() {
    global $host, $dbName, $username, $password;
    $conn = new mysqli($host, $username, $password, $dbName);
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    return $conn;
}

function query($conn, $sql) {
    $result = $conn->query($sql);
    $rows = array();
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $rows[] = $row;
        }
    }
    return $rows;
}

function insert($conn, $sql) {
    return $conn->query($sql);
}

次に、従業員関連のインターフェイスを提供するために、employee.php という名前のファイルを作成します。サンプル コードは次のとおりです。

<?php
require_once 'config.php';
require_once 'db.php';

function getEmployees() {
    $conn = connect();
    $sql = 'SELECT * FROM employee';
    $rows = query($conn, $sql);
    $conn->close();
    return $rows;
}

$method = $_SERVER['REQUEST_METHOD'];
if ($method === 'GET') {
    echo json_encode(getEmployees());
}

同様に、出席関連のインターフェイスを提供するために、attence.php という名前のファイルを作成します。サンプル コードは次のとおりです。

<?php
require_once 'config.php';
require_once 'db.php';

function getAttendance($employeeId, $month) {
    $conn = connect();
    $sql = "SELECT * FROM attendance WHERE employee_id = $employeeId AND DATE_FORMAT(date, '%Y-%m') = '$month'";
    $rows = query($conn, $sql);
    $conn->close();
    return $rows;
}

function addAttendance($employeeId, $date, $startTime, $endTime) {
    $conn = connect();
    $sql = "INSERT INTO attendance (employee_id, date, start_time, end_time) VALUES ($employeeId, '$date', '$startTime', '$endTime')";
    $result = insert($conn, $sql);
    $conn->close();
    return $result;
}

$method = $_SERVER['REQUEST_METHOD'];
if ($method === 'GET') {
    $employeeId = $_GET['employee_id'];
    $month = $_GET['month'];
    echo json_encode(getAttendance($employeeId, $month));
} elseif ($method === 'POST') {
    $employeeId = $_POST['employee_id'];
    $date = $_POST['date'];
    $startTime = $_POST['start_time'];
    $endTime = $_POST['end_time'];
    echo json_encode(addAttendance($employeeId, $date, $startTime, $endTime));
}

3. Vue を使用してフロントエンド インターフェイスを開発する
   Vue を使用してフロントエンド インターフェイスを開発する前に、まず Vue と Axios をインストールする必要があります。コマンド ライン ウィンドウで次のコマンドを実行します。

npm install vue axios --save

次に、出席記録を表示するための Attendance.vue という名前のファイルを作成します。サンプル コードは次のとおりです。

<template>
  <div>
    <h2>考勤记录</h2>
    <div v-for="record in records" :key="record.id">
      <p>{{ record.date }}: {{ record.start_time }} - {{ record.end_time }}</p>
      <p v-if="record.exception === 1" style="color: red;">异常</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      records: [],
    };
  },
  mounted() {
    this.getAttendance();
  },
  methods: {
    getAttendance() {
      const employeeId = 1;
      const month = '2021-01';
      axios.get(`http://localhost/attendance.php?employee_id=${employeeId}&month=${month}`)
        .then((response) => {
          this.records = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 20px;
  font-weight: bold;
}
</style>

4. 例外処理メカニズムの実装
   例外処理メカニズムは、オンライン従業員勤怠システムの非常に重要な部分です。勤怠データをアップロードする際には、一定のルールに従って勤怠記録が異常であるかどうかを判定し、異常な記録にマークを付ける必要があります。 attence.php ファイルに次のコードを追加して、例外処理メカニズムを実装できます。

function checkException($startTime, $endTime) {
    $start = strtotime($startTime);
    $end = strtotime($endTime);
    $workStart = strtotime('09:00:00');
    $workEnd = strtotime('18:00:00');
    if ($start > $workStart && $end < $workEnd) {
        return 0;  // 正常
    } else {
        return 1;  // 异常
    }
}

function addAttendance($employeeId, $date, $startTime, $endTime) {
    $exception = checkException($startTime, $endTime);
    $conn = connect();
    $sql = "INSERT INTO attendance (employee_id, date, start_time, end_time, exception) VALUES ($employeeId, '$date', '$startTime', '$endTime', $exception)";
    $result = insert($conn, $sql);
    $conn->close();
    return $result;
}

Attendance.vue ファイルでは、例外マークに基づいて例外情報を表示できます。サンプル コードは次のとおりです。

<template>
  <div>
    <h2>考勤记录</h2>
    <div v-for="record in records" :key="record.id">
      <p>{{ record.date }}: {{ record.start_time }} - {{ record.end_time }}</p>
      <p v-if="record.exception === 1" style="color: red;">异常</p>
    </div>
  </div>
</template>

この時点で、PHP と Vue を使用してオンライン従業員勤怠システムを開発するための例外処理メカニズムの実装が完了しました。

概要
この記事では、PHP と Vue を使用してオンライン従業員勤怠システムを開発する方法を紹介し、例外処理メカニズムの実装に焦点を当てます。データベースのテーブル構造を合理的に設計し、PHP を使用してバックエンド インターフェイスを開発し、Vue を使用してフロントエンド インターフェイスを開発することで、オンライン従業員勤怠システムを効率的に実装し、勤怠データの精度と処理効率を向上させることができます。同時に、例外処理メカニズムの実装により、勤怠の異常を適時に発見できるため、管理者による対処と追跡が容易になります。

以上がPHP と Vue を使用してオンライン従業員出席のための例外処理メカニズムを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。