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

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

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

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

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

CREATE TABLE Shifts (

id INT PRIMARY KEY AUTO_INCREMENT,

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

Create PHP 백엔드 인터페이스

다음으로, 프런트엔드 요청을 처리하고 데이터베이스와 상호 작용할 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 프런트엔드 인터페이스 만들기

이제 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 인터페이스를 작성하고, Vue 프런트엔드 인터페이스를 개발하여, 직원 일정 정보 저장이 실현됩니다. 실제 개발에서는 특정 요구 사항에 따라 인터페이스와 인터페이스를 확장하고 최적화할 수 있습니다. 이 기사가 직원 출석 시스템의 작업 일정 인터페이스를 설계하는 데 도움이 되기를 바랍니다.

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