PHP と Vue を使用して従業員の勤怠に関する遅刻および早退レポートを生成する方法
- 王林オリジナル
- 2023-09-24 12:05:181324ブラウズ
PHP と Vue を使用して従業員の勤怠に関する遅刻および早退レポートを生成する方法
従業員の勤怠は企業の重要な管理タスクです。遅刻と早退を正確に記録する従業員の退職は勤怠効率と従業員の規律の向上に役立ちます。この記事では、PHP および Vue テクノロジを使用して従業員の勤怠に関する遅刻および早退レポートを生成する方法を紹介し、読者の参考として具体的なコード例を示します。
1. データベースとデータ テーブルの作成
まず、「attendance」という名前のデータベースを作成し、そのデータベース内に「employee_attendance」という名前のデータ テーブルを作成する必要があります。データ テーブルの構造には、次のフィールドが含まれている必要があります:
- id: 従業員 ID
- name: 従業員名
- date: 出席日
- time_in: 職場の出勤時間
- time_out: 職場の出勤時間
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)
次は、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」として保存されます。両方のファイルを Web サーバーに配置し、サーバーが PHP および Vue.js ライブラリをサポートしていることを確認してください。そして、「frontend.html」ページにアクセスすると、従業員の出退勤状況の遅刻・早退レポートを確認することができます。
概要
この記事では、PHP と Vue テクノロジを使用して従業員の出欠遅刻および早退レポートを生成し、バックエンド PHP コードを通じてデータベースのデータをクエリし、それを JSON 形式で出力します。フロントエンドの Vue コードは、データ表示と動的バインディングを実装します。この記事の例が、読者が PHP と Vue テクノロジーを理解し、従業員の勤怠レポートを作成するために適用するのに役立つことを願っています。
以上がPHP と Vue を使用して従業員の勤怠に関する遅刻および早退レポートを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。