PHP と Vue を使用して従業員勤怠システムの勤務スケジュール インターフェイスを設計する方法

PHP と Vue を使用して従業員勤怠管理システムの作業スケジュール インターフェイスを設計する方法

現代の企業では、従業員勤怠管理システムは非常に重要な部分であり、企業経営を支援します 人事と労働時間の管理。効率的で使いやすい従業員勤怠システムを設計する鍵となるのは、合理的な作業スケジュール インターフェイスです。この記事では、PHP と Vue を使用して従業員勤怠システムの勤務スケジュール インターフェイスを設計する方法を紹介し、具体的なコード例を示します。

#準備
1. 設計を開始する前に、次の準備が整っていることを確認する必要があります:
   #PHP および Vue 開発をサポートするサーバー;
# #従業員リスト、シフト情報などの勤務スケジュールに関連するデータ;
2. PHP と Vue の基本的な構文と開発プロセスを理解します。
3. データベース テーブルの作成
4. まず、従業員の勤務スケジュール情報を保存するデータベース テーブルを作成する必要があります。次のフィールドを持つ「shifts」という名前のテーブルを作成するとします:
5. 
   
id: 異なるシフトを区別するために使用される一意の識別子;

date: シフトの日付;
• shift: シフト;
• employee_id: 従業員 ID。
• 次の SQL ステートメントを使用して、このテーブルを作成できます:

CREATE TABLE シフト (

id INT PRIMARY KEY AUTO_INCREMENT,

date DATE,

シフト) VARCHAR(10 ),
employee_id INT
);


PHP バックエンド インターフェイスの作成

次に、フロントエンド リクエストを処理し、通信するための PHP バックエンド インターフェイスを作成する必要があります。データベースと対話します。まず、「getShifts.php」という名前のファイルを作成して、従業員のスケジュール情報を取得するためのインターフェイスを実装します。

3. <?php
   // 连接数据库
   $conn = new mysqli("localhost", "username", "password", "database_name");
   
   // 检查连接是否成功
   if ($conn->connect_error) {
       die("连接失败: " . $conn->connect_error);
   }
   
   // 获取所有员工排班信息
   $sql = "SELECT * FROM shifts";
   $result = $conn->query($sql);
   
   // 将结果转化为JSON格式并返回
   $shifts = [];
   if ($result->num_rows > 0) {
       while ($row = $result->fetch_assoc()) {
           $shifts[] = $row;
       }
   }
   echo json_encode($shifts);
   
   // 关闭连接
   $conn->close();
   ?>

   
   同様に、従業員のスケジュール情報を保存するためのインターフェイスも作成する必要があります。 saveShifts.php" ファイル:

<?php
// 连接数据库
$conn = new mysqli("localhost", "username", "password", "database_name");

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

// 获取前端发送的员工排班信息
$data = json_decode(file_get_contents('php://input'), true);

// 清空原有的员工排班信息
$sql = "TRUNCATE TABLE shifts";
$conn->query($sql);

// 保存新的员工排班信息
foreach ($data as $shift) {
    $date = $shift['date'];
    $shiftType = $shift['shift'];
    $employeeId = $shift['employee_id'];
    
    $sql = "INSERT INTO shifts (date, shift, employee_id) VALUES ('$date', '$shiftType', $employeeId)";
    $conn->query($sql);
}

// 关闭连接
$conn->close();
?>

Vue フロントエンド インターフェイスの作成

次に、Vue フロントエンド インターフェイスの作成を開始します。まず、従業員の勤務スケジュールを表示するために「ShiftSchedule.vue」という名前のコンポーネントを作成します:

4. <template>
     <div>
       <table>
         <thead>
           <tr>
             <th>Date</th>
             <th>Shift</th>
             <th>Employee ID</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(shift, index) in shifts" :key="index">
             <td>{{ shift.date }}</td>
             <td>{{ shift.shift }}</td>
             <td>{{ shift.employee_id }}</td>
           </tr>
         </tbody>
       </table>
       <button @click="saveShifts">Save</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         shifts: []
       }
     },
     mounted() {
       this.getShifts();
     },
     methods: {
       getShifts() {
         fetch('getShifts.php')
           .then(response => response.json())
           .then(data => this.shifts = data);
       },
       saveShifts() {
         fetch('saveShifts.php', {
           method: 'POST',
           body: JSON.stringify(this.shifts)
         })
           .then(response => {
             if (response.ok) {
               alert('保存成功');
             } else {
               alert('保存失败');
             }
           });
       }
     }
   }
   </script>

   
   次に、このコンポーネントをメイン アプリケーションで使用します:

<template>
  <div>
    <h1>员工考勤系统 - 工作排班界面</h1>
    <ShiftSchedule></ShiftSchedule>
  </div>
</template>

<script>
import ShiftSchedule from './ShiftSchedule.vue';

export default {
  components: {
    ShiftSchedule
  }
}
</script>

Runアプリケーション

次に、PHP と Vue コードをサーバーに配置し、アプリケーションを実行します。この Web ページにアクセスすると、従業員の勤務スケジュール インターフェイスが表示され、従業員のスケジュール情報を編集して保存できます。

5. 
   概要
この記事では、PHP と Vue を使用して従業員勤怠管理システムの勤務スケジュール インターフェイスを設計する方法を紹介します。データベース テーブルを作成し、PHP インターフェイスを記述し、Vue フロントエンド インターフェイスを開発することで、従業員のシフト情報の取得・保存機能を実現します。実際の開発では、特定のニーズに応じてインターフェイスとインターフェイスを拡張および最適化できます。この記事が、従業員勤怠システムの勤務スケジュール インターフェイスの設計に役立つことを願っています。

以上がPHP と Vue を使用して従業員勤怠システムの勤務スケジュール インターフェイスを設計する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。