Comment générer un rapport de présence des employés en ligne via PHP et Vue-tutoriel php-php.cn

Comment générer un rapport de présence des employés en ligne via PHP et Vue

WBOY

Libérer： 2023-09-24 16:20:01

original

816 Les gens l'ont consulté

Comment générer un rapport de présence des employés en ligne via PHP et Vue

Dans l'environnement de bureau moderne, la gestion de la présence des employés est une tâche très importante. Avec le développement continu de la technologie, la génération de rapports de présence des employés en ligne via des systèmes automatisés est devenue une exigence courante. Cet article expliquera comment utiliser PHP et Vue pour implémenter cette fonction et fournira des exemples de code spécifiques.

Préparation préliminaire
Avant de commencer, nous devons nous assurer que les environnements PHP et Vue pertinents ont été installés sur le serveur. S'il n'est pas installé, vous pouvez trouver le tutoriel d'installation correspondant via le lien ci-dessous.

Tutoriel d'installation de PHP : https://www.php.net/manual/en/install.php
Tutoriel d'installation de Vue : https://vuejs.org/v2/guide/installation.html

Créer une table de base de données
Avant de générer le rapport de présence, nous devons créer une table de base de données pour stocker les enregistrements de présence des employés. Vous pouvez utiliser l'instruction SQL suivante pour créer une structure de table simple.

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;

Copier après la connexion

Dans ce tableau, nous stockons les informations pertinentes de chaque pointage, y compris l'identifiant de l'employé, la date, le temps de travail et les heures de repos, etc.

Créer des fichiers d'arrière-plan PHP
Nous utilisons PHP pour gérer la logique d'arrière-plan et lire les données de la base de données. Nous devons d'abord créer un fichier nommé "getAttendance.php" et écrire le code suivant :

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

Copier après la connexion

Dans ce fichier, nous nous connectons d'abord à la base de données, puis interrogeons les enregistrements de présence dans la base de données et convertissons les résultats en JSON. Le format est affiché sur le front-end.

Créer le code frontal de Vue
Ensuite, nous devons créer une page frontale Vue pour afficher les enregistrements de présence. Créez d'abord un fichier nommé "index.html" et introduisez les bibliothèques Vue et axios. Écrivez ensuite le code suivant :

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

Copier après la connexion

Dans ce code, nous créons une instance Vue et appelons la méthode getAttendance dans la fonction hook montée pour obtenir l'enregistrement de présence. Utilisez ensuite la directive v-for pour générer chaque ligne du tableau.

Exécutez le projet
Il ne nous reste plus qu'à placer les deux fichiers ci-dessus dans le répertoire racine du serveur et à accéder au fichier "index.html" dans le navigateur pour voir le rapport de présence des employés en ligne généré.

Grâce aux étapes ci-dessus, nous avons utilisé avec succès PHP et Vue pour générer un rapport de présence des employés en ligne. Bien entendu, il ne s’agit que d’un exemple simple, et vous pouvez réaliser des développements plus complexes en fonction des besoins réels. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!