Bagaimana untuk menggabungkan PHP dan Vue untuk merealisasikan fungsi statistik masa bekerja kehadiran pekerja

Cara menggabungkan PHP dan Vue untuk merealisasikan fungsi statistik masa bekerja kehadiran pekerja

Dalam pengurusan perusahaan moden, statistik masa nyata dan analisis kehadiran pekerja adalah salah satu cara penting untuk meningkatkan kecekapan kerja dan tahap pengurusan. Sebagai bahasa pengaturcaraan sebelah pelayan yang popular, PHP boleh memproses data dan berinteraksi dengan pangkalan data dengan mudah. Vue ialah rangka kerja bahagian hadapan yang popular yang boleh menyediakan antara muka pengguna yang kaya dan fungsi interaktif. Menggabungkan PHP dan Vue, kami boleh melaksanakan fungsi statistik masa bekerja untuk kehadiran pekerja.

Pertama, kita perlu mencipta jadual yang sepadan dalam pangkalan data untuk menyimpan data kehadiran pekerja. Katakan kita mencipta jadual bernama kehadiran dengan medan berikut: id, id_pekerja, daftar_masuk, daftar_keluar. id ialah pengecam unik rekod kehadiran, employee_id ialah pengecam unik pekerja, daftar_masuk ialah waktu bekerja dan daftar_keluar ialah masa luar tugas.

Seterusnya, kita perlu menulis kod PHP untuk melaksanakan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan data. Ambil fungsi mendapatkan rekod kehadiran pekerja pada hari tertentu sebagai contoh Contoh kod adalah seperti berikut:

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 获取参数
$employee_id = $_POST['employee_id'];
$date = $_POST['date'];

// 查询数据
$sql = "SELECT * FROM attendance WHERE employee_id='$employee_id' AND DATE(check_in)='$date'";
$result = $conn->query($sql);

// 处理结果
if ($result->num_rows > 0) {
    $attendance = array();
    while ($row = $result->fetch_assoc()) {
        $attendance[] = $row;
    }
    echo json_encode($attendance);
} else {
    echo "没有找到考勤记录";
}

// 关闭数据库连接
$conn->close();
?>

Kod di atas mendapatkan id pekerja dan parameter tarikh dengan menyambung ke pangkalan data, kemudian menanyakan kehadiran. rekod dalam pangkalan data, dan menukar hasilnya kepada JSON Format dikembalikan ke bahagian hadapan.

Dari segi Vue, kami boleh menggunakan komponenisasi Vue dan fungsi pengikatan data untuk membina halaman untuk statistik kehadiran pekerja dan masa bekerja. Berikut ialah contoh kod mudah:

<template>
  <div>
    <!-- 员工选择 -->
    <select v-model="selectedEmployee">
      <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
    </select>
    
    <!-- 日期选择 -->
    <input type="date" v-model="selectedDate">
    
    <!-- 查询按钮 -->
    <button @click="queryAttendance">查询</button>
    
    <!-- 考勤记录 -->
    <table v-if="attendance.length > 0">
      <thead>
        <tr>
          <th>日期</th>
          <th>上班时间</th>
          <th>下班时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in attendance" :key="record.id">
          <td>{{ record.check_in }}</td>
          <td>{{ record.check_out }}</td>
        </tr>
      </tbody>
    </table>
    <p v-else>没有找到考勤记录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employees: [], // 所有员工
      selectedEmployee: '', // 选中的员工
      selectedDate: '', // 选中的日期
      attendance: [], // 考勤记录
    };
  },
  methods: {
    queryAttendance() {
      // 发送请求到后端
      // 假设请求的URL是/api/getAttendance.php
      axios.post('/api/getAttendance.php', {
        employee_id: this.selectedEmployee,
        date: this.selectedDate,
      })
        .then(response => {
          this.attendance = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
  mounted() {
    // 获取所有员工列表
    // 假设请求的URL是/api/getEmployees.php
    axios.get('/api/getEmployees.php')
      .then(response => {
        this.employees = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

Kod di atas menggunakan pengikatan data Vue untuk mengawal pemilihan pekerja, pemilihan tarikh dan paparan rekod kehadiran. Apabila pengguna mengklik butang pertanyaan, permintaan akan dihantar ke bahagian belakang dan rekod kehadiran akan dikemas kini berdasarkan data yang dikembalikan. Pada masa yang sama, apabila halaman dimuatkan, senarai semua pekerja juga diperoleh untuk dipilih oleh pengguna.

Dengan menggabungkan PHP dan Vue, kami boleh melaksanakan fungsi statistik masa bekerja kehadiran pekerja dengan mudah. Kod di atas hanyalah contoh Pelaksanaan sebenar juga mungkin perlu mempertimbangkan beberapa faktor lain, seperti pengurusan kebenaran, pengesahan data, pengoptimuman antara muka, dsb. Tetapi secara umum, gabungan PHP dan Vue boleh memberikan kami alat yang berkuasa untuk melaksanakan sistem statistik kehadiran dan masa bekerja pekerja dengan cepat.

Atas ialah kandungan terperinci Bagaimana untuk menggabungkan PHP dan Vue untuk merealisasikan fungsi statistik masa bekerja kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!