当前位置：首页 > 文章列表 > 文章 > php教程 > 如何通过PHP和Vue生成在线员工考勤报告

如何通过PHP和Vue生成在线员工考勤报告

2023-10-06 09:02:43 0浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《如何通过PHP和Vue生成在线员工考勤报告》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

在现代的办公环境中，管理员工的考勤是非常重要的一项工作。而随着技术的不断发展，通过自动化系统生成在线员工考勤报告已经成为了一项常见的需求。本文将介绍如何使用PHP和Vue来实现这个功能，并提供具体的代码示例。

前期准备
在开始之前，我们需要确保服务器上已经安装了PHP和Vue的相关环境。如果没有安装，可以通过下面的链接找到相应的安装教程。

PHP的安装教程：https://www.php.net/manual/en/install.php
Vue的安装教程：https://vuejs.org/v2/guide/installation.html

创建数据库表
在生成考勤报告之前，我们需要先创建一个用于存储员工考勤记录的数据库表。可以使用下面的SQL语句来创建一个简单的表结构。

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;

在这个表中，我们存储了每一次打卡的相关信息，包括员工ID、日期、上班时间和下班时间等。

创建PHP后台文件
我们使用PHP来处理后台逻辑，并将数据从数据库中读取出来。首先我们需要创建一个名为 "getAttendance.php" 的文件，并写入以下代码：

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

在这个文件中，我们首先连接到数据库，然后查询数据库中的考勤记录，并将结果转换为JSON格式输出给前端。

创建Vue前端代码
接下来我们需要创建一个Vue的前端页面，用于展示考勤记录。首先创建一个名为 "index.html" 的文件，并引入Vue和axios库。然后写入以下代码：

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

在这段代码中，我们创建了一个Vue实例，并在mounted钩子函数中调用了getAttendance方法来获取考勤记录。然后使用v-for指令生成表格的每一行。