Cara menggunakan PHP dan Vue untuk mereka bentuk paparan data untuk sistem kehadiran pekerja

Cara menggunakan PHP dan Vue untuk mereka bentuk paparan data sistem kehadiran pekerja

Pengenalan:
Dalam perusahaan moden, sistem kehadiran adalah Bahagian yang sangat penting yang boleh menguruskan kehadiran pekerja dengan berkesan dan meningkatkan kecekapan kerja. Dengan bantuan PHP dan Vue, kami boleh mereka bentuk sistem kehadiran pekerja yang mudah dan cekap, dan secara intuitif memaparkan status kehadiran pekerja melalui fungsi paparan data. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk mereka bentuk paparan data sistem kehadiran pekerja dan memberikan contoh kod khusus.

1. Bina persekitaran
Untuk menggunakan PHP dan Vue untuk mereka bentuk paparan data sistem kehadiran pekerja, mula-mula kita perlu membina persekitaran yang sepadan. Sila ikuti langkah di bawah:

1. Install PHP
   Anda boleh memuat turun versi terkini PHP dari laman web rasmi PHP (https://www.php.net/downloads. php), dan pasangkannya mengikut panduan pemasangan. Selepas pemasangan selesai, anda boleh memasukkan php -v dalam terminal atau command prompt untuk menyemak sama ada PHP berjaya dipasang.

2. Install Vue CLI
   Vue CLI ialah alat perancah untuk membina projek Vue dengan cepat Anda boleh menggunakan npm (pengurus pakej Node.js) untuk memasangnya. Masukkan arahan berikut dalam terminal atau command prompt untuk memasang direktori projek Vue CLI: dan masukkan arahan berikut untuk mencipta projek Vue baharu:

   npm install -g @vue/cli

   Salin selepas log masuk
3. Buat skrip PHP

   Dalam direktori akar projek Vue baharu anda, buat fail skrip PHP bernama api.php. Fail ini akan digunakan untuk memproses permintaan yang dihantar dari bahagian hadapan Vue dan mengembalikan data yang sepadan.
   

2. Tulis kod bahagian hadapan
4. Seterusnya, kami akan menulis kod bahagian hadapan Vue untuk memaparkan data kehadiran pekerja. Sila ikuti langkah di bawah:
   

Modify App.vue
Buka fail App.vue dalam direktori src dan ubah suainya seperti berikut: #🎜🎜 #

vue create employee-attendance-system

1. Modify main.js

   Buka fail main.js dalam direktori src dan ubah suainya seperti berikut:
   

   <template>
     <div>
       <h1>员工考勤系统</h1>
       <table>
         <thead>
           <tr>
             <th>员工姓名</th>
             <th>日期</th>
             <th>上班时间</th>
             <th>下班时间</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="record in records" :key="record.id">
             <td>{{ record.name }}</td>
             <td>{{ record.date }}</td>
             <td>{{ record.startTime }}</td>
             <td>{{ record.endTime }}</td>
           </tr>
         </tbody>
       </table>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         records: [],
       };
     },
     mounted() {
       this.fetchRecords();
     },
     methods: {
       fetchRecords() {
         // 使用axios发送GET请求到后端的api.php脚本
         axios.get('api.php')
           .then(response => {
             this.records = response.data;
           })
           .catch(error => {
             console.error(error);
           });
       },
     },
   };
   </script>

   Salin selepas log masuk
   #🎜
3 Tulis kod bahagian belakang
2. Sekarang, kami akan menulis kod PHP bahagian belakang untuk memproses permintaan yang dihantar dari bahagian hadapan Vue dan mengembalikan data yang sepadan. Sila ikuti langkah di bawah:

   
   

Tulis api.php

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Dalam command prompt, tukar ke direktori root projek anda dan masukkan arahan berikut untuk memulakan front- kod hujung dan belakang:

1. <?php
   
   // 模拟员工考勤数据
   $records = [
     [
       'id' => 1,
       'name' => '员工1',
       'date' => '2020-01-01',
       'startTime' => '09:00:00',
       'endTime' => '18:00:00',
     ],
     [
       'id' => 2,
       'name' => '员工2',
       'date' => '2020-01-02',
       'startTime' => '08:30:00',
       'endTime' => '17:30:00',
     ],
   ];
   
   // 设置响应头，允许跨域访问
   header('Access-Control-Allow-Origin: *');
   header('Content-Type: application/json');
   
   // 将员工考勤数据以JSON格式返回给前端
   echo json_encode($records);

   Salin selepas log masuk

   Ini akan memulakan pelayan pembangunan tempatan dan mendengar pada http://localhost:8080. Anda boleh mengakses alamat ini dalam pelayar anda untuk melihat halaman paparan data sistem kehadiran pekerja.
   

2. Kesimpulan:

   Melalui langkah di atas, kami berjaya mereka bentuk sistem kehadiran pekerja yang mudah dan cekap menggunakan PHP dan Vue, dan melaksanakan paparan Fungsi data. Sudah tentu, ini hanyalah contoh asas, anda boleh memanjangkan dan menambah baik kod mengikut keperluan anda sendiri. Saya harap artikel ini membantu anda, dan saya berharap anda berjaya dalam mereka bentuk paparan data untuk sistem kehadiran pekerja menggunakan PHP dan Vue!
   

   Nota: Contoh kod di atas adalah untuk demonstrasi sahaja dan mungkin mempunyai beberapa isu keselamatan atau prestasi Sila buat penambahbaikan dan pengoptimuman yang sesuai mengikut keperluan anda dalam aplikasi sebenar.

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk mereka bentuk paparan data untuk sistem kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!