How to use PHP and Vue to design the work scheduling interface of the employee attendance system

How to use PHP and Vue to design the work scheduling interface of the employee attendance system

In modern enterprises, the employee attendance system is a very important part and can help enterprise management Human resources and controlling working hours. The key to designing an efficient and easy-to-use employee attendance system is a reasonable work scheduling interface. This article will introduce how to use PHP and Vue to design the work scheduling interface of the employee attendance system, and provide specific code examples.

1. Preparation
   Before starting the design, you need to ensure that you have the following preparations:
2. A server that supports PHP and Vue development;
3. Data related to work schedules, such as employee lists, shift information, etc.;
4. Understand the basic syntax and development process of PHP and Vue.
5. Create database table
   First, we need to create a database table to store employee work schedule information. Suppose we create a table named "shifts" with the following fields:

• id: a unique identifier used to distinguish different shifts;
• date: Shift date;
• shift: shift;
• employee_id: employee ID.

You can use the following SQL statement to create this table:

CREATE TABLE shifts (
id INT PRIMARY KEY AUTO_INCREMENT,
date DATE,
shift VARCHAR(10 ),
employee_id INT
);

3. Create PHP backend interface
   Next, we need to create a PHP backend interface to handle front-end requests and communicate with interact with the database. We first create a file named "getShifts.php" to implement the interface for obtaining employee scheduling information:

<?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();
?>

Similarly, we also need to create an interface for saving employee scheduling information , implemented in the "saveShifts.php" file:

<?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();
?>

4. Creating the Vue front-end interface
   Now, we start to create the Vue front-end interface. We first create a component named "ShiftSchedule.vue" to display the employee's work schedule:

<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>

Next, we use this component in the main application:

<template>
  <div>
    <h1>员工考勤系统 - 工作排班界面</h1>
    <ShiftSchedule></ShiftSchedule>
  </div>
</template>

<script>
import ShiftSchedule from './ShiftSchedule.vue';

export default {
  components: {
    ShiftSchedule
  }
}
</script>

5. Run the application
   Next, we place the PHP and Vue code on the server and run the application. Visit this webpage to see the employee's work schedule interface, and you can edit and save the employee's schedule information.

Summary
This article introduces how to use PHP and Vue to design the work schedule interface of the employee attendance system. By creating database tables, writing PHP interfaces and developing Vue front-end interfaces, the acquisition and The function of saving employee shift information. In actual development, interfaces and interfaces can be expanded and optimized according to specific needs. I hope this article will be helpful to you in designing the work scheduling interface of the employee attendance system.

The above is the detailed content of How to use PHP and Vue to design the work scheduling interface of the employee attendance system. For more information, please follow other related articles on the PHP Chinese website!