So kombinieren Sie PHP und Vue, um die Arbeitszeitstatistikfunktion der Mitarbeiteranwesenheit zu realisieren

So kombinieren Sie PHP und Vue, um die Arbeitszeitstatistikfunktion der Mitarbeiteranwesenheit zu realisieren

In der modernen Unternehmensführung sind Echtzeitstatistiken und -analysen der Mitarbeiteranwesenheit eines der wichtigen Mittel zur Verbesserung der Arbeitseffizienz und des Managementniveaus. Als beliebte serverseitige Programmiersprache kann PHP problemlos Daten verarbeiten und mit Datenbanken interagieren. Vue ist ein beliebtes Front-End-Framework, das eine umfangreiche Benutzeroberfläche und interaktive Funktionen bieten kann. Durch die Kombination von PHP und Vue können wir eine Arbeitszeitstatistikfunktion für die Anwesenheit von Mitarbeitern implementieren.

Zuerst müssen wir entsprechende Tabellen in der Datenbank erstellen, um die Anwesenheitsdaten der Mitarbeiter zu speichern. Angenommen, wir erstellen eine Tabelle mit dem Namen „Anwesenheit“ mit den folgenden Feldern: „id“, „employee_id“, „check_in“, „check_out“. id ist die eindeutige Kennung des Anwesenheitsdatensatzes, Employee_id ist die eindeutige Kennung des Mitarbeiters, check_in ist die Arbeitszeit und check_out ist die dienstfreie Zeit.

Als nächstes müssen wir PHP-Code schreiben, um Vorgänge zum Hinzufügen, Löschen, Ändern und Abfragen von Daten zu implementieren. Nehmen Sie als Beispiel die Funktion zum Abrufen der Anwesenheitsliste eines Mitarbeiters an einem bestimmten Tag. Das Codebeispiel lautet wie folgt:

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 获取参数
$employee_id = $_POST['employee_id'];
$date = $_POST['date'];

// 查询数据
$sql = "SELECT * FROM attendance WHERE employee_id='$employee_id' AND DATE(check_in)='$date'";
$result = $conn->query($sql);

// 处理结果
if ($result->num_rows > 0) {
    $attendance = array();
    while ($row = $result->fetch_assoc()) {
        $attendance[] = $row;
    }
    echo json_encode($attendance);
} else {
    echo "没有找到考勤记录";
}

// 关闭数据库连接
$conn->close();
?>

Der obige Code ruft die eingehenden Mitarbeiter-ID- und Datumsparameter ab, indem er eine Verbindung zur Datenbank herstellt, und fragt dann die Anwesenheit ab Datensatz in der Datenbank und konvertiert das Ergebnis in JSON. Das Format wird an das Frontend zurückgegeben.

In Bezug auf Vue können wir die Komponentisierungs- und Datenbindungsfunktionen von Vue verwenden, um eine Seite für Mitarbeiteranwesenheits- und Arbeitszeitstatistiken zu erstellen. Das Folgende ist ein einfacher Beispielcode:

<template>
  <div>
    <!-- 员工选择 -->
    <select v-model="selectedEmployee">
      <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
    </select>
    
    <!-- 日期选择 -->
    <input type="date" v-model="selectedDate">
    
    <!-- 查询按钮 -->
    <button @click="queryAttendance">查询</button>
    
    <!-- 考勤记录 -->
    <table v-if="attendance.length > 0">
      <thead>
        <tr>
          <th>日期</th>
          <th>上班时间</th>
          <th>下班时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in attendance" :key="record.id">
          <td>{{ record.check_in }}</td>
          <td>{{ record.check_out }}</td>
        </tr>
      </tbody>
    </table>
    <p v-else>没有找到考勤记录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employees: [], // 所有员工
      selectedEmployee: '', // 选中的员工
      selectedDate: '', // 选中的日期
      attendance: [], // 考勤记录
    };
  },
  methods: {
    queryAttendance() {
      // 发送请求到后端
      // 假设请求的URL是/api/getAttendance.php
      axios.post('/api/getAttendance.php', {
        employee_id: this.selectedEmployee,
        date: this.selectedDate,
      })
        .then(response => {
          this.attendance = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
  mounted() {
    // 获取所有员工列表
    // 假设请求的URL是/api/getEmployees.php
    axios.get('/api/getEmployees.php')
      .then(response => {
        this.employees = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

Der obige Code verwendet die Datenbindung von Vue, um die Mitarbeiterauswahl, die Datumsauswahl und die Anzeige von Anwesenheitslisten zu steuern. Wenn der Benutzer auf die Schaltfläche „Abfrage“ klickt, wird eine Anfrage an das Backend gesendet und die Anwesenheitsliste wird basierend auf den zurückgegebenen Daten aktualisiert. Gleichzeitig wird beim Laden der Seite auch eine Liste aller Mitarbeiter angezeigt, die der Benutzer auswählen kann.

Durch die Kombination von PHP und Vue können wir die Arbeitszeitstatistikfunktion der Mitarbeiteranwesenheit einfach implementieren. Der obige Code ist nur ein Beispiel. Bei der tatsächlichen Implementierung müssen möglicherweise auch einige andere Faktoren berücksichtigt werden, z. B. Berechtigungsverwaltung, Datenüberprüfung, Schnittstellenoptimierung usw. Aber im Allgemeinen kann uns die Kombination von PHP und Vue leistungsstarke Tools zur Verfügung stellen, um schnell ein Mitarbeiteranwesenheits- und Arbeitszeitstatistiksystem zu implementieren.

Das obige ist der detaillierte Inhalt vonSo kombinieren Sie PHP und Vue, um die Arbeitszeitstatistikfunktion der Mitarbeiteranwesenheit zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!