Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk melaksanakan pembangunan PHP dan Vue fungsi kehadiran pekerja
Cara melaksanakan pembangunan PHP dan Vue fungsi kehadiran pekerja
Dengan pengembangan skala perusahaan dan kerumitan operasi dan pengurusan, pengurusan kehadiran pekerja telah menjadi tugas penting yang tidak boleh diabaikan oleh setiap perusahaan. Untuk menguruskan kehadiran pekerja dengan mudah dan cekap, banyak syarikat memilih untuk menggunakan PHP dan Vue untuk pembangunan. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi kehadiran pekerja dan menyediakan contoh kod khusus.
1. Penyediaan projek
Sebelum memulakan pembangunan, anda perlu menyediakan persekitaran pembangunan terlebih dahulu. Pastikan anda telah memasang PHP, Vue dan sambungan atau kebergantungan yang berkaitan.
2. Reka bentuk pangkalan data
Inti sistem kehadiran ialah perekodan dan pengurusan maklumat kehadiran pekerja. Dalam pangkalan data, jadual pekerja dan jadual kehadiran perlu direka bentuk.
Jadual pekerja boleh memasukkan maklumat asas seperti ID pekerja, nama, jawatan, dsb. Helaian kehadiran boleh merangkumi maklumat rekod kehadiran seperti ID kehadiran, ID pekerja, tarikh, masa bekerja dan waktu tidak bekerja.
3. Pembangunan bahagian belakang
<?php $host = 'localhost'; $dbname = 'your_database_name'; $username = 'your_username'; $password = 'your_password'; try { $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); echo "Connected successfully"; } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); } ?>
<?php $employeeId = $_POST['employeeId']; $stmt = $conn->prepare("SELECT * FROM 考勤表 WHERE 员工ID = :employeeId"); $stmt->bindParam(':employeeId', $employeeId); $stmt->execute(); $result = $stmt->fetchAll(PDO::FETCH_ASSOC); echo json_encode($result); ?>
<?php $employeeId = $_POST['employeeId']; $date = $_POST['date']; $startTime = $_POST['startTime']; $endTime = $_POST['endTime']; $stmt = $conn->prepare("INSERT INTO 考勤表 (员工ID, 日期, 上班时间, 下班时间) VALUES (:employeeId, :date, :startTime, :endTime)"); $stmt->bindParam(':employeeId', $employeeId); $stmt->bindParam(':date', $date); $stmt->bindParam(':startTime', $startTime); $stmt->bindParam(':endTime', $endTime); $stmt->execute(); echo "Record inserted successfully"; ?>
4. Pembangunan bahagian hadapan
new Vue({ el: '#app', data: { employeeId: '', date: '', startTime: '', endTime: '', attendanceList: [] }, methods: { getAttendanceList() { // 发送Ajax请求,获取考勤列表数据 axios.post('getAttendanceList.php', { employeeId: this.employeeId }) .then((response) => { this.attendanceList = response.data; }) .catch((error) => { console.log(error); }); }, addAttendance() { // 发送Ajax请求,添加员工考勤记录 axios.post('addAttendance.php', { employeeId: this.employeeId, date: this.date, startTime: this.startTime, endTime: this.endTime }) .then((response) => { console.log(response.data); }) .catch((error) => { console.log(error); }); } } });
Membina halaman hadapan
Dalam HTML, kami boleh menggunakan fungsi pengikatan data Vue untuk memaparkan senarai kehadiran pekerja secara dinamik dan memproses penyerahan rekod kehadiran pekerja. Berikut ialah contoh halaman muka hadapan yang mudah:
<div id="app"> <h1>员工考勤管理系统</h1> <div> <label for="employeeId">员工ID:</label> <input type="text" v-model="employeeId"> <button @click="getAttendanceList">查询考勤列表</button> </div> <table> <tr> <th>日期</th> <th>上班时间</th> <th>下班时间</th> </tr> <tr v-for="attendance in attendanceList"> <td>{{ attendance.日期 }}</td> <td>{{ attendance.上班时间 }}</td> <td>{{ attendance.下班时间 }}</td> </tr> </table> <div> <label for="date">日期:</label> <input type="text" v-model="date"> <label for="startTime">上班时间:</label> <input type="text" v-model="startTime"> <label for="endTime">下班时间:</label> <input type="text" v-model="endTime"> <button @click="addAttendance">提交考勤记录</button> </div> </div>
Di atas ialah contoh cara menggunakan PHP dan Vue untuk membangunkan fungsi kehadiran pekerja. Melalui reka bentuk pangkalan data yang munasabah dan logik pemprosesan latar belakang, digabungkan dengan antara muka interaktif bahagian hadapan yang mesra, kami boleh dengan cepat melaksanakan sistem kehadiran pekerja yang mudah dan cekap. Pembangun boleh mengoptimumkan dan mengembangkan lagi berdasarkan keperluan khusus. Semoga artikel ini dapat membantu anda.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pembangunan PHP dan Vue fungsi kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!