Bagaimana untuk melaksanakan fungsi penjanaan automatik kehadiran pekerja melalui PHP dan Vue

Bagaimana untuk merealisasikan fungsi penjanaan automatik kehadiran pekerja melalui PHP dan Vue

Pengenalan:
Kehadiran pekerja sangat penting pengurusan perusahaan Sebagai sebahagian daripada proses, rakaman manual tradisional data kehadiran adalah memakan masa, intensif buruh dan terdedah kepada kesilapan. Dengan bantuan dua alat pembangunan yang berkuasa, PHP dan Vue, kami boleh merealisasikan fungsi penjanaan automatik kehadiran pekerja dan meningkatkan ketepatan data kehadiran dan kecekapan kerja. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan fungsi penjanaan automatik kehadiran pekerja melalui PHP dan Vue, dan melampirkan contoh kod tertentu.

1. Persediaan

1. Pasang PHP dan persekitaran pembangunan berkaitan Vue
2. Buat pangkalan data, termasuk jadual pekerja dan jadual kehadiran 🎜#
Tambahkan medan pada jadual kehadiran termasuk: ID pekerja, tarikh kehadiran, masa bekerja, masa luar bertugas

2. Pembangunan bahagian belakang (PHP) #🎜 🎜#

Buat fail PHP bernama "attendance.php", yang digunakan untuk mengendalikan permintaan bahagian hadapan dan berinteraksi dengan pangkalan data

1. Tulis kod dalam "attendance. php" , laksanakan fungsi berikut:
a) Sambungkan ke pangkalan data
2. b) Terima ID pekerja dan tarikh kehadiran yang diluluskan oleh bahagian hadapan
   c) Soal rekod kehadiran pekerja mengenainya tarikh
   d) Jika ada rekod, kembalikan data sedia ada, jika tidak, jana rekod kehadiran secara automatik dan masukkannya ke dalam pangkalan data
   
   
Berikut ialah versi ringkas kod contoh:

3. <?php
   // 连接数据库
   $conn = new mysqli("localhost", "username", "password", "database");
   
   // 检查连接
   if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
   }
   
   // 接收员工ID和考勤日期
   $empId = $_POST["empId"];
   $date = $_POST["date"];
   
   // 查询考勤记录
   $sql = "SELECT * FROM attendance WHERE emp_id = $empId AND date = $date";
   $result = $conn->query($sql);
   
   // 如果有记录，则返回已有的数据
   if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
   } else {
    // 自动生成考勤记录
    $insertSql = "INSERT INTO attendance (emp_id, date, clock_in_time, clock_out_time)
                  VALUES ($empId, $date, '09:00:00', '18:00:00')";
   
    if ($conn->query($insertSql) === TRUE) {
        echo "考勤记录已生成";
    } else {
        echo "生成考勤记录失败: " . $conn->error;
    }
   }
   
   $conn->close();
   ?>

3. Pembangunan bahagian hadapan (Vue)

Cipta projek Vue dan gunakan perpustakaan axios untuk hantar permintaan ke bahagian belakang

1. dalam Tulis kod dalam fail Vue untuk mencapai fungsi berikut:
a) Bina halaman, termasuk kotak input ID pekerja, pemilih tarikh kehadiran dan butang hantar # 🎜🎜#b) Dengar acara penyerahan borang dan dapatkan ID pekerja dan nilai input yang dimasukkan oleh pengguna Tarikh kehadiran
2. c) Gunakan perpustakaan axios untuk menghantar permintaan POST ke fail "attendance.php" pada backend
   d) Proses data yang dikembalikan oleh latar belakang dan kemas kini paparan halaman
   
   #🎜🎜 #Berikut ialah versi ringkas contoh kod:
   

   <template>
     <div>
    <label for="empId">员工ID:</label>
    <input type="text" id="empId" v-model="empId">
    <label for="date">考勤日期:</label>
    <input type="date" id="date" v-model="date">
    <button @click="submit">提交</button>
    <p v-if="attendance">上班时间：{{ attendance.clock_in_time }}，下班时间：{{ attendance.clock_out_time }}</p>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     data() {
    return {
      empId: '',
      date: '',
      attendance: null
    }
     },
     methods: {
    submit() {
      axios.post('attendance.php', {
        empId: this.empId,
        date: this.date
      })
      .then(response => {
        this.attendance = response.data;
      })
      .catch(error => {
        console.log(error);
      });
    }
     }
   }
   </script>

   #🎜🎜 #
3. 4. Jalankan

Jalankan projek Vue di terminal dan lawati URL Berpadanan

Masukkan ID pekerja dan tarikh kehadiran pada halaman, klik butang hantar

Halaman akan memaparkan rekod kehadiran pekerja pada tarikh tersebut Jika tiada rekod, ia akan Fungsi penjanaan automatik akan menjana rekod kehadiran dan memaparkannya pada halaman
2. Ringkasan:
Melalui gabungan PHP dan Vue, kami telah merealisasikan fungsi penjanaan automatik kehadiran pekerja. PHP bertanggungjawab untuk pemprosesan bahagian belakang dan interaksi pangkalan data, dan Vue bertanggungjawab untuk pembinaan halaman hujung hadapan dan komunikasi dengan bahagian belakang. Kaedah ini boleh meningkatkan ketepatan dan kecekapan kerja data kehadiran pekerja, dan mengurangkan ralat dan kebosanan yang disebabkan oleh rakaman manual. Sudah tentu, ini hanyalah versi ringkas contoh, dan projek sebenar perlu dikembangkan dan dioptimumkan dengan sewajarnya mengikut keperluan. Saya harap artikel ini akan membantu pembaca yang sedang belajar dan mempraktikkan PHP dan Vue.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penjanaan automatik kehadiran pekerja melalui PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!