PHP와 Vue를 사용하여 직원 출석 시스템의 데이터 필터링 기능을 설계하는 방법

PHP 및 Vue를 사용하여 직원 출석 시스템의 데이터 필터링 기능을 설계하는 방법

효율적인 직원 출석 시스템을 설계하는 것은 기업이 직원 출석을 관리하고 기록 및 기타 정보를 남기는 데 도움이 될 수 있으므로 기업에 매우 중요합니다. 이 시스템에서 데이터 필터링 기능은 사용자가 특정 조건에 맞는 직원 근태 기록을 쉽게 필터링할 수 있도록 하는 필수 부분입니다. 이 기사에서는 PHP와 Vue를 사용하여 직원 출석 시스템의 데이터 필터링 기능을 설계 및 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 백엔드 PHP 구현

백엔드 PHP에서는 SQL 문을 사용하여 자격을 갖춘 직원의 출석 기록을 쿼리할 수 있습니다. 먼저 데이터베이스에 연결해야 합니다. 예를 들어 MySQL은 다음과 같습니다.

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

위 코드에서는 먼저 데이터베이스 연결을 만들고 프런트 엔드에서 전달한 필터링 조건을 얻은 다음 쿼리 SQL 문을 작성하고 변환합니다. 쿼리 결과는 배열로 프런트 엔드에 반환됩니다.

2. 프런트엔드 Vue 구현

프런트엔드 Vue에서는 axios를 사용하여 비동기 요청을 보내고 백엔드에서 반환된 데이터를 얻을 수 있습니다. 먼저 axios를 설치해야 합니다.

npm install axios --save

그런 다음 Vue 구성 요소에서 axios를 사용하여 요청을 보내고 반환된 데이터를 처리합니다.

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

위 코드에서는 Vue의 양방향 데이터 바인딩 메커니즘을 사용하여 부서를 가져옵니다. 사용자가 선택한 시작 날짜와 마감일을 지정하고 axios를 사용하여 백엔드 PHP 스크립트에 POST 요청을 보냅니다. 그런 다음 반환된 데이터를 this.attendanceRecords에 할당하고 프런트 엔드에 표시합니다.

위 단계를 통해 직원 근태관리 시스템의 데이터 필터링 기능을 구현할 수 있습니다. 사용자는 부서, 시작 날짜 및 종료 날짜를 선택할 수 있습니다. 필터 버튼을 클릭하면 프런트 엔드에서 이러한 필터 조건을 쿼리용 백그라운드 PHP 스크립트로 보내고 쿼리 결과를 사용자에게 표시합니다.

위 코드 예제가 직원 근태 시스템 설계 시 데이터 필터링 기능을 구현하는 데 도움이 되기를 바랍니다. 물론 구체적인 구현은 비즈니스 요구 사항에 따라 적절하게 조정되어야 합니다.

위 내용은 PHP와 Vue를 사용하여 직원 출석 시스템의 데이터 필터링 기능을 설계하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!