Comment concevoir une page de suivi de la présence des employés en ligne à l'aide de PHP et Vue

Comment utiliser PHP et Vue pour concevoir une page de suivi des présences des employés en ligne

1. Introduction
Avec le développement de la technologie et les progrès de l'informatisation, de nombreuses entreprises et organisations recherchent activement des méthodes de gestion de bureau plus efficaces. Les pages de suivi de la présence des employés en ligne font partie intégrante de la gestion d'entreprise moderne. PHP et Vue sont actuellement des technologies de développement Web largement utilisées. Leur combinaison permet de concevoir facilement une puissante page de surveillance de la présence des employés en ligne.

2. Présentation technique

1. PHP : PHP est un langage de script côté serveur adapté au développement Web. Il est facile à apprendre et à utiliser, stable, fiable et hautement évolutif, et convient parfaitement à la création de pages Web et d'applications Web dynamiques.
2. Vue : Vue est un framework JavaScript permettant de créer des interfaces utilisateur. Il présente les caractéristiques de simplicité, d'efficacité, de facilité d'utilisation et de flexibilité, ainsi que la liaison de données bidirectionnelle, ce qui le rend très approprié pour le développement d'applications Web hautement interactives.

3. Idées de conception

1. Conception de base de données
   La page de suivi des présences doit stocker les enregistrements de présence des employés, une base de données doit donc être conçue pour stocker les données associées. Vous pouvez créer un tableau de données nommé « présence », qui contient des colonnes telles que le numéro d'employé, le nom, le temps de présence, etc.
2. Développement back-end
   Utilisez PHP pour créer une interface back-end afin d'atteindre les fonctions suivantes :
3. Ajouter des enregistrements de présence des employés : insérez des enregistrements dans la base de données en fonction de l'ID de l'employé et du temps de présence.
4. Interrogez les enregistrements de présence des employés : recherchez les enregistrements pertinents dans la base de données en fonction de l'ID de l'employé ou de la plage horaire de présence.
5. Développement front-end
   Utilisez Vue pour créer l'interface front-end afin d'atteindre les fonctions suivantes :
6. Affichage de la liste des enregistrements de présence des employés : affichez les enregistrements de présence interrogés dans la base de données sous forme de liste sur la page.
7. Recherchez et filtrez les enregistrements de présence des employés : recherchez et filtrez les enregistrements de présence en saisissant l'ID de l'employé ou en sélectionnant la plage horaire de présence.
8. Ajouter les enregistrements de présence des employés : fournissez des zones de saisie et des boutons pour implémenter la fonction d'ajout d'enregistrements de présence des employés sur la page.

IV. Exemple de code
Ce qui suit est un exemple de code simple qui montre comment concevoir une page de suivi de la présence des employés en ligne en PHP et Vue :

1. Code back-end PHP :

   <?php
   // 连接数据库
   $servername = "localhost";
   $username = "username";
   $password = "password";
   $dbname = "database";
   
   $conn = new mysqli($servername, $username, $password, $dbname);
   if ($conn->connect_error) {
    die("连接失败：" . $conn->connect_error);
   }
   
   // 添加员工考勤记录
   if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $employee_id = $_POST["employee_id"];
    $attendance_time = $_POST["attendance_time"];
   
    $sql = "INSERT INTO attendance (employee_id, attendance_time) VALUES ('$employee_id', '$attendance_time')";
    if ($conn->query($sql) === TRUE) {
        echo "记录添加成功";
    } else {
        echo "记录添加失败：" . $conn->error;
    }
   }
   
   // 查询员工考勤记录
   if ($_SERVER["REQUEST_METHOD"] == "GET") {
    $employee_id = $_GET["employee_id"];
    $start_date = $_GET["start_date"];
    $end_date = $_GET["end_date"];
   
    $sql = "SELECT * FROM attendance WHERE employee_id = '$employee_id' AND attendance_time BETWEEN '$start_date' AND '$end_date'";
    $result = $conn->query($sql);
   
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            echo "ID: " . $row["employee_id"]. " - 考勤时间: " . $row["attendance_time"]. "<br>";
        }
    } else {
        echo "未查询到相关记录";
    }
   }
   
   $conn->close();
   ?>

2. Vue front-end code :

   <!DOCTYPE html>
   <html>
   <head>
    <title>员工考勤监控页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
    <div id="app">
        <h1>员工考勤监控页面</h1>
        <input type="text" v-model="employeeId" placeholder="员工ID">
        <input type="text" v-model="startDate" placeholder="开始日期">
        <input type="text" v-model="endDate" placeholder="结束日期">
        <button @click="searchAttendance">搜索</button>
        <hr>
        <ul>
            <li v-for="item in attendanceList">{{ item }}</li>
        </ul>
        <hr>
        <input type="text" v-model="attendanceTime" placeholder="考勤时间">
        <button @click="addAttendance">添加考勤记录</button>
    </div>
   
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                employeeId: '',
                startDate: '',
                endDate: '',
                attendanceList: [],
                attendanceTime: '',
            },
            methods: {
                searchAttendance: function() {
                    // 发送GET请求查询员工考勤记录
                    this.attendanceList = []; // 清空列表
                    fetch('backend.php?employee_id=' + this.employeeId + '&start_date=' + this.startDate + '&end_date=' + this.endDate)
                        .then(response => response.text())
                        .then(data => {
                            if (data == "未查询到相关记录") {
                                alert(data);
                            } else {
                                this.attendanceList = data.split("<br>");
                            }
                        });
                },
                addAttendance: function() {
                    // 发送POST请求添加员工考勤记录
                    fetch('backend.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: 'employee_id=' + this.employeeId + '&attendance_time=' + this.attendanceTime,
                    })
                    .then(response => response.text())
                    .then(data => {
                        alert(data);
                    });
                }
            }
        });
    </script>
   </body>
   </html>

L'exemple de code ci-dessus démontre le processus de conception d'une simple page de suivi de la présence des employés en ligne. Grâce à la combinaison de PHP et Vue, nous pouvons facilement implémenter les fonctions d'ajout, d'interrogation et d'affichage des enregistrements de présence des employés. Bien entendu, des extensions et des optimisations plus fonctionnelles peuvent être nécessaires dans les projets réels, mais les idées et méthodes de base sont les mêmes.

Conclusion
PHP et Vue sont des technologies de développement Web très puissantes et populaires, et elles jouent un rôle essentiel dans la conception des pages de suivi de la présence des employés en ligne. En utilisant rationnellement ces deux technologies, nous pouvons développer rapidement une page de suivi de la présence des employés en ligne puissante et conviviale pour parvenir à une gestion de bureau efficace.

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!