如何結合PHP和Vue實現員工考勤的簽到簽到功能

如何結合PHP和Vue實現員工考勤的簽到簽退功能

員工考勤是每個企業必不可少的管理環節，透過簽到簽退可以有效地追蹤員工的工作情況和考勤情況。本文將介紹如何結合PHP和Vue來實現員工考勤的簽到簽退功能，並提供具體的程式碼範例。

一、技術選型

要實現員工考勤的簽到簽到功能，我們選擇PHP作為後端開發語言，Vue作為前端開發框架。 PHP可以處理後台邏輯，Vue可以負責前台展示，兩者相互配合，能夠快速地實現功能。

二、資料庫設計

首先，我們需要設計一個資料庫來儲存員工的考勤資訊。以下是一個簡單的員工考勤表的設計範例：

員工考勤表（attendance）

• id：考勤記錄ID（主鍵）
• employee_id：員工ID
• sign_in_time：簽到時間
• sign_out_time：簽退時間

三、後端實作

##建立一個PHP文件，命名為attendance.php，並引入資料庫連接檔。

1. <?php
   include 'db_connect.php';

   登入後複製

實現員工簽到功能。

// 接收从前台传来的员工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 "签到失败";
}

登入後複製

實作員工簽退功能。

// 接收从前台传来的员工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 "签退失败";
}

登入後複製

在前端專案中，使用Vue框架建立員工考勤頁面，頁面上可以選擇簽到或簽回。

<template>
  <div>
    <h2>员工考勤</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>

登入後複製

使用Vue CLI進行打包，產生靜態文件，供後台引入。

以上是如何結合PHP和Vue實現員工考勤的簽到簽到功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！