PHP와 Vue를 결합하여 직원 출석에 대한 체크인 및 체크아웃 기능을 구현하는 방법

PHP와 Vue를 결합하여 직원 근태 로그인 및 체크아웃 기능을 구현하는 방법

직원 근태는 로그인 및 로그아웃을 통해 모든 기업에 필수적인 관리 링크입니다. 직원의 출석을 효과적으로 추적할 수 있습니다. 이 글에서는 PHP와 Vue를 결합하여 직원 출석체크인 및 체크아웃 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 기술 선택

직원 출석의 체크인 및 체크아웃 기능을 구현하기 위해 백엔드 개발 언어로 PHP를 선택하고 프런트엔드 개발 프레임워크로 Vue를 선택합니다. PHP는 백그라운드 로직을 처리할 수 있고 Vue는 프런트엔드 디스플레이를 담당할 수 있습니다. 두 가지가 함께 작동하여 기능을 빠르게 구현합니다.

2. 데이터베이스 설계

먼저 직원 출석 정보를 저장할 데이터베이스를 설계해야 합니다. 다음은 직원 출석부의 간단한 디자인 예시입니다:

직원 출석부(출석)

• id: 출석 기록 ID(기본 키)
• employee_id: 직원 ID
• sign_in_time: 로그인 시간
• sign_out_time: 로그아웃 시간

3. 백엔드 구현

1. Attention.php라는 PHP 파일을 만들고 데이터베이스 연결 파일을 도입합니다.

<?php
include 'db_connect.php';

2. 직원 로그인 기능을 구현합니다.

// 接收从前台传来的员工ID
$employee_id = $_POST['employee_id'];

// 获取当前时间
$sign_in_time = date('Y-m-d H:i:s');

// 将签到信息插入到数据库
$sql = "INSERT INTO attendance (employee_id, sign_in_time) VALUES ('$employee_id', '$sign_in_time')";
$result = mysqli_query($conn, $sql);

if ($result) {
  echo "签到成功";
} else {
  echo "签到失败";
}

3. 직원 로그아웃 기능을 구현합니다.

// 接收从前台传来的员工ID
$employee_id = $_POST['employee_id'];

// 获取当前时间
$sign_out_time = date('Y-m-d H:i:s');

// 更新签退时间
$sql = "UPDATE attendance SET sign_out_time = '$sign_out_time' WHERE employee_id = '$employee_id'";
$result = mysqli_query($conn, $sql);

if ($result) {
  echo "签退成功";
} else {
  echo "签退失败";
}

4. 프런트 엔드 구현

1. 프런트 엔드 프로젝트에서 Vue 프레임워크를 사용하여 로그인 또는 로그아웃을 선택할 수 있는 직원 출석 페이지를 만듭니다.

<template>
  <div>
    <h2 id="员工考勤">员工考勤</h2>
    <select v-model="employeeId">
      <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
    </select>
    <button @click="signIn">签到</button>
    <button @click="signOut">签退</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employeeId: '',
      employees: [],
      message: ''
    }
  },
  mounted() {
    // 获取员工列表
    // 可以通过接口请求后台获取员工列表，这里直接模拟数据
    this.employees = [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' }
    ]
  },
  methods: {
    signIn() {
      // 向后台发送签到请求
      fetch('attendance.php', {
        method: 'POST',
        body: JSON.stringify({ employee_id: this.employeeId })
      })
        .then(response => response.text())
        .then(data => {
          this.message = data
        })
    },
    signOut() {
      // 向后台发送签退请求
      fetch('attendance.php', {
        method: 'POST',
        body: JSON.stringify({ employee_id: this.employeeId })
      })
        .then(response => response.text())
        .then(data => {
          this.message = data
        })
    }
  }
}
</script>

2. 패키징에 Vue CLI를 사용하고 배경 소개를 위한 정적 파일을 생성하세요.

5. 요약

PHP와 Vue를 결합하여 직원 출석에 대한 로그인 및 로그아웃 기능을 빠르게 구현할 수 있습니다. PHP는 백그라운드 로직 처리를 담당하고 Vue는 프런트 엔드 디스플레이를 담당하고 인터페이스를 통해 백그라운드로 요청을 보냅니다. 위는 간단한 예이므로 실제 필요에 따라 확장하고 최적화할 수 있습니다. 요약하자면, PHP와 Vue를 사용하여 직원 출석의 체크인 및 체크아웃 기능을 구현할 수 있습니다.

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