Cara menjana laporan rekod pengecualian kehadiran pekerja melalui PHP dan Vue

Cara menjana laporan rekod pengecualian kehadiran pekerja melalui PHP dan Vue

Pengenalan: Dengan perkembangan perusahaan dan peningkatan bilangan pekerja, pengurusan Kehadiran pekerja menjadi semakin kompleks. Untuk memudahkan pengurus memahami dengan cepat status kehadiran pekerja, adalah penting untuk menjana laporan rekod pengecualian kehadiran pekerja. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi ini, dan memberikan contoh kod khusus.

1. Persediaan
Sebelum bermula, kita perlu menyediakan kerja berikut:

1. Pasang persekitaran pembangunan PHP, seperti XAMPP atau WAMP.
2. Pasang persekitaran pembangunan Vue.js.
3. Buat jadual pekerja dan jadual rekod kehadiran dalam pangkalan data.

2. Bina antara muka bahagian belakang

1. Buat fail PHP dan namakannya "api.php".

2. Dalam "api.php", sambung ke pangkalan data dan tulis penyata SQL untuk menanyakan data kehadiran. Sebagai contoh, dengan mengandaikan kita mempunyai jadual pekerja "pekerja" dan jadual rekod kehadiran "kehadiran", kita boleh menggunakan pernyataan SQL berikut untuk menanyakan rekod semua pengecualian kehadiran:

   SELECT employees.name, attendance.date, attendance.reason
   FROM employees
   INNER JOIN attendance ON employees.id = attendance.employee_id
   WHERE attendance.status = '异常'

3. Tukar hasil pertanyaan ke dalam format JSON dan keluarkannya ke halaman hujung hadapan. Contohnya,

   $result = $db->query($sql);
   $data = array();
   while ($row = $result->fetch_assoc()) {
    $data[] = $row;
   }
   echo json_encode($data);

3 Cipta komponen Vue

1. Cipta komponen Vue dan namakannya ". AttendanceReport" , dan diperkenalkan dalam halaman.

   <template>
     <div>
    <h1>员工考勤异常记录报告</h1>
    <table>
      <thead>
        <tr>
          <th>员工姓名</th>
          <th>考勤日期</th>
          <th>异常原因</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in records" :key="record.id">
          <td>{{ record.name }}</td>
          <td>{{ record.date }}</td>
          <td>{{ record.reason }}</td>
        </tr>
      </tbody>
    </table>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      records: []
    };
     },
     mounted() {
    this.fetchRecords();
     },
     methods: {
    fetchRecords() {
      // 使用Axios发送GET请求到后台接口
      axios.get('/api.php')
        .then(response => {
          this.records = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
     }
   };
   </script>

4. Mulakan projek

1. Sepadukan komponen Vue dan antara muka hujung belakang ke dalam projek.
2. Dalam fail entri Vue, perkenalkan dan daftar komponen "Laporan Kehadiran".
3. Dalam halaman HTML, gunakan teg "laporan kehadiran" untuk memperkenalkan komponen "Laporan Kehadiran".
4. Mulakan persekitaran pembangunan PHP dan Vue, lawati halaman dan anda boleh melihat laporan rekod pengecualian kehadiran pekerja yang dihasilkan.

Kesimpulan:
Melalui gabungan PHP dan Vue, kami boleh menjana laporan rekod pengecualian kehadiran pekerja dengan pantas. PHP menyediakan antara muka bahagian belakang untuk menyoal data dalam pangkalan data dan mengeluarkannya ke bahagian hadapan dalam format JSON. Sebagai rangka kerja hadapan, Vue bertanggungjawab untuk memaparkan dan memproses data. Pembangun hanya perlu mengikuti langkah di atas untuk membina persekitaran dan menulis kod untuk melaksanakan fungsi dan meningkatkan kecekapan kerja.

Lampiran: Contoh kod lengkap
api.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "attendance";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检测连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT employees.name, attendance.date, attendance.reason
        FROM employees
        INNER JOIN attendance ON employees.id = attendance.employee_id
        WHERE attendance.status = '异常'";
$result = $conn->query($sql);

$data = array();
while ($row = $result->fetch_assoc()) {
    $data[] = $row;
}

echo json_encode($data);

$conn->close();
?>

App.vue

<template>
  <div>
    <attendance-report></attendance-report>
  </div>
</template>

<script>
import AttendanceReport from './components/AttendanceReport.vue';

export default {
  components: {
    AttendanceReport
  }
};
</script>

main.js#🎜#main.js#🎜 🎜🎜#Di atas ialah langkah dan contoh kod khusus tentang cara menjana laporan rekod pengecualian kehadiran pekerja melalui PHP dan Vue. Menggunakan kaedah ini, pengurus boleh melihat pengecualian kehadiran pekerja dengan cepat dan meningkatkan kecekapan dan ketepatan kerja. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara menjana laporan rekod pengecualian kehadiran pekerja melalui PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!