PHP と Vue を組み合わせて従業員の勤怠管理のチェックインおよびチェックアウト機能を実装する方法

PHP と Vue を組み合わせて従業員の勤怠管理のサインインおよびサインアウト機能を実装する方法

従業員の勤怠管理はあらゆる企業にとって重要な管理リンクであり、サインインとサインアウトを効果的に行うことができます。従業員の勤務状況と出席状況を追跡します。この記事では、PHP と Vue を組み合わせて従業員勤怠のチェックインおよびチェックアウト機能を実装する方法と、具体的なコード例を紹介します。

1. テクノロジーの選択

従業員勤怠のチェックインおよびチェックアウト機能を実現するために、バックエンド開発言語として PHP を選択し、フロントエンド開発フレームワークとして Vue を選択しました。 。 PHP はバックグラウンド ロジックを処理し、Vue はフロントエンド表示を担当し、この 2 つが連携して機能を迅速に実装します。

2. データベース設計

まず、従業員の勤怠情報を保存するデータベースを設計する必要があります。以下は、従業員勤怠テーブルの簡単な設計例です。

従業員勤怠テーブル (勤怠)

• id: 勤怠レコード ID (主キー)
• employee_id : 従業員 ID
• sign_in_time: サインイン時刻
• sign_out_time: サインアウト時刻

3. バックエンドの実装

1. attence.php という名前の PHP ファイルを作成し、データベース接続ファイルを導入します。

<?php
include 'db_connect.php';

2. 従業員サインイン機能を実装します。

// 接收从前台传来的员工ID
$employee_id = $_POST['employee_id'];

// 获取当前时间
$sign_in_time = date('Y-m-d H:i:s');

// 将签到信息插入到数据库
$sql = "INSERT INTO attendance (employee_id, sign_in_time) VALUES ('$employee_id', '$sign_in_time')";
$result = mysqli_query($conn, $sql);

if ($result) {
  echo "签到成功";
} else {
  echo "签到失败";
}

3. 従業員のサインアウト機能を実装します。

// 接收从前台传来的员工ID
$employee_id = $_POST['employee_id'];

// 获取当前时间
$sign_out_time = date('Y-m-d H:i:s');

// 更新签退时间
$sql = "UPDATE attendance SET sign_out_time = '$sign_out_time' WHERE employee_id = '$employee_id'";
$result = mysqli_query($conn, $sql);

if ($result) {
  echo "签退成功";
} else {
  echo "签退失败";
}

4. フロントエンドの実装

1. フロントエンド プロジェクトでは、Vue フレームワークを使用して、サインインを選択できる従業員勤怠ページを作成します。またはアウト。

<template>
  <div>
    <h2 id="员工考勤">员工考勤</h2>
    <select v-model="employeeId">
      <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
    </select>
    <button @click="signIn">签到</button>
    <button @click="signOut">签退</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employeeId: '',
      employees: [],
      message: ''
    }
  },
  mounted() {
    // 获取员工列表
    // 可以通过接口请求后台获取员工列表，这里直接模拟数据
    this.employees = [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' }
    ]
  },
  methods: {
    signIn() {
      // 向后台发送签到请求
      fetch('attendance.php', {
        method: 'POST',
        body: JSON.stringify({ employee_id: this.employeeId })
      })
        .then(response => response.text())
        .then(data => {
          this.message = data
        })
    },
    signOut() {
      // 向后台发送签退请求
      fetch('attendance.php', {
        method: 'POST',
        body: JSON.stringify({ employee_id: this.employeeId })
      })
        .then(response => response.text())
        .then(data => {
          this.message = data
        })
    }
  }
}
</script>

2. Vue CLI を使用してパッケージ化し、バックグラウンド導入用の静的ファイルを生成します。

5. まとめ

PHP と Vue を組み合わせることで、従業員の勤怠管理のためのサインインおよびサインアウト機能を迅速に実装できます。 PHP はバックグラウンド ロジックの処理を担当し、Vue はフロントエンド表示を担当し、インターフェイスを介してバックグラウンドにリクエストを送信します。上記は単純な例であり、実際のニーズに応じて拡張および最適化できます。要約すると、PHP と Vue を使用して、従業員勤怠のチェックインおよびチェックアウト機能を実装できます。

以上がPHP と Vue を組み合わせて従業員の勤怠管理のチェックインおよびチェックアウト機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。