Comment combiner PHP et Vue pour implémenter la fonction de statistiques de présence des employés-tutoriel php-php.cn

Comment combiner PHP et Vue pour implémenter la fonction de statistiques de présence des employés

王林

Libérer： 2023-09-24 15:00:01

original

1026 Les gens l'ont consulté

Comment combiner PHP et Vue pour implémenter la fonction de statistiques de présence des employés

Comment combiner PHP et Vue pour implémenter la fonction de statistiques de présence des employés ?

À mesure que la taille des entreprises continue de croître, les statistiques de présence des employés sont devenues un élément important de la gestion de l'entreprise. Avec l'aide de deux technologies puissantes, PHP et Vue, nous pouvons facilement implémenter la fonction de statistiques de présence des employés et offrir une bonne expérience utilisateur.

Ci-dessous, j'utiliserai un exemple simple pour montrer comment implémenter cette fonction en combinant PHP et Vue. Tout d’abord, nous devons créer une interface backend simple pour obtenir les données de présence des employés.

Le code backend PHP est le suivant :

<?php
// 获取员工考勤数据
function getAttendanceData() {
    // 这里可以连接数据库，查询员工考勤数据并返回
    $attendanceData = [
        ['name' => '张三', 'date' => '2022-01-01', 'status' => '正常'],
        ['name' => '李四', 'date' => '2022-01-02', 'status' => '迟到'],
        ['name' => '王五', 'date' => '2022-01-03', 'status' => '早退'],
        // 其他员工考勤数据
    ];

    return json_encode($attendanceData);
}

// 输出员工考勤数据
echo getAttendanceData();
?>

Copier après la connexion

Le code ci-dessus définit une fonction simple getAttendanceData, qui est utilisée pour obtenir les données de présence des employés. Ici, nous simulons simplement certaines données et produisons les données au format JSON via la fonction json_encode. getAttendanceData，用于获取员工考勤数据。这里只是模拟了一些数据，并通过json_encode函数将数据以JSON格式输出。

接下来，我们使用Vue来构建前端界面，并使用Ajax来请求后端接口获取员工考勤数据。

前端代码如下：

<!DOCTYPE html>
<html>
<head>
    <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="attendance in attendances" :key="attendance.name">
                    <td>{{ attendance.name }}</td>
                    <td>{{ attendance.date }}</td>
                    <td>{{ attendance.status }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                attendances: []
            },
            mounted() {
                this.getAttendanceData();
            },
            methods: {
                getAttendanceData() {
                    axios.get('api.php') // 调用后端接口
                        .then(response => {
                            this.attendances = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

Copier après la connexion

上述代码中，我们使用了Vue和Axios库。在Vue的mounted生命周期钩子中调用了getAttendanceData方法，该方法使用Axios发送GET请求到后端接口api.php获取员工考勤数据，并将返回的数据赋值给attendances

Ensuite, nous utilisons Vue pour créer l'interface front-end et utilisons Ajax pour demander à l'interface back-end d'obtenir les données de présence des employés.

Le code front-end est le suivant :

rrreee

Dans le code ci-dessus, nous utilisons les bibliothèques Vue et Axios. La méthode getAttendanceData est appelée dans le hook de cycle de vie monté de Vue, qui utilise Axios pour envoyer une requête GET à l'interface backend api.php pour obtenir données de présence des employés et attribuez les données renvoyées au tableau présences. Grâce à la liaison bidirectionnelle de Vue, nous pouvons afficher les données de présence des employés dans le tableau. 🎜🎜Il convient de noter que dans les projets réels, vous devez apporter les modifications et extensions appropriées en fonction de vos propres besoins, telles que l'ajout de champs de données supplémentaires, l'ajout, la suppression, la modification et la vérification des données. 🎜🎜En combinant PHP et Vue, nous avons réussi à implémenter une fonction simple de statistiques de présence des employés et à offrir aux utilisateurs une bonne expérience utilisateur. Ceci n'est qu'un exemple de base, j'espère qu'il vous sera utile dans le développement de projets réels. 🎜

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment combiner PHP et Vue pour implémenter la fonction de statistiques de présence des employés