PHP與Vue實現在線員工考勤補卡申請模塊開髮指南

引言

隨著企業信息化進程的推進，越來越多公司採用在線考勤系統來管理員工出勤情況。在實際工作中，員工可能因特殊原因需要補卡，本文將講解如何使用PHP和Vue開發一個在線員工考勤的補卡申請模塊，並提供具體代碼示例。

技術選型

在開發過程中，後端使用PHP處理服務器邏輯和數據庫操作，前端使用Vue構建交互式界面，實現表單提交和數據展示。

後端開發

首先，需要創建PHP文件處理補卡申請邏輯，包括數據庫連接、數據驗證及操作。

 // 連接數據庫$conn = new mysqli("localhost", "username", "password", "database");

// 檢查數據庫連接是否成功if ($conn->connect_error) {
    die("數據庫連接失敗: " . $conn->connect_error);
}

// 處理補卡申請的邏輯操作if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 獲取補卡申請提交的表單數據$employee_id = $_POST["employee_id"];
    $date = $_POST["date"];
    $reason = $_POST["reason"];

    // 編寫SQL語句，將補卡申請數據插入到數據庫中$sql = "INSERT INTO attendance (employee_id, date, reason) VALUES ('$employee_id', '$date', '$reason')";

    if ($conn->query($sql) === TRUE) {
        echo "補卡申請成功";
    } else {
        echo "補卡申請失敗: " . $conn->error;
    }

    $conn->close();
}

前端開發

前端使用Vue實現補卡申請表單和與後端的交互，通過組件化開發提高可維護性。

<form @submit="submitForm">
  <label for="employee_id">員工ID:</label>
  <input type="text" id="employee_id" v-model="employeeId">
  <br>
  <label for="date">日期:</label>
  <input type="date" id="date" v-model="date">
  <br>
  <label for="reason">原因:</label>
  <textarea id="reason" v-model="reason"></textarea>
  <br>
  <button type="submit">提交</button>
</form>

export default {
  data() {
    return {
      employeeId: '',
      date: '',
      reason: ''
    }
  },
  methods: {
    submitForm() {
      // 發送POST請求到後端axios.post('api/apply.php', {
        employee_id: this.employeeId,
        date: this.date,
        reason: this.reason
      })
      .then(response => {
        console.log(response.data);
        // 處理補卡申請結果})
      .catch(error => {
        console.error(error);
      });
    }
  }
}

總結

通過以上步驟，我們成功實現了使用PHP和Vue開發在線員工考勤補卡申請模塊。員工可以在網頁上填寫申請表單，並將數據提交到後端進行處理。本文提供了完整開發思路和代碼示例，方便開發者快速上手，實現企業內部考勤管理自動化。