PHP와 Vue를 사용하여 직원 출석 시스템의 작업 일정 인터페이스를 설계하는 방법-PHP 튜토리얼-php.cn

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

PHPz

풀어 주다： 2023-09-25 10:04:02

원래의

1069명이 탐색했습니다.

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

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

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

준비
설계를 시작하기 전에 다음 사항을 준비해야 합니다.
PHP 및 Vue 개발을 지원하는 서버
직원 목록, 교대 근무 정보 등 작업 일정 관련 데이터
PHP와 Vue의 기본 구문과 개발 프로세스를 이해합니다.
데이터베이스 테이블 만들기
먼저 직원의 근무 일정 정보를 저장할 데이터베이스 테이블을 만들어야 합니다. 다음 필드를 포함하는 "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
// 连接数据库
$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();
?>

로그인 후 복사

<?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 프런트엔드 인터페이스 만들기

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

로그인 후 복사

응용 프로그램 실행

이 기사에서는 PHP와 Vue를 사용하여 직원 근태 관리 시스템의 작업 일정 인터페이스를 설계하는 방법을 소개합니다. 데이터베이스 테이블을 만들고, PHP 인터페이스를 작성하고, Vue 프런트엔드 인터페이스를 개발하여, 직원 일정 정보 저장이 실현됩니다. 실제 개발에서는 특정 요구 사항에 따라 인터페이스와 인터페이스를 확장하고 최적화할 수 있습니다. 이 기사가 직원 출석 시스템의 작업 일정 인터페이스를 설계하는 데 도움이 되기를 바랍니다.

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