PHP 및 Vue를 통해 직원 출석에 대한 지각 및 조기 출발 보고서를 생성하는 방법-PHP 튜토리얼-php.cn

PHP 및 Vue를 통해 직원 출석에 대한 지각 및 조기 출발 보고서를 생성하는 방법

王林

풀어 주다： 2023-09-24 12:46:01

원래의

1344명이 탐색했습니다.

PHP 및 Vue를 통해 직원 출석에 대한 지각 및 조기 출발 보고서를 생성하는 방법

PHP 및 Vue를 통해 직원 출석 지각 및 조기 퇴근 보고서를 생성하는 방법

직원 출석은 기업에서 중요한 관리 작업입니다. 직원 지각 및 조기 퇴근을 정확하게 기록하면 출석 효율성과 직원 규율을 향상시키는 데 도움이 될 수 있습니다. 이 기사에서는 PHP 및 Vue 기술을 통해 직원 출석에 대한 지각 및 조기 출발 보고서를 생성하는 방법을 소개하고 독자가 참조할 수 있는 구체적인 코드 예제를 제공합니다.

1. 데이터베이스 및 데이터 테이블 생성
먼저 "attendance"라는 데이터베이스를 생성하고 해당 데이터베이스에 "employee_attendance"라는 데이터 테이블을 생성해야 합니다. 데이터 테이블의 구조에는 다음 필드가 포함되어야 합니다.

id: 직원 ID
name: 직원 이름
date: 출석 날짜
time_in: 출근 시간
time_out: 출근 시간 at work

2. 백엔드 코드(PHP)
다음은 PHP를 사용하여 백엔드 로직을 구현한 코드 예시입니다.

<?php
// 建立数据库连接
$conn = new mysqli("localhost", "username", "password", "attendance");

// 获取员工考勤数据
$query = "SELECT * FROM employee_attendance";
$result = $conn->query($query);
$attendanceData = array();

// 循环遍历查询结果
while ($row = $result->fetch_assoc()) {
    $attendanceData[] = $row;
}

// 关闭数据库连接
$conn->close();

// 输出JSON格式的结果
header('Content-Type: application/json');
echo json_encode($attendanceData);
?>

로그인 후 복사

3. 프런트엔드 코드(Vue)
다음은 PHP를 사용하여 백엔드 로직을 구현한 코드 예시입니다. 프런트엔드 인터페이스 및 데이터 바인딩을 구현하는 Vue:

<!DOCTYPE html>
<html>
<head>
    <title>员工考勤报表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>员工考勤报表</h1>
        <table>
            <thead>
                <tr>
                    <th>员工姓名</th>
                    <th>考勤日期</th>
                    <th>上班打卡时间</th>
                    <th>下班打卡时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="employee in employees">
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.date }}</td>
                    <td>{{ employee.time_in }}</td>
                    <td>{{ employee.time_out }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                employees: [],
            },
            mounted() {
                fetch('backend.php')
                    .then(response => response.json())
                    .then(data => this.employees = data)
                    .catch(error => console.log(error));
            },
        });
    </script>
</body>
</html>

로그인 후 복사

4. 배포 및 실행
위의 백엔드 코드를 "backend.php"로, 프런트엔드 코드를 "frontend.html"로 저장합니다. 두 파일을 모두 웹 서버에 배치하고 서버가 PHP 및 Vue.js 라이브러리를 지원하는지 확인하세요. 그러면 "frontend.html" 페이지에 접속하시면 직원 출석에 대한 지각 및 조퇴 보고서를 보실 수 있습니다.

요약
이 기사에서는 PHP 및 Vue 기술을 사용하여 직원 출석 지각 및 조퇴 보고서를 생성하고, 백엔드 PHP 코드를 통해 데이터베이스에서 데이터를 쿼리하고, 이를 JSON 형식으로 출력합니다. 프런트 엔드 Vue 코드는 데이터 표시 및 동적 바인딩을 구현합니다. 이 기사의 예제가 독자가 PHP 및 Vue 기술을 이해하고 적용하여 직원 출석 보고서를 생성하는 데 도움이 되기를 바랍니다.

위 내용은 PHP 및 Vue를 통해 직원 출석에 대한 지각 및 조기 출발 보고서를 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!