Heim >Backend-Entwicklung >PHP-Tutorial >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:
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
return [
'host' => 'localhost', 'username' => 'root', 'password' => 'your_password', 'database' => 'attendance_management',
];
?>
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; }
}
?>
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):
Führen Sie den folgenden Befehl im Projektordner aus, um ein Vue zu erstellen Projekt mit dem Namen „Frontend“:
Geben Sie den Frontend-Ordner ein und führen Sie den folgenden Befehl aus, um Vue Router und Axios zu installieren:
Erstellen Sie eine Datei mit dem Namen „components“ im frontend/src-Verzeichnis „Ordner, der zum Speichern von Vue-Komponenten verwendet wird.
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>
];
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); }); } }
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 OnRewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-dRewriteRule ^(.*)$ index.php?/$1 [L]
Führen Sie Folgendes im Frontend-Ordner aus Befehl zum Ausführen des Vue-Projekts:
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!