cari

Rumah >pembangunan bahagian belakang >tutorial php >Cara mereka bentuk halaman pemantauan kehadiran pekerja dalam talian menggunakan PHP dan Vue

Cara mereka bentuk halaman pemantauan kehadiran pekerja dalam talian menggunakan PHP dan Vue

PHPz
PHPzasal
2023-09-25 11:25:571124semak imbas

Cara mereka bentuk halaman pemantauan kehadiran pekerja dalam talian menggunakan PHP dan Vue

Cara menggunakan PHP dan Vue untuk mereka bentuk halaman pemantauan kehadiran pekerja dalam talian

1 dan pemformatan Dengan kemajuan pengurusan pejabat, banyak syarikat dan organisasi sedang giat melaksanakan kaedah pengurusan pejabat yang lebih cekap. Halaman pemantauan kehadiran pekerja dalam talian adalah sebahagian daripada pengurusan perniagaan moden. PHP dan Vue pada masa ini adalah teknologi pembangunan web yang digunakan secara meluas. Menggabungkan mereka boleh mereka bentuk halaman pemantauan kehadiran pekerja dalam talian dengan mudah.

2. Gambaran Keseluruhan Teknikal

    PHP: PHP ialah bahasa skrip sebelah pelayan yang sesuai untuk pembangunan web. Ia mudah dipelajari dan digunakan, stabil, boleh dipercayai, dan sangat berskala, dan sangat sesuai untuk membina halaman web dinamik dan aplikasi web.
  1. Vue: Vue ialah rangka kerja JavaScript untuk membina antara muka pengguna. Ia mempunyai ciri-ciri kesederhanaan, kecekapan, kemudahan penggunaan dan fleksibiliti, dan pengikatan data dua hala, menjadikannya sangat sesuai untuk membangunkan aplikasi web yang sangat interaktif.
3. Idea reka bentuk

    Reka bentuk pangkalan data
  1. Halaman pemantauan kehadiran perlu menyimpan rekod kehadiran pekerja, jadi pangkalan data perlu direka bentuk. Anda boleh membuat jadual data bernama "kehadiran", yang mengandungi lajur seperti ID pekerja, nama, masa kehadiran, dsb.
    2. Backend Development
  2. Gunakan PHP untuk membina antara muka belakang untuk mencapai fungsi berikut:
    3. Tambah rekod kehadiran pekerja: Masukkan rekod ke dalam pangkalan data berdasarkan ID pekerja dan tengah masa kehadiran.
  3. Soal rekod kehadiran pekerja: Soal rekod berkaitan daripada pangkalan data berdasarkan ID pekerja atau julat masa kehadiran.
  4. Pembangunan bahagian hadapan
  5. Gunakan Vue untuk membina antara muka bahagian hadapan untuk mencapai fungsi berikut:
    6. Paparan senarai rekod kehadiran pekerja: paparkan rekod kehadiran ditanya dalam pangkalan data dalam bentuk senarai pada halaman.
  6. Cari dan tapis rekod kehadiran pekerja: Cari dan tapis rekod kehadiran dengan memasukkan ID pekerja atau memilih julat masa kehadiran.
  7. Tambah rekod kehadiran pekerja: Sediakan kotak input dan butang untuk melaksanakan fungsi menambah rekod kehadiran pekerja pada halaman.
4. Contoh Kod

Berikut ialah contoh kod mudah yang menunjukkan cara mereka bentuk halaman pemantauan kehadiran pekerja dalam talian dalam PHP dan Vue:
#🎜🎜 #

    kod hujung belakang PHP: 
  1. <?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
 die("连接失败：" . $conn->connect_error);
}

// 添加员工考勤记录
if ($_SERVER["REQUEST_METHOD"] == "POST") {
 $employee_id = $_POST["employee_id"];
 $attendance_time = $_POST["attendance_time"];

 $sql = "INSERT INTO attendance (employee_id, attendance_time) VALUES ('$employee_id', '$attendance_time')";
 if ($conn->query($sql) === TRUE) {
     echo "记录添加成功";
 } else {
     echo "记录添加失败：" . $conn->error;
 }
}

// 查询员工考勤记录
if ($_SERVER["REQUEST_METHOD"] == "GET") {
 $employee_id = $_GET["employee_id"];
 $start_date = $_GET["start_date"];
 $end_date = $_GET["end_date"];

 $sql = "SELECT * FROM attendance WHERE employee_id = '$employee_id' AND attendance_time BETWEEN '$start_date' AND '$end_date'";
 $result = $conn->query($sql);

 if ($result->num_rows > 0) {
     while ($row = $result->fetch_assoc()) {
         echo "ID: " . $row["employee_id"]. " - 考勤时间: " . $row["attendance_time"]. "<br>";
     }
 } else {
     echo "未查询到相关记录";
 }
}

$conn->close();
?>

    2. Kod bahagian hadapan Vue: 
  2. <!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>
     <input type="text" v-model="employeeId" placeholder="员工ID">
     <input type="text" v-model="startDate" placeholder="开始日期">
     <input type="text" v-model="endDate" placeholder="结束日期">
     <button @click="searchAttendance">搜索</button>
     <hr>
     <ul>
         <li v-for="item in attendanceList">{{ item }}</li>
     </ul>
     <hr>
     <input type="text" v-model="attendanceTime" placeholder="考勤时间">
     <button @click="addAttendance">添加考勤记录</button>
 </div>

 <script>
     var app = new Vue({
         el: '#app',
         data: {
             employeeId: '',
             startDate: '',
             endDate: '',
             attendanceList: [],
             attendanceTime: '',
         },
         methods: {
             searchAttendance: function() {
                 // 发送GET请求查询员工考勤记录
                 this.attendanceList = []; // 清空列表
                 fetch('backend.php?employee_id=' + this.employeeId + '&start_date=' + this.startDate + '&end_date=' + this.endDate)
                     .then(response => response.text())
                     .then(data => {
                         if (data == "未查询到相关记录") {
                             alert(data);
                         } else {
                             this.attendanceList = data.split("<br>");
                         }
                     });
             },
             addAttendance: function() {
                 // 发送POST请求添加员工考勤记录
                 fetch('backend.php', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/x-www-form-urlencoded'
                     },
                     body: 'employee_id=' + this.employeeId + '&attendance_time=' + this.attendanceTime,
                 })
                 .then(response => response.text())
                 .then(data => {
                     alert(data);
                 });
             }
         }
     });
 </script>
</body>
</html>
    #🎜#

    #🎜 #Contoh kod di atas menunjukkan proses reka bentuk halaman pemantauan kehadiran pekerja dalam talian yang mudah. Melalui gabungan PHP dan Vue, kami boleh melaksanakan fungsi menambah, menyoal dan memaparkan rekod kehadiran pekerja dengan mudah. Sudah tentu, pengembangan dan pengoptimuman yang lebih berfungsi mungkin diperlukan dalam projek sebenar, tetapi idea dan kaedah asas adalah sama.

    3. Conclusion
PHP dan Vue ialah teknologi pembangunan web yang sangat berkuasa dan popular, dan ia memainkan peranan penting dalam reka bentuk halaman pemantauan kehadiran pekerja dalam talian. Dengan menggunakan kedua-dua teknologi ini secara rasional, kami boleh membangunkan halaman pemantauan kehadiran pekerja dalam talian yang berkuasa dan mesra pengguna untuk mencapai pengurusan pejabat yang cekap.

Atas ialah kandungan terperinci Cara mereka bentuk halaman pemantauan kehadiran pekerja dalam talian menggunakan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php JavaScript 接口 数据库
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Cara menggunakan perkhidmatan mikro PHP untuk melaksanakan kunci teragih dan kawalan penyegerakanArtikel seterusnya：Cara menggunakan perkhidmatan mikro PHP untuk melaksanakan kunci teragih dan kawalan penyegerakan

Artikel berkaitan

Lihat lagi