How to combine PHP and Vue to implement the check-in and check-out function for employee attendance

How to combine PHP and Vue to implement the sign-in and sign-out function of employee attendance

Employee attendance is an essential management link for every enterprise, and sign-in and sign-out can be effective Keep track of employee work and attendance. This article will introduce how to combine PHP and Vue to implement the check-in and check-out function of employee attendance, and provide specific code examples.

1. Technology selection

To realize the check-in and check-out function of employee attendance, we choose PHP as the back-end development language and Vue as the front-end development framework. PHP can handle the background logic, and Vue can be responsible for the front-end display. The two work together to quickly implement functions.

2. Database design

First, we need to design a database to store employee attendance information. The following is a simple design example of an employee attendance table:

Employee attendance table (attendance)

• id: Attendance record ID (primary key)
• employee_id: Employee ID
• sign_in_time: Sign-in time
• sign_out_time: Sign-out time

3. Back-end implementation

1. Create a PHP file , named attendance.php, and introduce the database connection file.

<?php
include 'db_connect.php';

2. Implement employee sign-in function.

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

3. Implement employee sign-out function.

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

4. Front-end implementation

1. In the front-end project, use the Vue framework to create an employee attendance page, where you can choose to sign in or out.

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

2. Use Vue CLI for packaging and generate static files for background introduction.

5. Summary

By combining PHP and Vue, we can quickly implement the sign-in and sign-out function for employee attendance. PHP is responsible for processing the background logic, and Vue is responsible for the front-end display and sends requests to the background through the interface. The above is a simple example, you can expand and optimize it according to actual needs. To sum up, we can use PHP and Vue to implement the check-in and check-out function of employee attendance.

The above is the detailed content of How to combine PHP and Vue to implement the check-in and check-out function for employee attendance. For more information, please follow other related articles on the PHP Chinese website!