Rumah > Artikel > pembangunan bahagian belakang > Cara menggunakan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja
Cara menggunakan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja
Memandangkan skala perusahaan terus berkembang, proses kelulusan cuti pekerja telah berubah menjadi lebih rumit. Untuk meningkatkan kecekapan kerja, banyak syarikat telah mula menggunakan kaedah elektronik untuk kelulusan cuti, antaranya PHP dan Vue merupakan gabungan yang sangat berkuasa. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja, dan menyediakan beberapa contoh kod khusus.
1 Persediaan
Pertama, kita perlu membina persekitaran yang mudah untuk menjalankan PHP dan Vue. Kita boleh menggunakan perisian seperti XAMPP atau WAMP untuk membina pelayan tempatan. Kemudian, cipta pangkalan data pada pelayan untuk menyimpan rekod cuti pekerja. Seterusnya, cipta jadual pangkalan data bernama "kehadiran" dengan medan berikut:
<?php require_once 'config.php'; // 查询请假记录 if ($_SERVER['REQUEST_METHOD'] === 'GET') { $conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } $sql = "SELECT * FROM attendance"; $result = $conn->query($sql); if ($result->num_rows > 0) { $data = []; while ($row = $result->fetch_assoc()) { $data[] = $row; } echo json_encode($data); } else { echo "没有找到请假记录"; } $conn->close(); } // 创建请假记录 if ($_SERVER['REQUEST_METHOD'] === 'POST') { // 获取前端传递的数据 $name = $_POST['name']; $start_date = $_POST['start_date']; $end_date = $_POST['end_date']; $reason = $_POST['reason']; $conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } $sql = "INSERT INTO attendance (name, start_date, end_date, reason, status) VALUES ('$name', '$start_date', '$end_date', '$reason', '待审批')"; if ($conn->query($sql) === TRUE) { echo "请假申请已提交"; } else { echo "请假申请提交失败"; } $conn->close(); } ?>
<?php define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', '123456'); define('DB_NAME', 'attendance'); ?>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>员工考勤请假审批流程</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> </head> <body> <div id="app" class="container"> <h1>员工考勤请假审批流程</h1> <h2>请假记录</h2> <table class="table"> <thead> <tr> <th>#</th> <th>姓名</th> <th>开始日期</th> <th>结束日期</th> <th>请假原因</th> <th>审批状态</th> </tr> </thead> <tbody> <tr v-for="(record, index) in records" :key="index"> <td>{{ index + 1 }}</td> <td>{{ record.name }}</td> <td>{{ record.start_date }}</td> <td>{{ record.end_date }}</td> <td>{{ record.reason }}</td> <td>{{ record.status }}</td> </tr> </tbody> </table> <h2>提交请假申请</h2> <form @submit.prevent="submitForm"> <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" id="name" v-model="name" required> </div> <div class="form-group"> <label for="start_date">开始日期</label> <input type="text" class="form-control" id="start_date" v-model="start_date" required> </div> <div class="form-group"> <label for="end_date">结束日期</label> <input type="text" class="form-control" id="end_date" v-model="end_date" required> </div> <div class="form-group"> <label for="reason">请假原因</label> <textarea class="form-control" id="reason" v-model="reason" required></textarea> </div> <button type="submit" class="btn btn-primary">提交申请</button> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> <script> new Vue({ el: '#app', data: { name: '', start_date: '', end_date: '', reason: '', records: [] }, mounted() { this.getRecords(); }, methods: { getRecords() { fetch('api.php') .then(response => response.json()) .then(data => { this.records = data; }); }, submitForm() { fetch('api.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `name=${this.name}&start_date=${this.start_date}&end_date=${this.end_date}&reason=${this.reason}` }) .then(response => response.text()) .then(data => { alert(data); this.getRecords(); }); } } }); </script> </body> </html>
Di atas ialah pengenalan ringkas dan contoh kod penggunaan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja. Melalui contoh mudah ini, ia boleh membantu perusahaan merealisasikan pengurusan elektronik kelulusan cuti, meningkatkan kecekapan kerja, dan mengurangkan operasi manual yang membosankan. Sudah tentu, ini hanyalah pelaksanaan yang mudah, dan senario aplikasi tertentu memerlukan pelarasan dan penambahbaikan selanjutnya.
Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membina proses kelulusan cuti untuk kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!