PHP 및 Vue를 통해 온라인 직원 출석 보고서를 생성하는 방법
현대 사무실 환경에서 직원 출석 관리는 매우 중요한 작업입니다. 지속적인 기술 개발로 인해 자동화된 시스템을 통해 온라인 직원 출석 보고서를 생성하는 것이 일반적인 요구 사항이 되었습니다. 이 기사에서는 PHP와 Vue를 사용하여 이 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
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 // 连接到数据库 $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으로 변환합니다. 형식이 프런트엔드로 출력됩니다.
<!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 지시어를 사용하여 테이블의 각 행을 생성합니다.
위 단계를 통해 우리는 PHP와 Vue를 사용하여 온라인 직원 출석 보고서를 성공적으로 생성했습니다. 물론 이는 단순한 예일 뿐이며 실제 요구에 따라 더욱 복잡한 개발을 할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!
위 내용은 PHP 및 Vue를 통해 온라인 직원 출석 보고서를 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!