So erstellen Sie einen Online-Mitarbeiteranwesenheitsbericht über PHP und Vue-PHP-Tutorial-php.cn

So erstellen Sie einen Online-Mitarbeiteranwesenheitsbericht über PHP und Vue

WBOY

Freigeben： 2023-09-24 16:20:01

Original

816 Leute haben es durchsucht

So erstellen Sie einen Online-Mitarbeiteranwesenheitsbericht über PHP und Vue

So erstellen Sie einen Online-Anwesenheitsbericht für Mitarbeiter mit PHP und Vue

In der modernen Büroumgebung ist die Verwaltung der Mitarbeiteranwesenheit eine sehr wichtige Aufgabe. Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Erstellung von Online-Anwesenheitsberichten für Mitarbeiter mithilfe automatisierter Systeme zu einer allgemeinen Anforderung geworden. In diesem Artikel wird erläutert, wie Sie PHP und Vue zum Implementieren dieser Funktion verwenden, und es werden spezifische Codebeispiele bereitgestellt.

Vorbereitende Vorbereitung
Bevor wir beginnen, müssen wir sicherstellen, dass die zugehörigen Umgebungen von PHP und Vue auf dem Server installiert wurden. Wenn es nicht installiert ist, finden Sie das entsprechende Installations-Tutorial über den unten stehenden Link.

PHP-Installationsanleitung: https://www.php.net/manual/en/install.php
Vue-Installationsanleitung: https://vuejs.org/v2/guide/installation.html

Datenbanktabelle erstellen
Bevor wir den Anwesenheitsbericht erstellen, müssen wir eine Datenbanktabelle erstellen, um die Anwesenheitsdaten der Mitarbeiter zu speichern. Mit der folgenden SQL-Anweisung können Sie eine einfache Tabellenstruktur erstellen.

CREATE TABLE `attendance` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `employee_id` int(11) NOT NULL,
  `date` date NOT NULL,
  `clock_in_time` time NOT NULL,
  `clock_out_time` time NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Nach dem Login kopieren

In dieser Tabelle speichern wir die relevanten Informationen jedes Punch-Ins, einschließlich Mitarbeiter-ID, Datum, Arbeitszeit und dienstfreie Zeit usw.

PHP-Hintergrunddateien erstellen
Wir verwenden PHP, um die Hintergrundlogik zu verwalten und Daten aus der Datenbank zu lesen. Zuerst müssen wir eine Datei mit dem Namen „getAttendance.php“ erstellen und den folgenden Code schreiben:

<?php

// 连接到数据库
$conn = new mysqli("localhost", "username", "password", "attendance");

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

// 查询数据库中的考勤记录
$sql = "SELECT * FROM attendance";
$result = $conn->query($sql);

// 检查查询结果是否为空
if ($result->num_rows > 0) {
    // 将查询结果转换为JSON格式，并输出给前端
    $rows = array();
    while ($row = $result->fetch_assoc()) {
        $rows[] = $row;
    }
    echo json_encode($rows);
} else {
    echo "没有找到考勤记录";
}

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

Nach dem Login kopieren

In dieser Datei stellen wir zunächst eine Verbindung zur Datenbank her, fragen dann die Anwesenheitsdatensätze in der Datenbank ab und konvertieren die Ergebnisse in JSON Format wird an das Frontend ausgegeben.

Vue-Frontend-Code erstellen
Als nächstes müssen wir eine Vue-Frontend-Seite erstellen, um Anwesenheitslisten anzuzeigen. Erstellen Sie zunächst eine Datei mit dem Namen „index.html“ und führen Sie die Vue- und Axios-Bibliotheken ein. Schreiben Sie dann den folgenden Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工考勤报告</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>员工ID</th>
                    <th>日期</th>
                    <th>上班时间</th>
                    <th>下班时间</th>
                </tr>
            </thead>
            <tbody v-if="attendance.length">
                <tr v-for="record in attendance" :key="record.id">
                    <td>{{ record.employee_id }}</td>
                    <td>{{ record.date }}</td>
                    <td>{{ record.clock_in_time }}</td>
                    <td>{{ record.clock_out_time }}</td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="4">没有找到考勤记录</td>
                </tr>
            </tbody>
        </table>
    </div>

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

Nach dem Login kopieren

In diesem Code erstellen wir eine Vue-Instanz und rufen die getAttendance-Methode in der gemounteten Hook-Funktion auf, um den Anwesenheitsdatensatz abzurufen. Verwenden Sie dann die v-for-Direktive, um jede Zeile der Tabelle zu generieren.

Führen Sie das Projekt aus
Jetzt müssen wir nur noch die beiden oben genannten Dateien im Stammverzeichnis des Servers ablegen und im Browser auf die Datei „index.html“ zugreifen, um den generierten Online-Anwesenheitsbericht der Mitarbeiter anzuzeigen.

Durch die oben genannten Schritte haben wir PHP und Vue erfolgreich eingesetzt, um einen Online-Anwesenheitsbericht für Mitarbeiter zu erstellen. Dies ist natürlich nur ein einfaches Beispiel, und Sie können komplexere Entwicklungen basierend auf den tatsächlichen Anforderungen vornehmen. Ich hoffe, dieser Artikel ist hilfreich für Sie!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Online-Mitarbeiteranwesenheitsbericht über PHP und Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!