So verwenden Sie PHP und Vue, um eine Online-Anwesenheitsdatenabfrage für Mitarbeiter zu entwickeln

So verwenden Sie PHP und Vue, um eine Online-Punch-In-Datensatzabfrage für die Anwesenheit von Mitarbeitern zu entwickeln

In modernen Unternehmen ist die Verwaltung der Anwesenheit von Mitarbeitern eine sehr wichtige Aufgabe. Herkömmliche manuelle Aufzeichnungen sind fehleranfällig und für Abfragen und Statistiken unpraktisch. Mit den leistungsstarken Funktionen von PHP und Vue können wir ein Online-Abfragesystem für Anwesenheitsstempel von Mitarbeitern entwickeln, das die Anwesenheitsverwaltung effizienter, bequemer und genauer macht.

1. Projektvorbereitung
Bevor wir beginnen, müssen wir die folgende Entwicklungsumgebung und Tools vorbereiten:

• Eine PHP-Entwicklungsumgebung (wie XAMPP)
• Ein Texteditor (wie Sublime Text, Visual Studio Code usw.) )
• Eine MySQL-Datenbank
• Vue.js-Entwicklungsumgebung (Sie können Vue CLI verwenden)

2 Datenbankdesign
Wir müssen eine MySQL-Datenbank erstellen, um Mitarbeiterinformationen und Stempeldaten zu speichern. Entwerfen Sie eine Datenbank mit dem Namen „attendance_management“, die zwei Tabellen enthält: Mitarbeiter und Anwesenheit. In der Tabelle „Mitarbeiter“ werden grundlegende Informationen zu Mitarbeitern gespeichert, einschließlich der folgenden Felder: ID (automatisch inkrementierender Primärschlüssel), Name (Name des Mitarbeiters), Abteilung (Abteilung, zu der sie gehören) usw. Die Anwesenheitstabelle wird zum Speichern von Anwesenheitsaufzeichnungen verwendet, einschließlich der folgenden Felder: id (Primärschlüssel für automatisches Inkrementieren), Employee_id (Mitarbeiter-ID), check_in_time (Einstempeln), check_out_time (Einstempeln) usw.

3. Backend-Entwicklung

1. Erstellen Sie einen Projektordner mit dem Namen „attendance_management“.
2. Erstellen Sie im Projektordner einen Ordner mit dem Namen „backend“, um Hintergrundcode zu speichern.
3. Erstellen Sie im Backend-Ordner einen Ordner mit dem Namen „config“, um die Konfigurationsdatei zu speichern.
4. Erstellen Sie im Backend-Ordner einen Ordner mit dem Namen „api“, um API-bezogenen Code zu speichern.
5. Erstellen Sie eine Datei mit dem Namen „database.php“ im Konfigurationsordner, um die Datenbankverbindungsinformationen zu konfigurieren.

return [

'host' => 'localhost',
'username' => 'root',
'password' => 'your_password',
'database' => 'attendance_management',

];
?>

6. Erstellen Sie eine Datei mit dem Namen „employees.php“ im API-Ordner, um mitarbeiterbezogene API-Anfragen zu verarbeiten.

require_once '../config/database.php';

class Employees {

private $conn;
private $table = 'employees';

public function __construct($db) {
    $this->conn = $db;
}

public function getEmployees() {
    $query = 'SELECT * FROM ' . $this->table;

    $stmt = $this->conn->prepare($query);
    $stmt->execute();

    return $stmt;
}

}
?>

7. Erstellen Sie eine Datei mit dem Namen „attendance.php“ im API-Ordner File , wird zur Verarbeitung anwesenheitsbezogener API-Anfragen verwendet.

require_once '../config/database.php';

class Attendance {

private $conn;
private $table = 'attendance';

public function __construct($db) {
    $this->conn = $db;
}

public function getAttendanceByEmployeeId($employeeId) {
    $query = 'SELECT * FROM ' . $this->table . ' WHERE employee_id = ?';

    $stmt = $this->conn->prepare($query);
    $stmt->bindParam(1, $employeeId);
    $stmt->execute();

    return $stmt;
}

}
?>

4. Öffnen Sie die Befehlszeile im Im Projektordner führen Sie den folgenden Befehl aus, um Vue CLI zu installieren (Sie müssen sicherstellen, dass Node.js installiert ist):

1. npm install -g @vue/cli

Führen Sie den folgenden Befehl im Projektordner aus, um ein Vue zu erstellen Projekt mit dem Namen „Frontend“:

2. vue create frontend

Geben Sie den Frontend-Ordner ein und führen Sie den folgenden Befehl aus, um Vue Router und Axios zu installieren:

3. cd frontend
npm install vue-router axios

Erstellen Sie eine Datei mit dem Namen „components“ im frontend/src-Verzeichnis „Ordner, der zum Speichern von Vue-Komponenten verwendet wird.

Erstellen Sie im Komponentenordner eine Datei mit dem Namen „Attendance.vue“, um Anwesenheitsaufzeichnungen anzuzeigen.
... Routing-Konfiguration hinzufügen.

import Vue from 'vue';

import VueRouter from 'vue-router';

import Attendance from '../components/Attendance.vue';

Vue.use(VueRouter);

constroutes = [

<div>
    <h2>员工考勤记录</h2>
    <select v-model="selectedEmployee" @change="onEmployeeChange">
        <option v-for="employee in employees" :value="employee.id">{{ employee.name }}</option>
    </select>
    <table>
        <thead>
            <tr>
                <th>打卡时间</th>
                <th>下班打卡时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="record in attendance">
                <td>{{ record.check_in_time }}</td>
                <td>{{ record.check_out_time }}</td>
            </tr>
        </tbody>
    </table>
</div>

];

const router = new VueRouter({

data() {
    return {
        employees: [],
        selectedEmployee: null,
        attendance: []
    };
},
mounted() {
    this.getEmployees();
},
methods: {
    getEmployees() {
        axios.get('http://localhost/backend/api/employees.php')
            .then(response => {
                this.employees = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    },
    onEmployeeChange() {
        axios.get('http://localhost/backend/api/attendance.php?employeeId=' + this.selectedEmployee)
            .then(response => {
                this.attendance = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
}

6. });
export default router;


5. Führen Sie das Projekt aus


Starten Sie zuerst die PHP-Entwicklungsumgebung (z. B. XAMPP) und stellen Sie sicher, dass Die Datenbankverbindung ist normal.

Erstellen Sie eine Datei mit dem Namen „.htaccess“ im Backend-Ordner, um das URL-Umschreiben zu konfigurieren.

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?/$1 [L]

Führen Sie Folgendes im Frontend-Ordner aus Befehl zum Ausführen des Vue-Projekts:
npm run serve
2. Öffnen Sie den Browser und besuchen Sie http://localhost:8080, um die Benutzeroberfläche für die Anwesenheitsliste der Mitarbeiter anzuzeigen.
Nach der Auswahl eines Mitarbeiters ruft die Seite die Backend-API basierend auf der ID des Mitarbeiters auf, um den Punch-In-Datensatz des Mitarbeiters abzurufen und ihn in der Tabelle anzuzeigen.



Durch die oben genannten Entwicklungsschritte haben wir erfolgreich ein Online-Abfragesystem für Anwesenheitslisten von Mitarbeitern implementiert, das mit PHP und Vue entwickelt wurde. Benutzer können ihre Anwesenheitslisten einsehen, indem sie Mitarbeiter auswählen, was nicht nur die Effizienz der Anwesenheitsverwaltung verbessert, sondern auch das Auftreten menschlicher Fehler reduziert. Gleichzeitig zeigt uns dieses Projekt auch die grundlegenden Schritte und technischen Punkte zur Kombination von PHP und Vue für die Full-Stack-Entwicklung. Ich hoffe, dieser Artikel ist hilfreich für Sie und wünsche Ihnen viel Erfolg beim Programmieren!


Das obige ist der detaillierte Inhalt vonSo verwenden Sie PHP und Vue, um eine Online-Anwesenheitsdatenabfrage für Mitarbeiter zu entwickeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!