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

집

백엔드 개발

PHP 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 24, 2023 pm 04:17 PM

php vue 온라인 직원 출석 보고서

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 지시어를 사용하여 테이블의 각 행을 생성합니다.

프로젝트 실행
이제 위의 두 파일을 서버의 루트 디렉터리에 넣고 브라우저에서 "index.html" 파일에 접근하기만 하면 생성된 온라인 직원 출석 보고서를 볼 수 있습니다.

위 단계를 통해 우리는 PHP와 Vue를 사용하여 온라인 직원 출석 보고서를 성공적으로 생성했습니다. 물론 이는 단순한 예일 뿐이며 실제 요구에 따라 더욱 복잡한 개발을 할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7412

Cakephp 튜토리얼

1358

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

JWT (JSON Web Tokens) 및 PHP API의 사용 사례를 설명하십시오. Apr 05, 2025 am 12:04 AM

JWT는 주로 신분증 인증 및 정보 교환을 위해 당사자간에 정보를 안전하게 전송하는 데 사용되는 JSON을 기반으로 한 개방형 표준입니다. 1. JWT는 헤더, 페이로드 및 서명의 세 부분으로 구성됩니다. 2. JWT의 작업 원칙에는 세 가지 단계가 포함됩니다. JWT 생성, JWT 확인 및 Parsing Payload. 3. PHP에서 인증에 JWT를 사용하면 JWT를 생성하고 확인할 수 있으며 사용자 역할 및 권한 정보가 고급 사용에 포함될 수 있습니다. 4. 일반적인 오류에는 서명 검증 실패, 토큰 만료 및 대형 페이로드가 포함됩니다. 디버깅 기술에는 디버깅 도구 및 로깅 사용이 포함됩니다. 5. 성능 최적화 및 모범 사례에는 적절한 시그니처 알고리즘 사용, 타당성 기간 설정 합리적,

VUE를 사용하여 단일 헤더 및 다중 바디로 전자 따옴표 양식을 구현하는 방법은 무엇입니까? Apr 04, 2025 pm 11:39 PM

VUE의 단일 헤더 및 다중 바디로 전자 견적 양식을 구현하는 방법. 현대 기업 관리에서 인용 양식의 전자 처리는 효율성을 향상시키는 것입니다.

PHP 함수 인수 및 배열 풀기에서 ... (SPLAT) 연산자의 목적과 사용을 설명하십시오. Apr 06, 2025 am 12:07 AM

PHP의 ... (SPLAT) 연산자는 기능 매개 변수 및 배열을 포장하여 코드 단순성 및 효율성을 향상시키는 데 사용됩니다. 1) 함수 매개 변수 풀기 : 배열 요소를 함수로 매개 변수로 전달합니다. 2) 배열 풀기 : 배열을 다른 배열 또는 함수 매개 변수로 포장합니다.

매치 표현식 (PHP 8)과 스위치와 어떻게 다른지 설명하십시오. Apr 06, 2025 am 12:03 AM

PHP8에서 매치 표현식은 표현식의 값에 따라 다른 결과를 반환하는 새로운 제어 구조입니다. 1) 스위치 명령문과 유사하지만 실행 명령문 블록 대신 값을 반환합니다. 2) 경기 표현식은 엄격하게 비교되어 (===) 보안을 향상시킵니다. 3) 스위치 명세서에서 가능한 파손을 피하고 코드의 단순성과 가독성을 향상시킵니다.