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

So verwenden Sie PHP und Vue, um die Datenfilterfunktion des Mitarbeiteranwesenheitssystems zu entwerfen

Der Entwurf eines effizienten Mitarbeiteranwesenheitssystems ist für Unternehmen von entscheidender Bedeutung, da es Unternehmen bei der Verwaltung der Mitarbeiteranwesenheit, Urlaubsaufzeichnungen und anderen Informationen unterstützen kann. In diesem System ist die Datenfilterfunktion ein unverzichtbarer Bestandteil, mit der Benutzer Anwesenheitslisten von Mitarbeitern, die bestimmte Bedingungen erfüllen, einfach herausfiltern können. In diesem Artikel wird erläutert, wie Sie mit PHP und Vue die Datenfilterfunktion des Mitarbeiteranwesenheitssystems entwerfen und implementieren und spezifische Codebeispiele bereitstellen.

1. Backend-PHP-Implementierung

Im Backend-PHP können wir mithilfe von SQL-Anweisungen die Anwesenheitslisten qualifizierter Mitarbeiter abfragen. Zuerst müssen Sie eine Verbindung zur Datenbank herstellen. Hier ist MySQL als Beispiel:

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "attendance_system";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

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

// 获取前端传递过来的筛选条件
$department = $_POST['department'];
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];

// 构建查询SQL语句
$sql = "SELECT * FROM attendance WHERE department = '$department' AND date BETWEEN '$start_date' AND '$end_date'";

$result = $conn->query($sql);

// 将查询结果转换为数组并返回给前端
$response = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $response[] = $row;
    }
}
echo json_encode($response);
$conn->close();
?>

Im obigen Code erstellen wir zunächst eine Datenbankverbindung und rufen die vom Frontend übergebenen Filterbedingungen ab, erstellen dann eine Abfrage-SQL-Anweisung und konvertieren sie Die Abfrageergebnisse werden als Array an das Frontend zurückgegeben.

2. Front-End-Vue-Implementierung

Im Front-End-Vue können wir Axios verwenden, um asynchrone Anfragen zu senden und die vom Backend zurückgegebenen Daten abzurufen. Zuerst müssen Sie axios installieren:

npm install axios --save

Dann verwenden Sie axios in der Vue-Komponente, um eine Anfrage zu senden und die zurückgegebenen Daten zu verarbeiten:

<template>
  <div>
    <select v-model="department">
      <option disabled value="">请选择部门</option>
      <option v-for="dept in departments" :value="dept">{{dept}}</option>
    </select>
    <input type="date" v-model="startDate">
    <input type="date" v-model="endDate">
    <button @click="filterData">筛选</button>
    <table>
      <thead>
        <tr>
          <th>员工姓名</th>
          <th>打卡日期</th>
          <th>上班时间</th>
          <th>下班时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in attendanceRecords" :key="record.id">
          <td>{{record.name}}</td>
          <td>{{record.date}}</td>
          <td>{{record.start_time}}</td>
          <td>{{record.end_time}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      department: '',
      startDate: '',
      endDate: '',
      departments: ['部门A', '部门B', '部门C'], // 假设已经获取了部门列表
      attendanceRecords: []
    }
  },
  methods: {
    filterData() {
      axios.post('http://localhost/filter.php', {
        department: this.department,
        start_date: this.startDate,
        end_date: this.endDate
      })
      .then(response => {
        this.attendanceRecords = response.data;
      })
      .catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

Im obigen Code verwenden wir den bidirektionalen Datenbindungsmechanismus von Vue, um die Abteilung abzurufen und vom Benutzer ausgewähltes Startdatum und Frist, und verwenden Sie axios, um eine POST-Anfrage an das Backend-PHP-Skript zu senden. Weisen Sie dann die zurückgegebenen Daten this.attendanceRecords zu und zeigen Sie sie im Frontend an.

Durch die oben genannten Schritte kann die Datenfilterfunktion des Mitarbeiteranwesenheitssystems realisiert werden. Benutzer können die Abteilung, das Startdatum und das Enddatum auswählen. Nach dem Klicken auf die Filterschaltfläche sendet das Front-End diese Filterbedingungen zur Abfrage an das Back-End-PHP-Skript und zeigt dem Benutzer die Abfrageergebnisse an.

Ich hoffe, das obige Codebeispiel kann Ihnen bei der Implementierung der Datenfilterfunktion beim Entwerfen eines Mitarbeiteranwesenheitssystems helfen. Natürlich muss die konkrete Implementierung entsprechend Ihren Geschäftsanforderungen angepasst werden.

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