Home > Article > Backend Development > How to combine PHP and Vue to implement employee attendance statistics function

How to combine PHP and Vue to implement employee attendance statistics function

王林Original: 2023-09-24 14:57:361045browse

How to combine PHP and Vue to implement employee attendance statistics function?

With the continuous expansion of the scale of enterprises, employee attendance statistics have become an important part of enterprise management. With the help of two powerful technologies, PHP and Vue, we can easily implement the employee attendance statistics function and provide a good user experience.

Below, I will use a simple example to show how to combine PHP and Vue to achieve this function. First, we need to build a simple backend interface to obtain employee attendance data.

The PHP backend code is as follows:

<?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();
?>

The above code defines a simple function getAttendanceData, which is used to obtain employee attendance data. Here we just simulate some data and output the data in JSON format through the json_encode function.

Next, we use Vue to build the front-end interface, and use Ajax to request the back-end interface to obtain employee attendance data.

The front-end code is as follows:

<!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>

In the above code, we use the Vue and Axios libraries. The getAttendanceData method is called in Vue's mounted life cycle hook, which uses Axios to send a GET request to the back-end interface api.php to obtain employee attendance data. And assign the returned data to the attendances array. Through Vue's two-way binding, we can display employee attendance data in the table.

It should be noted that in actual projects, you need to make appropriate modifications and expansions according to your own needs, such as adding more data fields, adding, deleting, modifying, and checking data.

By combining PHP and Vue, we successfully implemented a simple employee attendance statistics function and provided users with a good user experience. This is just a basic example, I hope it will be helpful to you in the development of actual projects.

The above is the detailed content of How to combine PHP and Vue to implement employee attendance statistics function. For more information, please follow other related articles on the PHP Chinese website!

php json ajax 接口 axios

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement the answer ranking function in online quizzesNext article：How to implement the answer ranking function in online quizzes

See more

How to combine PHP and Vue to implement employee attendance statistics function

Related articles