Bagaimana untuk menggabungkan PHP dan Vue untuk melaksanakan fungsi statistik kehadiran pekerja-tutorial php-php.cn

Bagaimana untuk menggabungkan PHP dan Vue untuk melaksanakan fungsi statistik kehadiran pekerja

王林

Lepaskan： 2023-09-24 15:00:01

asal

1050 orang telah melayarinya

Bagaimana untuk menggabungkan PHP dan Vue untuk melaksanakan fungsi statistik kehadiran pekerja

Bagaimana untuk menggabungkan PHP dan Vue untuk melaksanakan fungsi statistik kehadiran pekerja?

Memandangkan skala perusahaan terus berkembang, statistik kehadiran pekerja telah menjadi bahagian penting dalam pengurusan perusahaan. Dengan bantuan dua teknologi berkuasa, PHP dan Vue, kami boleh melaksanakan fungsi statistik kehadiran pekerja dengan mudah dan memberikan pengalaman pengguna yang baik.

Di bawah, saya akan menggunakan contoh mudah untuk menunjukkan cara melaksanakan fungsi ini dengan menggabungkan PHP dan Vue. Pertama, kita perlu membina antara muka bahagian belakang yang mudah untuk mendapatkan data kehadiran pekerja.

Kod backend PHP adalah seperti berikut:

<?php
// 获取员工考勤数据
function getAttendanceData() {
    // 这里可以连接数据库，查询员工考勤数据并返回
    $attendanceData = [
        ['name' => '张三', 'date' => '2022-01-01', 'status' => '正常'],
        ['name' => '李四', 'date' => '2022-01-02', 'status' => '迟到'],
        ['name' => '王五', 'date' => '2022-01-03', 'status' => '早退'],
        // 其他员工考勤数据
    ];

    return json_encode($attendanceData);
}

// 输出员工考勤数据
echo getAttendanceData();
?>

Salin selepas log masuk

Kod di atas mentakrifkan fungsi mudah getAttendanceData, yang digunakan untuk mendapatkan data kehadiran pekerja. Di sini kita hanya mensimulasikan beberapa data dan mengeluarkan data dalam format JSON melalui fungsi json_encode. getAttendanceData，用于获取员工考勤数据。这里只是模拟了一些数据，并通过json_encode函数将数据以JSON格式输出。

接下来，我们使用Vue来构建前端界面，并使用Ajax来请求后端接口获取员工考勤数据。

前端代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>员工考勤统计</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>员工考勤统计</h1>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>日期</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="attendance in attendances" :key="attendance.name">
                    <td>{{ attendance.name }}</td>
                    <td>{{ attendance.date }}</td>
                    <td>{{ attendance.status }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                attendances: []
            },
            mounted() {
                this.getAttendanceData();
            },
            methods: {
                getAttendanceData() {
                    axios.get('api.php') // 调用后端接口
                        .then(response => {
                            this.attendances = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

Salin selepas log masuk

上述代码中，我们使用了Vue和Axios库。在Vue的mounted生命周期钩子中调用了getAttendanceData方法，该方法使用Axios发送GET请求到后端接口api.php获取员工考勤数据，并将返回的数据赋值给attendances

Seterusnya, kami menggunakan Vue untuk membina antara muka bahagian hadapan, dan menggunakan Ajax untuk meminta antara muka bahagian belakang untuk mendapatkan data kehadiran pekerja.

Kod bahagian hadapan adalah seperti berikut:

rrreee

Dalam kod di atas, kami menggunakan perpustakaan Vue dan Axios. Kaedah getAttendanceData dipanggil dalam cangkuk kitaran hayat mounted Vue, yang menggunakan Axios untuk menghantar permintaan GET ke antara muka hujung belakang api.php untuk mendapatkan data Kehadiran pekerja dan tetapkan data yang dikembalikan kepada tatasusunan kehadiran. Melalui pengikatan dua hala Vue, kami boleh memaparkan data kehadiran pekerja dalam jadual. 🎜🎜Perlu diingat bahawa dalam projek sebenar, anda perlu membuat pengubahsuaian dan pengembangan yang sesuai mengikut keperluan anda sendiri, seperti menambah lebih banyak medan data, menambah, memadam, mengubah suai dan menyemak data. 🎜🎜Dengan menggabungkan PHP dan Vue, kami berjaya melaksanakan fungsi statistik kehadiran pekerja yang mudah dan memberikan pengguna pengalaman pengguna yang baik. Ini hanyalah contoh asas, saya harap ia akan membantu anda dalam pembangunan projek sebenar. 🎜

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