PHP와 Vue를 결합하여 직원 출석에 대한 휴가 승인 기록 기능을 구현하는 방법

PHP와 Vue를 결합하여 직원 근태의 휴가 승인 기록 기능을 구현하는 방법

정보 기술의 급속한 발전으로 점점 더 많은 회사에서 직원 근태 및 휴가 승인 기록을 관리하기 위해 전자적 방법을 사용하기 시작했습니다. 널리 사용되는 백엔드 개발 언어로서 PHP는 높은 효율성, 안정성 및 쉬운 확장이라는 장점을 가지고 있습니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 우수한 사용자 인터페이스와 대화형 효과를 쉽게 얻을 수 있습니다. 이 기사에서는 PHP와 Vue를 결합하여 직원 근태의 휴가 승인 기록 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

시작하기 전에 요구 사항을 결정하고 데이터 구조를 설계해야 합니다. 직원 근태의 휴가 승인 기록 기능은 크게 휴가 신청과 승인 기록의 두 부분으로 구성됩니다. 휴가 신청에는 휴가 유형, 시작 시간, 종료 시간, 휴가 사유 등의 정보가 포함됩니다. 승인 기록에는 승인자, 승인 시간, 승인 의견 등의 정보가 포함됩니다. 다음은 간단한 데이터 구조의 예입니다.

신청 양식:

• id(int) - 신청 ID
• type(문자열) - 탈퇴 유형
• start_time(datetime) - 시작 시간
• end_time(datetime) - 종료 시간
• reason(문자열) - 탈퇴 사유

승인 기록 테이블:

• id(int) - 승인 기록 ID
• application_id(int) - 애플리케이션 탈퇴 ID
• approver(문자열) - 승인자
• approve_time(datetime) - 승인 시간
• comment(string) - 승인 설명

다음으로 PHP와 Vue를 사용하여 각각 백엔드 기능과 프런트엔드 기능을 구현하겠습니다.

1. 백엔드 코드 구현(PHP):

먼저 백엔드 로직을 처리할 PHP 파일을 만들어야 합니다. 이름을 "leave.php"로 지정한다고 가정해 보겠습니다. 본 파일에서는 휴가신청 및 승인기록의 추가, 삭제, 수정, 확인 등을 처리하기 위해 여러 API를 사용하게 됩니다.

(1) 휴가 신청 목록 가져오기 API:

<?php
// 获取请假申请列表
function getLeaveApplications() {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 查询请假申请列表
  $sql = "SELECT * FROM leave_application";
  $result = mysqli_query($conn, $sql);
  // 返回结果
  $applications = [];
  while ($row = mysqli_fetch_assoc($result)) {
    $applications[] = $row;
  }
  return $applications;
}

// 调用API获取请假申请列表
$leaveApplications = getLeaveApplications();
echo json_encode($leaveApplications);
?>

(2) 휴가 신청 추가 API:

<?php
// 添加请假申请
function addLeaveApplication($type, $startTime, $endTime, $reason) {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 插入请假申请
  $sql = "INSERT INTO leave_application (type, start_time, end_time, reason) VALUES ('$type', '$startTime', '$endTime', '$reason')";
  mysqli_query($conn, $sql);
}

// 获取POST请求中的数据
$type = $_POST['type'];
$startTime = $_POST['startTime'];
$endTime = $_POST['endTime'];
$reason = $_POST['reason'];

// 调用API添加请假申请
addLeaveApplication($type, $startTime, $endTime, $reason);
?>

(3) 승인 기록 목록 가져오기 API:

<?php
// 获取审批记录列表
function getApprovalRecords() {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 查询审批记录列表
  $sql = "SELECT * FROM approval_record";
  $result = mysqli_query($conn, $sql);
  // 返回结果
  $records = [];
  while ($row = mysqli_fetch_assoc($result)) {
    $records[] = $row;
  }
  return $records;
}

// 调用API获取审批记录列表
$approvalRecords = getApprovalRecords();
echo json_encode($approvalRecords);
?>

(4) 승인 기록 추가 API:

<?php
// 添加审批记录
function addApprovalRecord($applicationId, $approver, $approveTime, $comment) {
  // 连接数据库
  $conn = mysqli_connect("localhost", "root", "password", "database");
  // 插入审批记录
  $sql = "INSERT INTO approval_record (application_id, approver, approve_time, comment) VALUES ('$applicationId', '$approver', '$approveTime', '$comment')";
  mysqli_query($conn, $sql);
}

// 获取POST请求中的数据
$applicationId = $_POST['applicationId'];
$approver = $_POST['approver'];
$approveTime = $_POST['approveTime'];
$comment = $_POST['comment'];

// 调用API添加审批记录
addApprovalRecord($applicationId, $approver, $approveTime, $comment);
?>

2. 프런트엔드 코드 구현(Vue):

다음으로 Vue를 사용하여 프런트엔드 디스플레이와 상호작용 로직을 구현하겠습니다. JavaScript 파일 "app.js"에 모든 Vue 구성 요소를 정의한다고 가정해 보겠습니다.

(1) Vue 인스턴스 및 루트 컴포넌트 생성:

// 创建Vue实例
var app = new Vue({
  el: "#app",
  data: {
    leaveApplications: [],
    approvalRecords: []
  },
  mounted() {
    // 在mounted钩子函数中获取请假申请列表和审批记录列表
    this.getLeaveApplications();
    this.getApprovalRecords();
  },
  methods: {
    // 获取请假申请列表
    getLeaveApplications() {
      axios.get("leave.php")
        .then(response => {
          this.leaveApplications = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加请假申请
    addLeaveApplication(application) {
      axios.post("leave.php", application)
        .then(response => {
          this.getLeaveApplications(); // 添加成功后刷新列表
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取审批记录列表
    getApprovalRecords() {
      axios.get("approval.php")
        .then(response => {
          this.approvalRecords = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 添加审批记录
    addApprovalRecord(record) {
      axios.post("approval.php", record)
        .then(response => {
          this.getApprovalRecords(); // 添加成功后刷新列表
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

(2) 휴가 신청 및 승인 기록을 위한 컴포넌트 생성:

// 创建请假申请组件
Vue.component("leave-application", {
  props: ["application"],
  template: `
    <div>
      <h4>{{ application.type }}</h4>
      <p>时间：{{ application.start_time }} - {{ application.end_time }}</p>
      <p>事由：{{ application.reason }}</p>
    </div>
  `
});

// 创建审批记录组件
Vue.component("approval-record", {
  props: ["record"],
  template: `
    <div>
      <h4>{{ record.approver }}</h4>
      <p>时间：{{ record.approve_time }}</p>
      <p>意见：{{ record.comment }}</p>
    </div>
  `
});

(3) HTML에서 Vue 인스턴스 및 컴포넌트 사용:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>员工考勤请假审批记录</title>
</head>
<body>
  <div id="app">
    <h2>请假申请列表</h2>
    <div>
      <leave-application v-for="application in leaveApplications" :application="application" :key="application.id"></leave-application>
    </div>
    <hr>
    <h2>审批记录列表</h2>
    <div>
      <approval-record v-for="record in approvalRecords" :record="record" :key="record.id"></approval-record>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

위는 다음의 조합입니다. 직원 출석의 휴가 승인 기록 기능을 구현하는 Vue의 PHP 및 특정 코드 예제입니다. PHP에서 제공하는 백엔드 API와 Vue에서 제공하는 프런트엔드 컴포넌트를 통해 직원 휴가 신청, 승인 기록 조회 및 추가 기능을 구현할 수 있습니다. 실제 프로젝트에서는 필요에 따라 더욱 확장하고 최적화할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 PHP와 Vue를 결합하여 직원 출석에 대한 휴가 승인 기록 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!