Cara menjana laporan keluar lewat dan awal untuk kehadiran pekerja melalui PHP dan Vue-tutorial php-php.cn

Cara menjana laporan keluar lewat dan awal untuk kehadiran pekerja melalui PHP dan Vue

王林

Lepaskan： 2023-09-24 12:46:01

asal

1298 orang telah melayarinya

Cara menjana laporan keluar lewat dan awal untuk kehadiran pekerja melalui PHP dan Vue

Cara menjana kehadiran pekerja lewat dan laporan keluar awal melalui PHP dan Vue

Kehadiran pekerja ialah kerja pengurusan yang penting dalam perusahaan Merekod kelewatan dan keluar awal pekerja dengan tepat boleh membantu meningkatkan kecekapan kehadiran dan disiplin pekerja. Artikel ini akan memperkenalkan cara menjana laporan keluar lewat dan awal untuk kehadiran pekerja melalui teknologi PHP dan Vue, dan menyediakan contoh kod khusus untuk rujukan pembaca.

1. Buat pangkalan data dan jadual data
Pertama, anda perlu mencipta pangkalan data bernama "kehadiran" dan mencipta jadual data bernama "kehadiran_pekerja" dalam pangkalan data. Struktur jadual data perlu mengandungi medan berikut:

id: id pekerja
nama: nama pekerja
tarikh: tarikh kehadiran
masa_masuk: masa masuk di tempat kerja
masa_habis: masa masuk jam di tempat kerja

2. Kod hujung belakang (PHP)
Berikut ialah contoh kod menggunakan PHP untuk melaksanakan logik hujung belakang:

<?php
// 建立数据库连接
$conn = new mysqli("localhost", "username", "password", "attendance");

// 获取员工考勤数据
$query = "SELECT * FROM employee_attendance";
$result = $conn->query($query);
$attendanceData = array();

// 循环遍历查询结果
while ($row = $result->fetch_assoc()) {
    $attendanceData[] = $row;
}

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

// 输出JSON格式的结果
header('Content-Type: application/json');
echo json_encode($attendanceData);
?>

Salin selepas log masuk

3. Kod hujung hadapan (Vue)
Berikut ialah contoh kod menggunakan Vue untuk melaksanakan antara muka bahagian hadapan dan pengikatan data:

<!DOCTYPE html>
<html>
<head>
    <title>员工考勤报表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>员工考勤报表</h1>
        <table>
            <thead>
                <tr>
                    <th>员工姓名</th>
                    <th>考勤日期</th>
                    <th>上班打卡时间</th>
                    <th>下班打卡时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="employee in employees">
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.date }}</td>
                    <td>{{ employee.time_in }}</td>
                    <td>{{ employee.time_out }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                employees: [],
            },
            mounted() {
                fetch('backend.php')
                    .then(response => response.json())
                    .then(data => this.employees = data)
                    .catch(error => console.log(error));
            },
        });
    </script>
</body>
</html>

Salin selepas log masuk

4. Penyerahan Dan jalankan
Simpan kod bahagian belakang di atas sebagai "backend.php" dan kod bahagian hadapan sebagai "frontend.html". Letakkan kedua-dua fail dalam pelayan web dan pastikan pelayan anda menyokong perpustakaan PHP dan Vue.js. Kemudian dengan mengakses halaman "frontend.html", anda boleh melihat laporan keluar lewat dan awal kehadiran pekerja.

Ringkasan
Artikel ini menggunakan teknologi PHP dan Vue untuk menjana kehadiran pekerja laporan keluar lewat dan awal, pertanyaan data daripada pangkalan data melalui kod PHP bahagian belakang dan mengeluarkannya dalam format JSON. Kod Vue bahagian hadapan melaksanakan paparan data dan pengikatan dinamik. Saya harap contoh dalam artikel ini akan membantu pembaca memahami dan menggunakan teknologi PHP dan Vue untuk menjana laporan kehadiran pekerja.

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