Maison > Article > développement back-end > Comment utiliser PHP et Vue pour concevoir l'interface de planification du travail du système de présence des employés
Comment utiliser PHP et Vue pour concevoir l'interface de planification du travail du système de présence des employés
Dans les entreprises modernes, le système de présence des employés est un élément très important, qui peut aider les entreprises à gérer les ressources humaines et à contrôler les heures de travail. La clé pour concevoir un système de présence des employés efficace et facile à utiliser est une interface de planification du travail raisonnable. Cet article expliquera comment utiliser PHP et Vue pour concevoir l'interface de planification du travail du système de présence des employés et fournira des exemples de code spécifiques.
CREATE TABLE shifts (
id INT PRIMARY KEY AUTO_INCREMENT, date DATE,
shift VARCHAR(10),
employee_id INT
);
<?php // 连接数据库 $conn = new mysqli("localhost", "username", "password", "database_name"); // 检查连接是否成功 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 获取所有员工排班信息 $sql = "SELECT * FROM shifts"; $result = $conn->query($sql); // 将结果转化为JSON格式并返回 $shifts = []; if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $shifts[] = $row; } } echo json_encode($shifts); // 关闭连接 $conn->close(); ?>
<?php // 连接数据库 $conn = new mysqli("localhost", "username", "password", "database_name"); // 检查连接是否成功 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 获取前端发送的员工排班信息 $data = json_decode(file_get_contents('php://input'), true); // 清空原有的员工排班信息 $sql = "TRUNCATE TABLE shifts"; $conn->query($sql); // 保存新的员工排班信息 foreach ($data as $shift) { $date = $shift['date']; $shiftType = $shift['shift']; $employeeId = $shift['employee_id']; $sql = "INSERT INTO shifts (date, shift, employee_id) VALUES ('$date', '$shiftType', $employeeId)"; $conn->query($sql); } // 关闭连接 $conn->close(); ?>Création de l'interface frontale de Vue
<template> <div> <table> <thead> <tr> <th>Date</th> <th>Shift</th> <th>Employee ID</th> </tr> </thead> <tbody> <tr v-for="(shift, index) in shifts" :key="index"> <td>{{ shift.date }}</td> <td>{{ shift.shift }}</td> <td>{{ shift.employee_id }}</td> </tr> </tbody> </table> <button @click="saveShifts">Save</button> </div> </template> <script> export default { data() { return { shifts: [] } }, mounted() { this.getShifts(); }, methods: { getShifts() { fetch('getShifts.php') .then(response => response.json()) .then(data => this.shifts = data); }, saveShifts() { fetch('saveShifts.php', { method: 'POST', body: JSON.stringify(this.shifts) }) .then(response => { if (response.ok) { alert('保存成功'); } else { alert('保存失败'); } }); } } } </script>
<template> <div> <h1>员工考勤系统 - 工作排班界面</h1> <ShiftSchedule></ShiftSchedule> </div> </template> <script> import ShiftSchedule from './ShiftSchedule.vue'; export default { components: { ShiftSchedule } } </script>Exécuter l'application
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!