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

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

WBOY

Libérer： 2023-09-26 13:50:01

original

779 Les gens l'ont consulté

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

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!