So erstellen Sie mit PHP und Vue eine Online-Schnittstelle zur Anwesenheitserfassung von Mitarbeitern

So verwenden Sie PHP und Vue, um eine Online-Schnittstelle zur Erfassung der Mitarbeiteranwesenheit zu erstellen

In modernen Unternehmen ist die Mitarbeiteranwesenheit ein Problem, dem sich Manager stellen und das sie lösen müssen. Mit der Entwicklung der Technologie wurde die traditionelle Anwesenheitskontrolle auf Papier nach und nach durch elektronische Anwesenheitssysteme ersetzt. Der Aufbau einer Online-Schnittstelle zur Erfassung der Mitarbeiteranwesenheit ist eine sehr praktische Methode, die es Managern erleichtern kann, die Anwesenheit der Mitarbeiter zu erfassen und statistische Analysen durchzuführen. In diesem Artikel wird erläutert, wie Sie mit PHP und Vue eine solche Online-Eingabeschnittstelle erstellen, und es werden konkrete Codebeispiele aufgeführt.

1. Vorbereitung

Stellen Sie zunächst sicher, dass Sie die Betriebsumgebungen PHP und Vue korrekt installiert haben. PHP ist eine serverseitige Skriptsprache, während Vue ein beliebtes JavaScript-Framework ist, das Tools zum Erstellen von Benutzeroberflächen bereitstellt.

2. Erstellen Sie eine Datenbank

Zuerst müssen wir eine Datenbank mit dem Namen „Anwesenheit“ erstellen und darin eine Tabelle mit dem Namen „Mitarbeiter“ erstellen. Die Tabelle enthält die grundlegenden Informationen des Mitarbeiters, wie Mitarbeiternummer, Name usw., sowie Anwesenheitsdaten. Die spezifische Tabellenstruktur ist wie folgt:

CREATE TABLE employees (
  id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  emp_id INT(11) UNSIGNED,
  name VARCHAR(50),
  attendance_date DATE,
  time_in TIME,
  time_out TIME
);

3. Back-End-Entwicklung

Wir verwenden PHP, um die Back-End-Logik zu verwalten. Erstellen Sie zunächst eine Datei mit dem Namen „index.php“ und fügen Sie den folgenden Code hinzu:

<?php
 
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

$host = "localhost";
$db_name = "attendance";
$username = "root";
$password = "";

$conn = new PDO("mysql:host=".$host.";dbname=".$db_name, $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$data = json_decode(file_get_contents("php://input"));

$emp_id = $data->emp_id;
$name = $data->name;
$attendance_date = $data->attendance_date;
$time_in = $data->time_in;
$time_out = $data->time_out;

$query = "INSERT INTO employees (emp_id, name, attendance_date, time_in, time_out) VALUES (:emp_id, :name, :attendance_date, :time_in, :time_out)";
$stmt = $conn->prepare($query);
$stmt->bindParam(":emp_id", $emp_id);
$stmt->bindParam(":name", $name);
$stmt->bindParam(":attendance_date", $attendance_date);
$stmt->bindParam(":time_in", $time_in);
$stmt->bindParam(":time_out", $time_out);

if($stmt->execute()){
    http_response_code(201);
    echo json_encode(array("message" => "Attendance record was created."));
}
else{
    http_response_code(503);
    echo json_encode(array("message" => "Unable to create attendance record."));
}
?>

Der obige Code legt zunächst den Antwortheader fest, um domänenübergreifende Anforderungen zu ermöglichen. Stellen Sie dann eine Verbindung zur Datenbank her, analysieren Sie die empfangenen Daten im JSON-Format und fügen Sie sie in die Mitarbeitertabelle ein.

4. Frontend-Entwicklung

Im Frontend-Teil verwenden wir Vue, um die Benutzeroberfläche zu erstellen. Verwenden Sie Vue CLI, um schnell ein Projekt zu erstellen und das Axios-Plug-In zu installieren. Sie können den folgenden Befehl im Terminal ausführen:

vue create attendance
cd attendance
npm install axios

Als nächstes müssen wir die Datei src/App.vue ändern und den folgenden Code hinzufügen:

<template>
  <div id="app">
    <h1>员工考勤录入</h1>

    <form @submit.prevent="submit">
      <label for="emp_id">员工编号:</label>
      <input type="text" v-model="emp_id"> <br>

      <label for="name">员工姓名:</label>
      <input type="text" v-model="name"> <br>

      <label for="attendance_date">考勤日期:</label>
      <input type="date" v-model="attendance_date"> <br>

      <label for="time_in">签到时间:</label>
      <input type="time" v-model="time_in"> <br>

      <label for="time_out">签退时间:</label>
      <input type="time" v-model="time_out"> <br>

      <button type="submit">提交</button>
    </form>

    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      emp_id: '',
      name: '',
      attendance_date: '',
      time_in: '',
      time_out: '',
      message: ''
    }
  },
  methods: {
    submit() {
      axios.post('http://localhost/index.php', {
        emp_id: this.emp_id,
        name: this.name,
        attendance_date: this.attendance_date,
        time_in: this.time_in,
        time_out: this.time_out
      })
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          this.message = error.response.data.message
        })
    }
  }
}
</script>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

Der obige Code erstellt ein einfaches Formular, das Felder wie Mitarbeiternummer, Name, Anwesenheitsdatum, Check-in-Zeit und Check-out-Zeit enthält. Wenn auf die Schaltfläche „Senden“ geklickt wird, wird über axios eine POST-Anfrage an die Datei index.php im Backend gesendet. Nach Erhalt der Antwort werden die entsprechenden Eingabeaufforderungsinformationen auf der Benutzeroberfläche angezeigt.

5. Ausführen und testen

Führen Sie den folgenden Befehl im Terminal aus, um die Front-End-Seite zu starten:

npm run serve

Gleichzeitig müssen Sie die Back-End-Datei index.php im Stammverzeichnis der platzieren Apache- oder Nginx-Server. Stellen Sie sicher, dass Sie den Webserver und den MySQL-Server gestartet haben.

Wenn Sie http://localhost:8080 besuchen, sollten Sie eine einfache Benutzeroberfläche zur Anwesenheitseingabe sehen können. Nachdem Sie das Formular ausgefüllt und auf „Senden“ geklickt haben, werden die entsprechenden Anwesenheitslisten in der Datenbank gespeichert.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit PHP und Vue eine Online-Schnittstelle zur Anwesenheitserfassung von Mitarbeitern erstellen. Wir haben eine Tabelle mit grundlegenden Mitarbeiterinformationen und Anwesenheitsdaten erstellt, PHP für die Back-End-Logik verwendet und Vue für die Erstellung der Benutzeroberfläche verwendet. Über diese Schnittstelle können Manager ganz einfach Anwesenheitslisten ihrer Mitarbeiter eingeben. Ich hoffe, dass dieses Beispiel den Lesern helfen kann, besser zu verstehen, wie PHP und Vue für die Webentwicklung verwendet werden.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit PHP und Vue eine Online-Schnittstelle zur Anwesenheitserfassung von Mitarbeitern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!