So implementieren Sie die Funktion zur automatischen Generierung der Mitarbeiteranwesenheit über PHP und Vue

So realisieren Sie die Funktion zur automatischen Generierung der Mitarbeiteranwesenheit durch PHP und Vue

Einführung:
Die Mitarbeiteranwesenheit ist ein sehr wichtiger Teil der Unternehmensverwaltung. Die herkömmliche manuelle Erfassung von Anwesenheitsdaten ist zeitaufwändig, arbeitsintensiv und fehleranfällig. Mit Hilfe der beiden leistungsstarken Entwicklungstools PHP und Vue können wir die Funktion zur automatischen Generierung der Mitarbeiteranwesenheit einfach realisieren und die Genauigkeit der Anwesenheitsdaten und die Arbeitseffizienz verbessern. In diesem Artikel wird detailliert beschrieben, wie die Funktion zur automatischen Generierung der Mitarbeiteranwesenheit über PHP und Vue implementiert wird, und es werden spezifische Codebeispiele beigefügt.

1. Vorbereitung

1. Installieren Sie PHP- und Vue-bezogene Entwicklungsumgebungen
2. Erstellen Sie eine Datenbank einschließlich Mitarbeitertabelle und Anwesenheitstabelle
3. Fügen Sie Felder in der Anwesenheitstabelle hinzu, darunter: Mitarbeiter-ID, Anwesenheitsdatum, Arbeitszeit, dienstfreie Zeit

2. Backend-Entwicklung (PHP)

1. Erstellen Sie eine PHP-Datei mit dem Namen „attendance.php“, die zur Bearbeitung von Frontend-Anfragen und zur Interaktion mit der Datenbank verwendet wird.
2. Schreiben Sie Code in die Datei „attendance.php“. Datei, implementieren Sie die folgenden Funktionen:
   a) Stellen Sie eine Verbindung zur Datenbank her.
   b) Empfangen Sie die vom Frontend übergebene Mitarbeiter-ID und das Anwesenheitsdatum.
   c) Fragen Sie die Anwesenheitsaufzeichnung des Mitarbeiters an diesem Datum ab.
   d) Wenn eine Aufzeichnung vorhanden ist, kehren Sie zurück die vorhandenen Daten; andernfalls automatisch Anwesenheitsdatensätze generieren und in die Datenbank einfügen

3. Das Folgende ist eine vereinfachte Version des Codebeispiels:

   <?php
   // 连接数据库
   $conn = new mysqli("localhost", "username", "password", "database");
   
   // 检查连接
   if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
   }
   
   // 接收员工ID和考勤日期
   $empId = $_POST["empId"];
   $date = $_POST["date"];
   
   // 查询考勤记录
   $sql = "SELECT * FROM attendance WHERE emp_id = $empId AND date = $date";
   $result = $conn->query($sql);
   
   // 如果有记录，则返回已有的数据
   if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
   } else {
    // 自动生成考勤记录
    $insertSql = "INSERT INTO attendance (emp_id, date, clock_in_time, clock_out_time)
                  VALUES ($empId, $date, '09:00:00', '18:00:00')";
   
    if ($conn->query($insertSql) === TRUE) {
        echo "考勤记录已生成";
    } else {
        echo "生成考勤记录失败: " . $conn->error;
    }
   }
   
   $conn->close();
   ?>

3. Erstellen Sie einen Vue Projekt und verwenden Sie die Axios-Bibliothek, um Anfragen an das Backend zu senden.

Schreiben Sie Code in die Vue-Datei, um die folgenden Funktionen zu implementieren:
1. a) Erstellen Sie die Seite, einschließlich des Eingabefelds für die Mitarbeiter-ID, der Auswahl des Anwesenheitsdatums und der Schaltfläche zum Senden.
b) Hören Sie zu zum Formularübermittlungsereignis und erhalten Sie die vom Benutzer eingegebene Mitarbeiter-ID und das Anwesenheitsdatum.
2. c) Verwenden Sie die Axios-Bibliothek, um eine POST-Anfrage an die Datei „attendance.php“ im Backend zu senden.
   d) um die vom Benutzer zurückgegebenen Daten zu verarbeiten Hintergrund und aktualisieren Sie die Seitenanzeige
   
   
   Das Folgende ist eine vereinfachte Version des Codebeispiels:

<template>
  <div>
 <label for="empId">员工ID:</label>
 <input type="text" id="empId" v-model="empId">
 <label for="date">考勤日期:</label>
 <input type="date" id="date" v-model="date">
 <button @click="submit">提交</button>
 <p v-if="attendance">上班时间：{{ attendance.clock_in_time }}，下班时间：{{ attendance.clock_out_time }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
 return {
   empId: '',
   date: '',
   attendance: null
 }
  },
  methods: {
 submit() {
   axios.post('attendance.php', {
     empId: this.empId,
     date: this.date
   })
   .then(response => {
     this.attendance = response.data;
   })
   .catch(error => {
     console.log(error);
   });
 }
  }
}
</script>

3. Four. Führen Sie das Vue-Projekt im Terminal aus und besuchen Sie die entsprechende URL Anwesenheitsdatum auf der Seite, klicken Sie auf die Schaltfläche „Senden“

Die Seite zeigt die Anwesenheitsliste des Mitarbeiters an diesem Datum an. Wenn keine Aufzeichnung vorhanden ist, wird automatisch eine Funktion erstellt. Anwesenheitslisten werden generiert und auf der Seite angezeigt

Zusammenfassung :
1. Durch die Kombination von PHP und Vue haben wir die Funktion zur automatischen Generierung der Mitarbeiteranwesenheit realisiert. PHP ist für die Back-End-Verarbeitung und Datenbankinteraktion verantwortlich, und Vue ist für den Front-End-Seitenaufbau und die Kommunikation mit dem Back-End verantwortlich. Diese Methode kann die Genauigkeit und Arbeitseffizienz der Anwesenheitsdaten der Mitarbeiter erheblich verbessern und die durch manuelle Aufzeichnung verursachten Fehler und Mühen reduzieren. Dies ist natürlich nur eine vereinfachte Version des Beispiels und tatsächliche Projekte müssen je nach Bedarf entsprechend erweitert und optimiert werden. Ich hoffe, dass dieser Artikel für Leser hilfreich sein wird, die PHP und Vue lernen und üben.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zur automatischen Generierung der Mitarbeiteranwesenheit über PHP und Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!