如何使用PHP和Vue設計員工考勤系統的工作排班介面-php教程-PHP中文網

如何使用PHP和Vue設計員工考勤系統的工作排班介面

PHPz

發布： 2023-09-25 10:04:02

原創

1010 人瀏覽過

如何使用PHP和Vue設計員工考勤系統的工作排班介面

在現代企業中，員工考勤系統是非常重要的一部分，可以幫助企業管理人力資源和控制工作時間。設計一個高效率、易用的員工考勤系統的關鍵是合理的工作排班介面。本文將介紹如何使用PHP和Vue來設計員工考勤系統的工作排班介面，並提供具體的程式碼範例。

準備工作
在開始設計之前，需要確保已經具備以下幾點準備工作：
一台支援PHP和Vue開發的伺服器；
工作排班的相關數據，如員工清單、班次資訊等；
了解PHP和Vue的基本語法和開發流程。
建立資料庫表
首先，我們需要建立一個資料庫表，用來儲存員工的工作排班資訊。假設我們建立一個名為"shifts"的表，包含以下欄位：

id: 唯一標識符，用來區分不同的排班；
date:排班日期；
shift: 班次；
employee_id: 員工ID。

可以使用如下SQL語句來建立該表：

CREATE TABLE shifts (
id INT PRIMARY KEY AUTO_INCREMENT,
date DATE,
shift 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>

登入後複製