PHP와 Vue를 사용하여 직원 출석 시스템의 작업 일정 인터페이스를 설계하는 방법

PHP 및 Vue를 사용하여 직원 출석 시스템의 작업 일정 인터페이스를 설계하는 방법

현대 기업에서 직원 출석 시스템은 기업이 인적 자원을 관리하고 근무 시간을 제어하는 ​​데 도움이 될 수 있는 매우 중요한 부분입니다. 효율적이고 사용하기 쉬운 직원 출석 시스템을 설계하는 핵심은 합리적인 작업 일정 인터페이스입니다. 이 기사에서는 PHP와 Vue를 사용하여 직원 근태 시스템의 작업 일정 인터페이스를 설계하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비
   설계를 시작하기 전에 다음 사항을 준비해야 합니다.
2. PHP 및 Vue 개발을 지원하는 서버
3. 직원 목록, 교대 근무 정보 등 작업 일정 관련 데이터
4. PHP와 Vue의 기본 구문과 개발 프로세스를 이해합니다.
5. 데이터베이스 테이블 만들기
   먼저 직원의 근무 일정 정보를 저장할 데이터베이스 테이블을 만들어야 합니다. 다음 필드를 포함하는 "shifts"라는 테이블을 생성한다고 가정합니다.

• id: 다양한 근무조를 구분하는 데 사용되는 고유 식별자
• date: 근무일자
• shift: 직원 ID;
• 다음 SQL 문을 사용하여 테이블을 생성할 수 있습니다:

CREATE TABLE Shifts (

date DATE,
shift VARCHAR(10),
employee_id INT
);

다음으로, 프런트엔드 요청을 처리하고 데이터베이스와 상호 작용할 PHP 백엔드 인터페이스를 만들어야 합니다. 먼저 직원 교대 정보를 얻기 위한 인터페이스를 구현하기 위해 "getShifts.php"라는 파일을 만듭니다.
3. 
   

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

   로그인 후 복사
마찬가지로 "saveShifts.php"에 직원 교대 정보를 저장하기 위한 인터페이스도 만들어야 합니다. :

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

이제 Vue 프런트엔드 인터페이스 만들기를 시작합니다. 먼저 직원의 작업 일정을 표시하기 위해 "ShiftSchedule.vue"라는 구성 요소를 만듭니다.
4. 
   

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

   로그인 후 복사
다음으로 기본 응용 프로그램에서 구성 요소를 사용합니다.

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

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

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

Continue 다음으로 PHP와 Vue를 배치합니다. 서버에서 코드를 작성하고 애플리케이션을 실행합니다. 본 웹페이지를 방문하시면 해당 직원의 근무 일정 인터페이스를 확인하실 수 있으며, 해당 직원의 일정 정보를 편집 및 저장하실 수 있습니다.
5. 
   
요약

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