So kombinieren Sie PHP und Vue, um die Check-in- und Check-out-Funktion für die Mitarbeiteranwesenheit zu implementieren

So kombinieren Sie PHP und Vue, um die Anmelde- und Check-out-Funktion der Mitarbeiteranwesenheit zu implementieren.

Die Mitarbeiteranwesenheit ist ein wesentlicher Verwaltungslink für jedes Unternehmen Die Anwesenheit der Mitarbeiter kann effektiv nachverfolgt werden. In diesem Artikel wird erläutert, wie PHP und Vue kombiniert werden, um die Check-in- und Check-out-Funktion der Mitarbeiteranwesenheit zu implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. Technologieauswahl

Um die Check-in- und Check-out-Funktion der Mitarbeiteranwesenheit zu realisieren, wählen wir PHP als Back-End-Entwicklungssprache und Vue als Front-End-Entwicklungsframework. PHP kann die Hintergrundlogik übernehmen und Vue kann für die Front-End-Anzeige verantwortlich sein. Die beiden arbeiten zusammen, um Funktionen schnell zu implementieren.

2. Datenbankdesign

Zuerst müssen wir eine Datenbank entwerfen, um Informationen zur Mitarbeiteranwesenheit zu speichern. Das Folgende ist ein einfaches Designbeispiel für die Anwesenheitsliste eines Mitarbeiters:

Anwesenheitsliste eines Mitarbeiters (Anwesenheit)

• id: Anwesenheitsdatensatz-ID (Primärschlüssel)
• employee_id: Mitarbeiter-ID
• sign_in_time: Anmeldezeit
• sign_out_time: Abmeldezeit

3. Backend-Implementierung

1. Erstellen Sie eine PHP-Datei mit dem Namen attendance.php und führen Sie die Datenbankverbindungsdatei ein.

<?php
include 'db_connect.php';

2. Implementieren Sie die Anmeldefunktion für Mitarbeiter.

// 接收从前台传来的员工ID
$employee_id = $_POST['employee_id'];

// 获取当前时间
$sign_in_time = date('Y-m-d H:i:s');

// 将签到信息插入到数据库
$sql = "INSERT INTO attendance (employee_id, sign_in_time) VALUES ('$employee_id', '$sign_in_time')";
$result = mysqli_query($conn, $sql);

if ($result) {
  echo "签到成功";
} else {
  echo "签到失败";
}

3. Mitarbeiter-Abmeldefunktion implementieren.

// 接收从前台传来的员工ID
$employee_id = $_POST['employee_id'];

// 获取当前时间
$sign_out_time = date('Y-m-d H:i:s');

// 更新签退时间
$sql = "UPDATE attendance SET sign_out_time = '$sign_out_time' WHERE employee_id = '$employee_id'";
$result = mysqli_query($conn, $sql);

if ($result) {
  echo "签退成功";
} else {
  echo "签退失败";
}

4. Frontend-Implementierung

1. Verwenden Sie im Frontend-Projekt das Vue-Framework, um eine Mitarbeiteranwesenheitsseite zu erstellen, auf der Sie sich an- oder abmelden können.

<template>
  <div>
    <h2 id="员工考勤">员工考勤</h2>
    <select v-model="employeeId">
      <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
    </select>
    <button @click="signIn">签到</button>
    <button @click="signOut">签退</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employeeId: '',
      employees: [],
      message: ''
    }
  },
  mounted() {
    // 获取员工列表
    // 可以通过接口请求后台获取员工列表，这里直接模拟数据
    this.employees = [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' }
    ]
  },
  methods: {
    signIn() {
      // 向后台发送签到请求
      fetch('attendance.php', {
        method: 'POST',
        body: JSON.stringify({ employee_id: this.employeeId })
      })
        .then(response => response.text())
        .then(data => {
          this.message = data
        })
    },
    signOut() {
      // 向后台发送签退请求
      fetch('attendance.php', {
        method: 'POST',
        body: JSON.stringify({ employee_id: this.employeeId })
      })
        .then(response => response.text())
        .then(data => {
          this.message = data
        })
    }
  }
}
</script>

2. Verwenden Sie Vue CLI zum Packen und generieren Sie statische Dateien für die Einführung im Hintergrund.

5. Zusammenfassung

Durch die Kombination von PHP und Vue können wir die An- und Abmeldefunktion für die Anwesenheit von Mitarbeitern schnell implementieren. PHP ist für die Verarbeitung der Hintergrundlogik verantwortlich, und Vue ist für die Front-End-Anzeige verantwortlich und sendet Anfragen über die Schnittstelle an den Hintergrund. Das Obige ist ein einfaches Beispiel. Sie können es entsprechend den tatsächlichen Anforderungen erweitern und optimieren. Zusammenfassend können wir PHP und Vue verwenden, um die Check-in- und Check-out-Funktion der Mitarbeiteranwesenheit zu implementieren.

Das obige ist der detaillierte Inhalt vonSo kombinieren Sie PHP und Vue, um die Check-in- und Check-out-Funktion für die Mitarbeiteranwesenheit zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!