Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk menggabungkan PHP dan Vue untuk melaksanakan fungsi rakaman kelulusan cuti untuk kehadiran pekerja
Cara menggabungkan PHP dan Vue untuk melaksanakan fungsi rekod kelulusan cuti kehadiran pekerja
Dengan perkembangan pesat teknologi maklumat, lebih banyak dan lebih banyak Perusahaan mula menggunakan kaedah elektronik untuk menguruskan kehadiran pekerja dan meninggalkan rekod kelulusan. Sebagai bahasa pembangunan back-end yang digunakan secara meluas, PHP mempunyai kelebihan kecekapan tinggi, kestabilan dan pengembangan yang mudah. Sebagai rangka kerja bahagian hadapan yang popular, Vue boleh mencapai antara muka pengguna yang baik dan kesan interaktif dengan mudah. Artikel ini akan memperkenalkan cara menggabungkan PHP dan Vue untuk melaksanakan fungsi rekod kelulusan cuti kehadiran pekerja, dan menyediakan contoh kod khusus.
Sebelum kita mula, kita perlu menentukan keperluan dan mereka bentuk struktur data. Fungsi rekod kelulusan cuti kehadiran pekerja terutamanya merangkumi dua bahagian: permohonan cuti dan rekod kelulusan. Permohonan cuti termasuk jenis cuti, masa mula, masa tamat, sebab cuti dan maklumat lain, dan rekod kelulusan termasuk kelulusan, masa kelulusan, pendapat kelulusan dan maklumat lain. Berikut ialah contoh struktur data mudah:
Tinggalkan borang permohonan:
Jadual rekod kelulusan:
(1) API untuk mendapatkan senarai permohonan cuti:
<?php // 获取请假申请列表 function getLeaveApplications() { // 连接数据库 $conn = mysqli_connect("localhost", "root", "password", "database"); // 查询请假申请列表 $sql = "SELECT * FROM leave_application"; $result = mysqli_query($conn, $sql); // 返回结果 $applications = []; while ($row = mysqli_fetch_assoc($result)) { $applications[] = $row; } return $applications; } // 调用API获取请假申请列表 $leaveApplications = getLeaveApplications(); echo json_encode($leaveApplications); ?>
(2) API untuk menambah permohonan cuti:
<?php // 添加请假申请 function addLeaveApplication($type, $startTime, $endTime, $reason) { // 连接数据库 $conn = mysqli_connect("localhost", "root", "password", "database"); // 插入请假申请 $sql = "INSERT INTO leave_application (type, start_time, end_time, reason) VALUES ('$type', '$startTime', '$endTime', '$reason')"; mysqli_query($conn, $sql); } // 获取POST请求中的数据 $type = $_POST['type']; $startTime = $_POST['startTime']; $endTime = $_POST['endTime']; $reason = $_POST['reason']; // 调用API添加请假申请 addLeaveApplication($type, $startTime, $endTime, $reason); ?>
(3) Dapatkan kelulusan API untuk senarai rekod:
<?php // 获取审批记录列表 function getApprovalRecords() { // 连接数据库 $conn = mysqli_connect("localhost", "root", "password", "database"); // 查询审批记录列表 $sql = "SELECT * FROM approval_record"; $result = mysqli_query($conn, $sql); // 返回结果 $records = []; while ($row = mysqli_fetch_assoc($result)) { $records[] = $row; } return $records; } // 调用API获取审批记录列表 $approvalRecords = getApprovalRecords(); echo json_encode($approvalRecords); ?>
(4) API untuk menambah rekod kelulusan:
<?php // 添加审批记录 function addApprovalRecord($applicationId, $approver, $approveTime, $comment) { // 连接数据库 $conn = mysqli_connect("localhost", "root", "password", "database"); // 插入审批记录 $sql = "INSERT INTO approval_record (application_id, approver, approve_time, comment) VALUES ('$applicationId', '$approver', '$approveTime', '$comment')"; mysqli_query($conn, $sql); } // 获取POST请求中的数据 $applicationId = $_POST['applicationId']; $approver = $_POST['approver']; $approveTime = $_POST['approveTime']; $comment = $_POST['comment']; // 调用API添加审批记录 addApprovalRecord($applicationId, $approver, $approveTime, $comment); ?>Pelaksanaan kod bahagian hadapan (Vue):
// 创建Vue实例 var app = new Vue({ el: "#app", data: { leaveApplications: [], approvalRecords: [] }, mounted() { // 在mounted钩子函数中获取请假申请列表和审批记录列表 this.getLeaveApplications(); this.getApprovalRecords(); }, methods: { // 获取请假申请列表 getLeaveApplications() { axios.get("leave.php") .then(response => { this.leaveApplications = response.data; }) .catch(error => { console.log(error); }); }, // 添加请假申请 addLeaveApplication(application) { axios.post("leave.php", application) .then(response => { this.getLeaveApplications(); // 添加成功后刷新列表 }) .catch(error => { console.log(error); }); }, // 获取审批记录列表 getApprovalRecords() { axios.get("approval.php") .then(response => { this.approvalRecords = response.data; }) .catch(error => { console.log(error); }); }, // 添加审批记录 addApprovalRecord(record) { axios.post("approval.php", record) .then(response => { this.getApprovalRecords(); // 添加成功后刷新列表 }) .catch(error => { console.log(error); }); } } });(2) Buat komponen untuk permohonan cuti dan rekod kelulusan:
// 创建请假申请组件 Vue.component("leave-application", { props: ["application"], template: ` <div> <h4>{{ application.type }}</h4> <p>时间:{{ application.start_time }} - {{ application.end_time }}</p> <p>事由:{{ application.reason }}</p> </div> ` }); // 创建审批记录组件 Vue.component("approval-record", { props: ["record"], template: ` <div> <h4>{{ record.approver }}</h4> <p>时间:{{ record.approve_time }}</p> <p>意见:{{ record.comment }}</p> </div> ` });(3 ) Gunakan contoh dan komponen Vue dalam HTML:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>员工考勤请假审批记录</title> </head> <body> <div id="app"> <h2>请假申请列表</h2> <div> <leave-application v-for="application in leaveApplications" :application="application" :key="application.id"></leave-application> </div> <hr> <h2>审批记录列表</h2> <div> <approval-record v-for="record in approvalRecords" :record="record" :key="record.id"></approval-record> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="app.js"></script> </body> </html>Di atas ialah contoh kod khusus yang menggabungkan PHP dan Vue untuk melaksanakan fungsi rekod kelulusan cuti kehadiran pekerja. Melalui API bahagian belakang yang disediakan oleh PHP dan komponen bahagian hadapan yang disediakan oleh Vue, kami dapat merealisasikan fungsi paparan dan penambahan permohonan cuti pekerja dan rekod kelulusan. Dalam projek sebenar, kami boleh mengembangkan dan mengoptimumkan lagi mengikut keperluan. Harap artikel ini membantu anda!
Atas ialah kandungan terperinci Bagaimana untuk menggabungkan PHP dan Vue untuk melaksanakan fungsi rakaman kelulusan cuti untuk kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!