Maison > Article > développement back-end > Comment générer des rapports de départ tardif et anticipé pour la présence des employés via PHP et Vue
Comment générer des rapports de départ tardif et anticipé pour la présence des employés via PHP et Vue
- 王林original
- 2023-09-24 12:05:181259parcourir
Comment générer un rapport de présence en retard et de départ anticipé des employés via PHP et Vue
La présence des employés est un travail de gestion important dans l'entreprise. L'enregistrement précis des retards et des départs anticipés des employés peut contribuer à améliorer l'efficacité de la présence et la discipline des employés. Cet article expliquera comment générer des rapports de départ tardif et anticipé pour la présence des employés via les technologies PHP et Vue, et fournira des exemples de code spécifiques pour référence aux lecteurs.
1. Créer une base de données et une table de données
Tout d'abord, vous devez créer une base de données nommée "présence" et créer une table de données nommée "employee_attendance" dans la base de données. La structure du tableau de données doit contenir les champs suivants :
- id : identifiant de l'employé
- name : nom de l'employé
- date : date de présence
- time_in : heure d'arrivée au travail
- time_out : heure d'arrivée au travail
2. Code back-end (PHP)
Ce qui suit est un exemple de code utilisant PHP pour implémenter la logique back-end :
<?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. Code front-end (Vue)
Ce qui suit est un exemple de code utilisant Vue pour implémenter l'interface frontale et la liaison de données :
<!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. Déploiement Et exécutez
Enregistrez le code backend ci-dessus sous "backend.php" et le code frontend sous "frontend.html". Placez les deux fichiers sur un serveur Web et assurez-vous que votre serveur prend en charge les bibliothèques PHP et Vue.js. Ensuite, en accédant à la page "frontend.html", vous pourrez consulter le rapport de départ tardif et anticipé de la présence des employés.
Résumé
Cet article utilise les technologies PHP et Vue pour générer des rapports de présence en retard et de départ anticipé des employés, interroge les données de la base de données via le code PHP back-end et les génère au format JSON. Le code frontal de Vue implémente l'affichage des données et la liaison dynamique. J'espère que les exemples de cet article aideront les lecteurs à comprendre et à appliquer les technologies PHP et Vue pour générer des rapports de présence des employés.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!