So entwickeln Sie ein Online-Anwesenheitssystem für Mitarbeiter mit PHP und Vue

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

Das Anwesenheitssystem ist eines der wichtigen Tools für die Unternehmensverwaltung. Es kann Unternehmen dabei helfen, die Anwesenheit von Mitarbeitern in Echtzeit zu überwachen und die Arbeitseffizienz und das Managementniveau zu verbessern. In diesem Artikel wird erläutert, wie Sie mithilfe des PHP- und Vue-Frameworks ein einfaches Online-Anwesenheitssystem für Mitarbeiter entwickeln und spezifische Codebeispiele bereitstellen.

1. Umgebungsvorbereitung:
Bevor Sie beginnen, müssen Sie die folgende Software und Tools installieren:

1. PHP-Umgebung: Stellen Sie sicher, dass PHP in Ihrer Entwicklungsumgebung installiert ist und PHP-Skripte ausführen kann.
2. MySQL-Datenbank: Das Anwesenheitssystem muss eine Datenbank verwenden, um Mitarbeiterinformationen und Anwesenheitsaufzeichnungen zu speichern. Sie müssen MySQL installieren und eine Datenbank erstellen, um relevante Daten zu speichern.
3. Vue.js: Vue.js ist ein beliebtes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Sie müssen Vue.js in Ihr Projekt einführen und seine grundlegende Verwendung verstehen.

2. Datenbanktabellen erstellen:
Um Mitarbeiterinformationen und Anwesenheitsdatensätze zu speichern, müssen wir zwei Datenbanktabellen erstellen: Mitarbeitertabelle und Anwesenheitsdatensatztabelle.

1. Mitarbeitertabellenstruktur:
   CREATE TABLE Mitarbeiter (
   id INT AUTO_INCREMENT PRIMARY KEY,
   Name VARCHAR(100) NOT NULL,
   Abteilung VARCHAR(100) NOT NULL
   );
2. Anwesenheitsdatensatztabellenstruktur:
   CREATE TABLE Anwesenheit (
   id int auto_increment Primärschlüssel,
   Amployee_id int nicht null,
   clock_in datetime nicht null,
   clock_out dateTime,
   foreign Key (Employee_id) Referenzen Mitarbeiter (ID)
   );

3. Back-End-Entwicklung:

1. Erstellen Sie eine PHP-Datei als Backend-Schnittstelle und nennen Sie sie attendance.php.
2. Mit der Datenbank verbinden:
   $conn = new mysqli("localhost", "username", "password", "database");
   if ($conn->connect_error) {
   die( „Verbindung fehlgeschlagen: „ ($ sql);
   $rows = array();
if ($result->num_rows > 0) {
3. while($row = $result->fetch_assoc()) {

    $rows[] = $row;

   
   }
   }
   echo json_encode ($rows);
   
   
   Mitarbeiter hinzufügen:
   $name = $_POST['name'];
   $department = $_POST['department'];
   
$sql = "INSERT INTO Mitarbeiter (Name, Abteilung) VALUES ('$name', '$department')";
4. if ($conn->query($sql) === TRUE) {
   

   echo "New employee added successfully";

   
   } else {
   

   echo "Error: " . $sql . "<br>" . $conn->error;

}

Anwesenheitsaufzeichnungen abrufen:

$sql = "SELECT attendance.*, Angestellte.name FROM Anwesenheit INNER JOIN Mitarbeiter ON Anwesenheit.employee_id = Angestellte.id";

$result = $conn-> query( $sql);

$rows = array();

if ($result->num_rows > 0) {
5. while($row = $result->fetch_assoc()) {

    $rows[] = $row;

   
   }
   }
   echo json_encode($rows);
   
   
   Einstempeln:
   $employee_id = $_POST['employee_id'];
   $clock_in = $_POST['clock_in'];
   $clock_out = $_POST[ 'clock_out' ];
6. $sql = "INSERT INTO attendance (employee_id, clock_in, clock_out) VALUES ('$employee_id', '$clock_in', '$clock_out')";
   if ($conn->query ($sql ) === TRUE) {
   

   echo "Clock in/out recorded successfully";

   
   } else {
   

   echo "Error: " . $sql . "<br>" . $conn->error;

}

4. Frontend-Entwicklung:

Erstellen Sie eine Vue-Komponente zum Anzeigen von Mitarbeiterlisten, zum Hinzufügen von Mitarbeitern und zum Einstempeln von Datensätzen.

Mitarbeiterliste

1.  {{ employee.name }} - {{ employee.department }}

2. 
   
   

   Mitarbeiter hinzufügen

   
   
   
   Mitarbeiter hinzufügen

   Punch -in record
   

   
   Mitarbeiter
   
   Arbeitszeiten

   Zeit, von der Arbeit zu kommen

   
   

   在Vue组件中，发送HTTP请求并获取数据：
   <script><br>export default {<br> data() {<br> return {<br> employees: [],<br> newEmployee: {},<br> records: []<br> };<br> },<br> mounted() {<br> this.getEmployees();<br> this.getRecords();<br> },<br> methods: {<br> getEmployees() {<br> fetch('attendance.php?type=getEmployees')<br> .then(response => response.json())<br> .then(data => {</script>

    this.employees = data;

   });
   },
   addEmployee() {
   fetch('attendance.php?type=addEmployee', {

    method: 'POST',
    body: JSON.stringify(this.newEmployee)

   })
   .then(response => response.text())
   .then(data => {

    alert(data);
    this.getEmployees();

   });
   },
   getRecords() {
   fetch('attendance.php?type=getRecords')
   .then(response => response.json())
   .then(data => {

    this.records = data;

   });
   },
   clockIn() {
   // 发送打卡请求
   },
   clockOut() {
   // 发送打卡请求
   }
   }
   }
   

   以上是使用PHP和Vue框架开发在线员工考勤系统的基本步骤和代码示例。希望本文能够为你提供参考和指导，祝你开发成功！

   {{ record.name }}	{{ record.clock_in }}	{{ record.clock_out }}

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie ein Online-Anwesenheitssystem für Mitarbeiter mit PHP und Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!