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

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

PHPz

リリース： 2023-09-25 10:04:02

オリジナル

1075 人が閲覧しました

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

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

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

設計を開始する前に、次の準備が整っていることを確認する必要があります:
#PHP および Vue 開発をサポートするサーバー;
PHP と Vue の基本的な構文と開発プロセスを理解します。
データベーステーブルの作成
まず、従業員の勤務スケジュール情報を保存するデータベーステーブルを作成する必要があります。次のフィールドを持つ「shifts」という名前のテーブルを作成するとします:

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

CREATE TABLE シフト (

id INT PRIMARY KEY AUTO_INCREMENT,

date DATE,

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

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

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

<?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」という名前のコンポーネントを作成します:

<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 ページにアクセスすると、従業員の勤務スケジュールインターフェイスが表示され、従業員のスケジュール情報を編集して保存できます。