So erstellen Sie mit PHP und Vue Berichte über verspätete und vorzeitige Abreisen für die Mitarbeiteranwesenheit-PHP-Tutorial-php.cn

So erstellen Sie mit PHP und Vue Berichte über verspätete und vorzeitige Abreisen für die Mitarbeiteranwesenheit

王林

Freigeben： 2023-09-24 12:46:01

Original

1332 Leute haben es durchsucht

So erstellen Sie mit PHP und Vue Berichte über verspätete und vorzeitige Abreisen für die Mitarbeiteranwesenheit

So erstellen Sie Berichte über verspätete und vorzeitige Abreisen von Mitarbeitern mit PHP und Vue

Die genaue Erfassung von verspäteten und vorzeitigen Abreisen von Mitarbeitern kann dazu beitragen, die Anwesenheitseffizienz und die Disziplin der Mitarbeiter zu verbessern. In diesem Artikel wird vorgestellt, wie mithilfe von PHP- und Vue-Technologien Berichte über verspätete und vorzeitige Abreisen für die Mitarbeiteranwesenheit erstellt werden, und es werden spezifische Codebeispiele als Referenz für die Leser bereitgestellt.

1. Datenbank und Datentabelle erstellen
Zuerst müssen Sie eine Datenbank mit dem Namen „attendance“ erstellen und in der Datenbank eine Datentabelle mit dem Namen „employee_attendance“ erstellen. Die Struktur der Datentabelle muss die folgenden Felder enthalten:

id: Mitarbeiter-ID
Name: Mitarbeitername
Datum: Anwesenheitsdatum
time_in: Einstempelzeit am Arbeitsplatz
time_out: Einstempelzeit bei der Arbeit

2. Back-End-Code (PHP)
Das Folgende ist ein Codebeispiel mit PHP zur Implementierung der Back-End-Logik:

<?php
// 建立数据库连接
$conn = new mysqli("localhost", "username", "password", "attendance");

// 获取员工考勤数据
$query = "SELECT * FROM employee_attendance";
$result = $conn->query($query);
$attendanceData = array();

// 循环遍历查询结果
while ($row = $result->fetch_assoc()) {
    $attendanceData[] = $row;
}

// 关闭数据库连接
$conn->close();

// 输出JSON格式的结果
header('Content-Type: application/json');
echo json_encode($attendanceData);
?>

Nach dem Login kopieren

3. Front-End-Code (Vue)
Das Folgende ist ein Codebeispiel mit Vue zur Implementierung der Frontend-Schnittstelle und Datenbindung:

<!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>
        <table>
            <thead>
                <tr>
                    <th>员工姓名</th>
                    <th>考勤日期</th>
                    <th>上班打卡时间</th>
                    <th>下班打卡时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="employee in employees">
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.date }}</td>
                    <td>{{ employee.time_in }}</td>
                    <td>{{ employee.time_out }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                employees: [],
            },
            mounted() {
                fetch('backend.php')
                    .then(response => response.json())
                    .then(data => this.employees = data)
                    .catch(error => console.log(error));
            },
        });
    </script>
</body>
</html>

Nach dem Login kopieren

4. Bereitstellung und Ausführung
Speichern Sie den obigen Backend-Code als „backend.php“ und den Frontend-Code als „frontend.html“. Legen Sie beide Dateien auf einem Webserver ab und stellen Sie sicher, dass Ihr Server PHP- und Vue.js-Bibliotheken unterstützt. Wenn Sie dann auf die Seite „frontend.html“ zugreifen, können Sie den Bericht über die Anwesenheit der Mitarbeiter bei verspätetem und vorzeitigem Abgang einsehen.

Zusammenfassung
Dieser Artikel verwendet zwei Technologien, PHP und Vue, um Berichte über die verspätete und vorzeitige Anwesenheit von Mitarbeitern zu erstellen, Daten aus der Datenbank über den Back-End-PHP-Code abzufragen und sie im JSON-Format auszugeben. Der Front-End-Vue-Code implementiert die Datenanzeige und die dynamische Bindung. Ich hoffe, dass die Beispiele in diesem Artikel den Lesern helfen werden, die PHP- und Vue-Technologie zu verstehen und anzuwenden, um Mitarbeiteranwesenheitsberichte zu erstellen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit PHP und Vue Berichte über verspätete und vorzeitige Abreisen für die Mitarbeiteranwesenheit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!