PHP 및 Vue를 통해 온라인 직원 출석 보고서를 생성하는 방법-PHP 튜토리얼-php.cn

PHP 및 Vue를 통해 온라인 직원 출석 보고서를 생성하는 방법

WBOY

풀어 주다： 2023-09-24 16:20:01

원래의

796명이 탐색했습니다.

PHP 및 Vue를 통해 온라인 직원 출석 보고서를 생성하는 방법

현대 사무실 환경에서 직원 출석 관리는 매우 중요한 작업입니다. 지속적인 기술 개발로 인해 자동화된 시스템을 통해 온라인 직원 출석 보고서를 생성하는 것이 일반적인 요구 사항이 되었습니다. 이 기사에서는 PHP와 Vue를 사용하여 이 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

사전 준비
시작하기 전에, PHP와 Vue 관련 환경이 서버에 설치되어 있는지 확인해야 합니다. 설치되어 있지 않은 경우, 아래 링크를 통해 해당 설치 튜토리얼을 찾아보실 수 있습니다.

PHP 설치 튜토리얼: https://www.php.net/manual/en/install.php
Vue 설치 튜토리얼: https://vuejs.org/v2/guide/installation.html

데이터베이스 테이블 만들기
출석 보고서를 생성하기 전에 직원 출석 기록을 저장할 데이터베이스 테이블을 만들어야 합니다. 다음 SQL 문을 사용하여 간단한 테이블 구조를 만들 수 있습니다.

CREATE TABLE `attendance` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `employee_id` int(11) NOT NULL,
  `date` date NOT NULL,
  `clock_in_time` time NOT NULL,
  `clock_out_time` time NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

로그인 후 복사

이 테이블에는 직원 ID, 날짜, 근무 시간, 휴무 시간 등 각 펀치 인 관련 정보가 저장됩니다.

PHP 배경 파일 만들기
우리는 PHP를 사용하여 배경 논리를 처리하고 데이터베이스에서 데이터를 읽습니다. 먼저 "getAttendance.php"라는 파일을 만들고 다음 코드를 작성해야 합니다.

<?php

// 连接到数据库
$conn = new mysqli("localhost", "username", "password", "attendance");

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询数据库中的考勤记录
$sql = "SELECT * FROM attendance";
$result = $conn->query($sql);

// 检查查询结果是否为空
if ($result->num_rows > 0) {
    // 将查询结果转换为JSON格式，并输出给前端
    $rows = array();
    while ($row = $result->fetch_assoc()) {
        $rows[] = $row;
    }
    echo json_encode($rows);
} else {
    echo "没有找到考勤记录";
}

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

로그인 후 복사

이 파일에서 먼저 데이터베이스에 연결한 다음 데이터베이스의 출석 기록을 쿼리하고 결과를 JSON으로 변환합니다. 형식이 프런트엔드로 출력됩니다.

Vue 프런트엔드 코드 만들기
다음으로 출석 기록을 표시할 Vue 프런트엔드 페이지를 만들어야 합니다. 먼저 "index.html"이라는 파일을 만들고 Vue 및 axios 라이브러리를 소개합니다. 그런 다음 다음 코드를 작성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工考勤报告</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>员工ID</th>
                    <th>日期</th>
                    <th>上班时间</th>
                    <th>下班时间</th>
                </tr>
            </thead>
            <tbody v-if="attendance.length">
                <tr v-for="record in attendance" :key="record.id">
                    <td>{{ record.employee_id }}</td>
                    <td>{{ record.date }}</td>
                    <td>{{ record.clock_in_time }}</td>
                    <td>{{ record.clock_out_time }}</td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="4">没有找到考勤记录</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                attendance: []
            },
            mounted() {
                this.getAttendance();
            },
            methods: {
                getAttendance() {
                    axios.get('getAttendance.php')
                        .then(response => {
                            this.attendance = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

로그인 후 복사

이 코드에서는 Vue 인스턴스를 생성하고 마운트된 후크 함수에서 getAttendance 메서드를 호출하여 출석 기록을 가져옵니다. 그런 다음 v-for 지시어를 사용하여 테이블의 각 행을 생성합니다.