Maison > Article > développement back-end > Comment utiliser PHP et Vue pour créer une interface de visualisation de données pour la présence des employés

Comment utiliser PHP et Vue pour créer une interface de visualisation de données pour la présence des employés

WBOYoriginal: 2023-09-26 13:49:51675parcourir

Introduction :
Dans la gestion d'entreprise moderne, la présence des employés est un lien très important. Afin d'améliorer l'efficacité de la gestion et de contrôler la présence des employés, de nombreuses entreprises ont adopté des systèmes de présence automatisés. Cet article utilisera le framework PHP et Vue pour créer une interface de visualisation de données pour la présence des employés afin d'aider les entreprises à mieux surveiller et analyser les données de présence des employés.

1. Collecte et stockage des données
Tout d'abord, nous devons collecter les données de présence des employés et les stocker dans la base de données. Les données de présence comprennent les noms des employés, l'heure d'arrivée, le statut de présence et d'autres informations.

En PHP, vous pouvez utiliser la base de données MySQL pour le stockage. Tout d'abord, nous devons créer une base de données nommée « présence », puis créer une table nommée « employé » avec les champs : identifiant, nom, heure et statut.

Voici l'exemple de code correspondant :

// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "attendance";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 创建员工表格
$sql = "CREATE TABLE employee (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(30) NOT NULL,
    time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    status ENUM('迟到', '早退', '请假', '正常') NOT NULL
)";

if ($conn->query($sql) === TRUE) {
    echo "表格已创建成功";
} else {
    echo "创建表格失败: " . $conn->error;
}

$conn->close();

2. Créer une interface de visualisation de données
Ensuite, nous utilisons le framework Vue pour créer une interface de visualisation de données afin que les entreprises puissent visualiser visuellement l'état de présence des employés.

Partie front-end
Dans la partie front-end, nous utilisons les composants Vue pour définir l'interface de visualisation de données pour la présence des employés. Tout d'abord, nous devons introduire les bibliothèques Vue et Axios (utilisées pour l'envoi de requêtes HTTP) et créer une instance Vue.

Ce qui suit est l'exemple de code correspondant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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="employee in employees" :key="employee.id">
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.time }}</td>
                    <td>{{ employee.status }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                employees: []
            },
            mounted() {
                this.fetchEmployees();
            },
            methods: {
                fetchEmployees() {
                    axios.get('api.php')
                        .then(response => {
                            this.employees = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

Partie backend
Dans la partie backend, nous devons utiliser PHP pour écrire une API afin d'obtenir les données de présence des employés de la base de données et de les renvoyer au frontend.

Voici l'exemple de code correspondant :

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "attendance";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT * FROM employee";
$result = $conn->query($sql);

$employees = array();

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $employees[] = $row;
    }
}

echo json_encode($employees);

$conn->close();
?>

3. Affichage des résultats
Grâce aux étapes ci-dessus, nous avons réussi à créer une interface de visualisation de données pour la présence des employés. Lors de l'accès à la page, le front-end envoie une requête HTTP pour obtenir les données de présence des employés renvoyées par le back-end et les affiche dans un tableau.

Grâce à cette interface, les chefs d'entreprise peuvent comprendre intuitivement l'état de présence de chaque employé, découvrir et gérer les anomalies de présence en temps opportun et améliorer l'efficacité de la gestion.

Conclusion :
En utilisant une combinaison de PHP et Vue, nous avons implémenté une interface simple de visualisation des données de présence des employés. Bien sûr, ce n'est qu'un exemple de base, et vous pouvez l'étendre et l'optimiser en fonction de la situation réelle pour répondre à vos propres besoins.

J'espère que cet article vous sera utile pour créer une interface de visualisation des données de présence des employés !

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!

php mysql 数据库 http 自动化 axios

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment gérer la migration des données et la synchronisation des systèmes comptables - Méthodes pour mettre en œuvre la migration et la synchronisation des données à l'aide de PHPArticle suivant：Comment gérer la migration des données et la synchronisation des systèmes comptables - Méthodes pour mettre en œuvre la migration et la synchronisation des données à l'aide de PHP

Articles Liés

Voir plus