Bagaimana untuk menggabungkan PHP dan Vue untuk melaksanakan fungsi daftar masuk dan daftar keluar untuk kehadiran pekerja

Cara menggabungkan PHP dan Vue untuk merealisasikan fungsi log masuk dan daftar keluar kehadiran pekerja

Kehadiran pekerja ialah pautan pengurusan penting untuk setiap perusahaan Melalui log masuk dan log keluar, status kerja dan kehadiran pekerja dapat dikesan dengan berkesan. Artikel ini akan memperkenalkan cara menggabungkan PHP dan Vue untuk melaksanakan fungsi daftar masuk dan daftar keluar kehadiran pekerja, dan memberikan contoh kod khusus.

1. Pemilihan Teknologi

Untuk merealisasikan fungsi daftar masuk dan daftar keluar kehadiran pekerja, kami memilih PHP sebagai bahasa pembangunan bahagian belakang dan Vue sebagai rangka kerja pembangunan bahagian hadapan. PHP boleh mengendalikan logik latar belakang, dan Vue boleh bertanggungjawab untuk paparan bahagian hadapan Kedua-duanya bekerjasama untuk melaksanakan fungsi dengan cepat.

2. Reka bentuk pangkalan data

Pertama, kita perlu mereka bentuk pangkalan data untuk menyimpan maklumat kehadiran pekerja. Berikut ialah contoh reka bentuk ringkas helaian kehadiran pekerja:

Helaian kehadiran pekerja (kehadiran)

• id: ID rekod kehadiran (kunci utama)
• id_pekerja: ID pekerja
• masa_masuk_masuk: masa_log masuk
Masa log keluar

3. Pelaksanaan Backend

Buat fail PHP, bernama attendance.php, dan perkenalkan fail sambungan pangkalan data.

1. <?php
   include 'db_connect.php';

Laksanakan fungsi log masuk pekerja.

2. // 接收从前台传来的员工ID
   $employee_id = $_POST['employee_id'];
   
   // 获取当前时间
   $sign_in_time = date('Y-m-d H:i:s');
   
   // 将签到信息插入到数据库
   $sql = "INSERT INTO attendance (employee_id, sign_in_time) VALUES ('$employee_id', '$sign_in_time')";
   $result = mysqli_query($conn, $sql);
   
   if ($result) {
     echo "签到成功";
   } else {
     echo "签到失败";
   }

Laksanakan fungsi log keluar pekerja.

3. // 接收从前台传来的员工ID
   $employee_id = $_POST['employee_id'];
   
   // 获取当前时间
   $sign_out_time = date('Y-m-d H:i:s');
   
   // 更新签退时间
   $sql = "UPDATE attendance SET sign_out_time = '$sign_out_time' WHERE employee_id = '$employee_id'";
   $result = mysqli_query($conn, $sql);
   
   if ($result) {
     echo "签退成功";
   } else {
     echo "签退失败";
   }

4. Pelaksanaan bahagian hadapan

Dalam projek bahagian hadapan, gunakan rangka kerja Vue untuk membuat halaman kehadiran pekerja, di mana anda boleh memilih untuk log masuk atau keluar.

1. <template>
     <div>
       <h2>员工考勤</h2>
       <select v-model="employeeId">
         <option v-for="employee in employees" :key="employee.id" :value="employee.id">{{ employee.name }}</option>
       </select>
       <button @click="signIn">签到</button>
       <button @click="signOut">签退</button>
       <p>{{ message }}</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         employeeId: '',
         employees: [],
         message: ''
       }
     },
     mounted() {
       // 获取员工列表
       // 可以通过接口请求后台获取员工列表，这里直接模拟数据
       this.employees = [
         { id: 1, name: '张三' },
         { id: 2, name: '李四' },
         { id: 3, name: '王五' }
       ]
     },
     methods: {
       signIn() {
         // 向后台发送签到请求
         fetch('attendance.php', {
           method: 'POST',
           body: JSON.stringify({ employee_id: this.employeeId })
         })
           .then(response => response.text())
           .then(data => {
             this.message = data
           })
       },
       signOut() {
         // 向后台发送签退请求
         fetch('attendance.php', {
           method: 'POST',
           body: JSON.stringify({ employee_id: this.employeeId })
         })
           .then(response => response.text())
           .then(data => {
             this.message = data
           })
       }
     }
   }
   </script>

Gunakan Vue CLI untuk pembungkusan dan jana fail statik untuk pengenalan latar belakang.

5 Ringkasan

Dengan menggabungkan PHP dan Vue, kami boleh melaksanakan fungsi log masuk dan log keluar dengan cepat untuk kehadiran pekerja. PHP bertanggungjawab untuk memproses logik latar belakang, dan Vue bertanggungjawab untuk paparan bahagian hadapan dan menghantar permintaan ke latar belakang melalui antara muka. Di atas adalah contoh mudah, anda boleh mengembangkan dan mengoptimumkannya mengikut keperluan sebenar. Sebagai kesimpulan, kita boleh menggunakan PHP dan Vue untuk melaksanakan fungsi daftar masuk dan daftar keluar kehadiran pekerja.

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