PHP と Vue を使用して従業員勤怠システムのデータ フィルタリング機能を設計する方法

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

npm install axios --save

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