PHP 및 Vue를 통해 직원 출석에 대한 지각 및 조기 출발 보고서를 생성하는 방법
- 王林원래의
- 2023-09-24 12:05:181259검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!