Bagaimana untuk menjana laporan kehadiran pekerja dalam talian melalui PHP dan Vue-tutorial php-php.cn

Bagaimana untuk menjana laporan kehadiran pekerja dalam talian melalui PHP dan Vue

WBOY

Lepaskan： 2023-09-24 16:20:01

asal

755 orang telah melayarinya

Bagaimana untuk menjana laporan kehadiran pekerja dalam talian melalui PHP dan Vue

Cara menjana laporan kehadiran pekerja dalam talian melalui PHP dan Vue

Dalam persekitaran pejabat moden, mengurus kehadiran pekerja adalah tugas yang sangat penting. Dengan perkembangan teknologi yang berterusan, menjana laporan kehadiran pekerja dalam talian melalui sistem automatik telah menjadi keperluan biasa. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi ini, dan memberikan contoh kod khusus.

Persediaan awal
Sebelum kita mula, kita perlu memastikan bahawa persekitaran PHP dan Vue yang berkaitan telah dipasang pada pelayan. Jika ia tidak dipasang, anda boleh mendapatkan tutorial pemasangan yang sepadan melalui pautan di bawah.

Tutorial pemasangan PHP: https://www.php.net/manual/en/install.php
Tutorial pemasangan Vue: https://vuejs.org/v2/guide/installation.html

Cipta jadual pangkalan data
Sebelum menjana laporan kehadiran, kita perlu mencipta jadual pangkalan data untuk menyimpan rekod kehadiran pekerja. Anda boleh menggunakan pernyataan SQL berikut untuk mencipta struktur jadual ringkas.

CREATE TABLE `attendance` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `employee_id` int(11) NOT NULL,
  `date` date NOT NULL,
  `clock_in_time` time NOT NULL,
  `clock_out_time` time NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Salin selepas log masuk

Dalam jadual ini, kami menyimpan maklumat yang berkaitan bagi setiap penembusan, termasuk ID pekerja, tarikh, masa bekerja dan waktu luar tugas, dsb.

Buat fail latar belakang PHP
Kami menggunakan PHP untuk mengendalikan logik latar belakang dan membaca data daripada pangkalan data. Mula-mula kita perlu mencipta fail bernama "getAttendance.php" dan tulis kod berikut:

<?php

// 连接到数据库
$conn = new mysqli("localhost", "username", "password", "attendance");

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

// 查询数据库中的考勤记录
$sql = "SELECT * FROM attendance";
$result = $conn->query($sql);

// 检查查询结果是否为空
if ($result->num_rows > 0) {
    // 将查询结果转换为JSON格式，并输出给前端
    $rows = array();
    while ($row = $result->fetch_assoc()) {
        $rows[] = $row;
    }
    echo json_encode($rows);
} else {
    echo "没有找到考勤记录";
}

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

Salin selepas log masuk

Dalam fail ini, kita mula-mula menyambung ke pangkalan data, kemudian menanyakan rekod kehadiran dalam pangkalan data, dan menukar hasilnya kepada JSON The format dikeluarkan ke hujung hadapan.

Buat kod bahagian hadapan Vue
Seterusnya kita perlu mencipta halaman hujung hadapan Vue untuk memaparkan rekod kehadiran. Mula-mula buat fail bernama "index.html" dan perkenalkan perpustakaan Vue dan axios. Kemudian tulis kod berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工考勤报告</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>员工ID</th>
                    <th>日期</th>
                    <th>上班时间</th>
                    <th>下班时间</th>
                </tr>
            </thead>
            <tbody v-if="attendance.length">
                <tr v-for="record in attendance" :key="record.id">
                    <td>{{ record.employee_id }}</td>
                    <td>{{ record.date }}</td>
                    <td>{{ record.clock_in_time }}</td>
                    <td>{{ record.clock_out_time }}</td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="4">没有找到考勤记录</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                attendance: []
            },
            mounted() {
                this.getAttendance();
            },
            methods: {
                getAttendance() {
                    axios.get('getAttendance.php')
                        .then(response => {
                            this.attendance = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

Salin selepas log masuk

Dalam kod ini, kami mencipta contoh Vue dan memanggil kaedah getAttendance dalam fungsi cangkuk yang dipasang untuk mendapatkan rekod kehadiran. Kemudian gunakan arahan v-for untuk menjana setiap baris jadual.

Jalankan projek
Kini kita hanya perlu meletakkan dua fail di atas dalam direktori akar pelayan dan mengakses fail "index.html" dalam pelayar untuk melihat laporan kehadiran pekerja dalam talian yang dihasilkan.

Melalui langkah di atas, kami berjaya menggunakan PHP dan Vue untuk menjana laporan kehadiran pekerja dalam talian. Sudah tentu, ini hanyalah contoh mudah, dan anda boleh membuat perkembangan yang lebih kompleks berdasarkan keperluan sebenar. Harap artikel ini membantu anda!

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