Bagaimana untuk menggabungkan PHP dan Vue untuk merealisasikan fungsi statistik kelewatan dan pelepasan awal kehadiran pekerja

Cara menggabungkan PHP dan Vue untuk melaksanakan fungsi statistik keluar lewat dan awal kehadiran pekerja

Dalam pengurusan perusahaan moden, pengurusan kehadiran adalah tugas yang sangat penting. Untuk mengira kehadiran pekerja dengan cekap, kami boleh menggunakan PHP dan Vue untuk melaksanakan fungsi statistik ketibaan lewat dan keluar awal. Berikut akan memperkenalkan cara menggunakan kedua-dua alatan ini untuk membina sistem pengurusan kehadiran yang mudah dan menyediakan contoh kod khusus.

1. Persediaan
   Sebelum anda bermula, anda perlu memastikan anda telah memasang persekitaran pembangunan PHP dan Vue. Anda boleh memuat turunnya dari tapak web rasmi dan ikut arahan untuk memasangnya.
2. Reka Bentuk Pangkalan Data
   Inti sistem pengurusan kehadiran ialah reka bentuk pangkalan data. Kita boleh mencipta jadual bernama "kehadiran", yang mengandungi medan berikut:

• id: pengecam unik rekod kehadiran
• employee_id: pengecam unik pekerja
• tarikh: tarikh kehadiran
• dalam_masa: masa jam masuk
• masa_luar: masa masuk jam

Anda boleh menambah medan lain pada jadual mengikut keperluan sebenar, seperti nama pekerja, jabatan, dsb.

3. Backend Development
   Gunakan PHP untuk mengendalikan logik bahagian belakang. Mula-mula, anda perlu menyambung ke pangkalan data dan menulis beberapa operasi tambahan, pemadaman, pengubahsuaian dan pertanyaan asas. Berikut ialah contoh kod PHP mudah:

$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

/Buat sambungan pangkalan data
$conn = mysqli baharu($nama pelayan, $nama pengguna, $kata laluan, $dbname);
jika ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

// Pertanyaan rekod kehadiran
$sql = "PILIH * DARI kehadiran";
$result = $conn->query($sql);

// Proses keputusan pertanyaan
jika ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
    // 处理每一条记录
}

} lain {

echo "0 results";

}

//Tutup sambungan pangkalan data
$conn->close();
?>

4. Pembangunan bahagian hadapan
   Gunakan Vue untuk membina antara muka bahagian hadapan dan berinteraksi dengan bahagian belakang melalui permintaan AJAX untuk data. Berikut ialah contoh kod Vue mudah:

(

data lalai{

return {
  attendanceData: []
};

},

mounted() {

this.fetchAttendanceData();

},

kaedah: {

fetchAttendanceData() {
  // 发起AJAX请求获取考勤数据
  axios.get('/api/attendance')
    .then(response => {
      this.attendanceData = response.data;
    })
    .catch(error => {
      console.log(error);
    });
}

}

};

Masukkan kod data dan statistik
5. memaparkan rekod kehadiran. Cetuskan permintaan AJAX dengan memanggil kaedah fetchAttendanceData() dan memberikan data yang dikembalikan ke halaman.
   

Dalam kod PHP, kami memperoleh rekod kehadiran daripada pangkalan data melalui pernyataan pertanyaan SQL dan memproses setiap rekod melalui gelung.

Untuk statistik mengenai ketibaan lewat dan keluar awal, logik yang berkaitan boleh ditambah pada gelung PHP untuk mengira bilangan ketibaan lewat dan berlepas awal dengan membandingkan masa mula dan tamat dengan masa yang ditentukan.

Ringkasnya, dengan menggabungkan PHP dan Vue, kita boleh merealisasikan fungsi statistik keluar lewat dan awal kehadiran pekerja. Melalui reka bentuk pangkalan data dan pembangunan bahagian belakang, kami boleh mendapatkan data kehadiran pekerja dan memprosesnya dengan sewajarnya, dan kemudian menggunakan Vue untuk membina antara muka hadapan untuk paparan data dan statistik. Saya harap contoh dan penjelasan kod di atas membantu anda dan membantu anda membina sistem pengurusan kehadiran yang mudah.

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