So verwenden Sie PHP und Vue zum Entwerfen der Arbeitsplanungsschnittstelle des Mitarbeiteranwesenheitssystems

So verwenden Sie PHP und Vue zum Entwerfen der Arbeitsplanungsschnittstelle des Mitarbeiteranwesenheitssystems

In modernen Unternehmen ist das Mitarbeiteranwesenheitssystem ein sehr wichtiger Bestandteil, der Unternehmen dabei helfen kann, Personalressourcen zu verwalten und die Arbeitszeiten zu kontrollieren. Der Schlüssel zum Entwurf eines effizienten und benutzerfreundlichen Mitarbeiteranwesenheitssystems ist eine vernünftige Arbeitsplanungsschnittstelle. In diesem Artikel wird erläutert, wie Sie mit PHP und Vue die Arbeitsplanungsschnittstelle des Mitarbeiteranwesenheitssystems entwerfen und spezifische Codebeispiele bereitstellen.

1. Vorbereitung
   Bevor Sie mit dem Entwurf beginnen, müssen Sie sicherstellen, dass Sie über die folgenden Vorbereitungen verfügen:
2. Einen Server, der die PHP- und Vue-Entwicklung unterstützt;
3. Zugehörige Daten zu Arbeitsplänen, wie z. B. Mitarbeiterlisten, Schichtinformationen usw.
4. Verstehen Sie die grundlegende Syntax und den Entwicklungsprozess von PHP und Vue.
5. Datenbanktabelle erstellen
   Zuerst müssen wir eine Datenbanktabelle erstellen, um Informationen zum Arbeitsplan der Mitarbeiter zu speichern. Angenommen, wir erstellen eine Tabelle mit dem Namen „Schichten“, die die folgenden Felder enthält:

• id: eindeutige Kennung, die zur Unterscheidung verschiedener Schichten verwendet wird;
• Schicht: Schicht;
• Mitarbeiter-ID. 🔜 Backend-Schnittstelle
Als nächstes müssen wir eine PHP-Backend-Schnittstelle erstellen, um Front-End-Anfragen zu verarbeiten und mit der Datenbank zu interagieren. Wir erstellen zunächst eine Datei mit dem Namen „getShifts.php“, um die Schnittstelle zum Abrufen von Mitarbeiterschichtinformationen zu implementieren:

• <?php
  // 连接数据库
  $conn = new mysqli("localhost", "username", "password", "database_name");
  
  // 检查连接是否成功
  if ($conn->connect_error) {
      die("连接失败: " . $conn->connect_error);
  }
  
  // 获取所有员工排班信息
  $sql = "SELECT * FROM shifts";
  $result = $conn->query($sql);
  
  // 将结果转化为JSON格式并返回
  $shifts = [];
  if ($result->num_rows > 0) {
      while ($row = $result->fetch_assoc()) {
          $shifts[] = $row;
      }
  }
  echo json_encode($shifts);
  
  // 关闭连接
  $conn->close();
  ?>

Ebenso müssen wir auch eine Schnittstelle zum Speichern von Mitarbeiterschichtinformationen erstellen, die in „saveShifts.php“ in der Datei implementiert ist :

<?php
// 连接数据库
$conn = new mysqli("localhost", "username", "password", "database_name");

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取前端发送的员工排班信息
$data = json_decode(file_get_contents('php://input'), true);

// 清空原有的员工排班信息
$sql = "TRUNCATE TABLE shifts";
$conn->query($sql);

// 保存新的员工排班信息
foreach ($data as $shift) {
    $date = $shift['date'];
    $shiftType = $shift['shift'];
    $employeeId = $shift['employee_id'];
    
    $sql = "INSERT INTO shifts (date, shift, employee_id) VALUES ('$date', '$shiftType', $employeeId)";
    $conn->query($sql);
}

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

Erstellen der Vue-Frontend-Schnittstelle
Jetzt beginnen wir mit der Erstellung der Vue-Frontend-Schnittstelle. Wir erstellen zunächst eine Komponente mit dem Namen „ShiftSchedule.vue“, um den Arbeitsplan des Mitarbeiters anzuzeigen:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Shift</th>
          <th>Employee ID</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(shift, index) in shifts" :key="index">
          <td>{{ shift.date }}</td>
          <td>{{ shift.shift }}</td>
          <td>{{ shift.employee_id }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="saveShifts">Save</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shifts: []
    }
  },
  mounted() {
    this.getShifts();
  },
  methods: {
    getShifts() {
      fetch('getShifts.php')
        .then(response => response.json())
        .then(data => this.shifts = data);
    },
    saveShifts() {
      fetch('saveShifts.php', {
        method: 'POST',
        body: JSON.stringify(this.shifts)
      })
        .then(response => {
          if (response.ok) {
            alert('保存成功');
          } else {
            alert('保存失败');
          }
        });
    }
  }
}
</script>

Als nächstes verwenden wir die Komponente in der Hauptanwendung:

<template>
  <div>
    <h1>员工考勤系统 - 工作排班界面</h1>
    <ShiftSchedule></ShiftSchedule>
  </div>
</template>

<script>
import ShiftSchedule from './ShiftSchedule.vue';

export default {
  components: {
    ShiftSchedule
  }
}
</script>

Run the application
3. Continue Als nächstes platzieren wir PHP und Vue Code auf dem Server und führen Sie die Anwendung aus. Besuchen Sie diese Webseite, um die Arbeitsplanoberfläche des Mitarbeiters anzuzeigen. Dort können Sie die Zeitplaninformationen des Mitarbeiters bearbeiten und speichern.
   

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit PHP und Vue die Arbeitsplanungsschnittstelle des Mitarbeiteranwesenheitssystems entwerfen, indem Sie eine Datenbanktabelle erstellen, eine PHP-Schnittstelle schreiben und eine Vue-Front-End-Schnittstelle entwickeln Das Speichern von Informationen zur Mitarbeiterplanung wird realisiert. In der tatsächlichen Entwicklung können Schnittstellen und Schnittstellen entsprechend den spezifischen Anforderungen erweitert und optimiert werden. Ich hoffe, dieser Artikel hilft Ihnen bei der Gestaltung der Arbeitsplanungsschnittstelle des Mitarbeiteranwesenheitssystems.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie PHP und Vue zum Entwerfen der Arbeitsplanungsschnittstelle des Mitarbeiteranwesenheitssystems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!