Cara menggunakan PHP dan Vue untuk mereka bentuk fungsi penapisan data sistem kehadiran pekerja

Cara menggunakan PHP dan Vue untuk mereka bentuk fungsi penapisan data sistem kehadiran pekerja

Merancang sistem kehadiran pekerja yang cekap adalah penting untuk perusahaan Yang penting, ia boleh membantu syarikat menguruskan kehadiran pekerja, meninggalkan rekod dan maklumat lain. Dalam sistem ini, fungsi penapisan data adalah bahagian yang sangat diperlukan, yang membolehkan pengguna menapis rekod kehadiran pekerja dengan mudah yang memenuhi syarat tertentu. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk mereka bentuk dan melaksanakan fungsi penapisan data sistem kehadiran pekerja, dan menyediakan contoh kod khusus.

1. Pelaksanaan PHP belakang

Dalam PHP bahagian belakang, kita boleh menggunakan penyata SQL untuk menanyakan rekod kehadiran pekerja yang memenuhi syarat. Pertama, anda perlu menyambung ke pangkalan data Berikut adalah MySQL sebagai contoh:

<?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();
?>

Dalam kod di atas, kami mula-mula membuat sambungan pangkalan data, dapatkan syarat penapis yang diluluskan oleh bahagian hadapan, dan kemudian bina pernyataan SQL pertanyaan, dan tukar hasil pertanyaan kepada tatasusunan dan kembalikannya ke bahagian hadapan.

2. Pelaksanaan Vue bahagian hadapan

Dalam Vue bahagian hadapan, kami boleh menggunakan axios untuk menghantar permintaan tak segerak dan mendapatkan data yang dikembalikan oleh bahagian belakang. Mula-mula, anda perlu memasang axios:

npm install axios --save

Kemudian, gunakan axios dalam komponen Vue untuk menghantar permintaan dan memproses data yang dikembalikan:

<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>

Dalam kod di atas, kami menggunakan Pengikatan data dua hala Vue Wujudkan mekanisme untuk mendapatkan jabatan, tarikh mula dan tarikh akhir yang dipilih oleh pengguna, dan gunakan axios untuk menghantar permintaan POST ke skrip PHP bahagian belakang. Kemudian, tetapkan data yang dikembalikan kepada this.attendanceRecords dan paparkannya di bahagian hadapan.

Melalui langkah di atas, fungsi penapisan data sistem kehadiran pekerja dapat direalisasikan. Pengguna boleh memilih jabatan, tarikh mula dan tarikh tamat Selepas mengklik butang penapis, bahagian hadapan akan menghantar syarat penapis ini ke skrip PHP bahagian belakang untuk pertanyaan, dan memaparkan hasil pertanyaan kepada pengguna.

Semoga contoh kod di atas dapat membantu anda melaksanakan fungsi penapisan data semasa mereka bentuk sistem kehadiran pekerja. Sudah tentu, pelaksanaan khusus perlu disesuaikan dengan sewajarnya mengikut keperluan perniagaan anda.

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk mereka bentuk fungsi penapisan data sistem kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!