How to generate late and early departure reports for employee attendance through PHP and Vue-PHP Tutorial-php.cn

How to generate late and early departure reports for employee attendance through PHP and Vue

王林

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

Original

1343 people have browsed it

How to generate late and early departure reports for employee attendance through PHP and Vue

Employee attendance is an important management task in the enterprise. Accurately recording the late and early departure of employees is Helps improve attendance efficiency and employee discipline. This article will introduce how to generate late and early departure reports for employee attendance through PHP and Vue technologies, and provide specific code examples for readers' reference.

1. Create database and data table
First you need to create a database named "attendance" and create a data table named "employee_attendance" in the database. The structure of the data table needs to contain the following fields:

id: employee id
name: employee name
date: attendance date
time_in: Clock-in time at work
time_out: Clock-in time at work

2. Back-end code (PHP)
The following is a code example that uses PHP to implement back-end logic:

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

Copy after login

3. Front-end code (Vue)
The following is a code example using Vue to implement the front-end interface and data binding:

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

Copy after login

4. Deployment and operation
Put the above backend The code is saved as "backend.php" and the front-end code is saved as "frontend.html". Place both files in a web server and make sure your server supports PHP and Vue.js libraries. Then by accessing the "frontend.html" page, you can see the late and early departure report of employee attendance.

Summary
This article uses PHP and Vue technologies to generate employee attendance late and early departure reports, queries the data from the database through the back-end PHP code, and outputs it in JSON format. The front-end Vue code implements data display and dynamic binding. I hope the examples in this article will help readers understand and apply PHP and Vue technology to generate employee attendance reports.

The above is the detailed content of How to generate late and early departure reports for employee attendance through PHP and Vue. For more information, please follow other related articles on the PHP Chinese website!