Cara menggunakan PHP dan Vue untuk mereka bentuk antara muka penjadualan kerja sistem kehadiran pekerja

Cara menggunakan PHP dan Vue untuk mereka bentuk antara muka penjadualan kerja sistem kehadiran pekerja

Dalam perusahaan moden, sistem kehadiran pekerja adalah sangat penting Sebahagian daripadanya boleh membantu syarikat mengurus sumber manusia dan mengawal waktu bekerja. Kunci untuk mereka bentuk sistem kehadiran pekerja yang cekap dan mudah digunakan ialah antara muka penjadualan kerja yang munasabah. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk mereka bentuk antara muka penjadualan kerja sistem kehadiran pekerja dan menyediakan contoh kod khusus.

1. Persediaan
   Sebelum memulakan reka bentuk, anda perlu memastikan bahawa anda mempunyai persediaan berikut:
2. Pelayan yang menyokong pembangunan PHP dan Vue ;
3. Data berkaitan jadual kerja, seperti senarai pekerja, maklumat syif, dsb.;
4. Fahami sintaks asas dan proses pembangunan PHP dan Vue.
5. Buat jadual pangkalan data
   Pertama, kita perlu mencipta jadual pangkalan data untuk menyimpan maklumat jadual kerja pekerja. Katakan kita mencipta jadual bernama "shifts" dengan medan berikut:

• id: pengecam unik yang digunakan untuk membezakan syif yang berbeza; : tarikh syif;
• shift:
• id_pekerja: ID pekerja.
• Anda boleh menggunakan pernyataan SQL berikut untuk mencipta jadual ini:

CIPTA anjakan JADUAL (

id INT PRIMARY KEY AUTO_INCREMENT🎜,#🎜 tarikh TARIKH,

shift VARCHAR(10),
id_pekerja INT
);


Buat antara muka belakang PHP

Seterusnya, kami perlu #Seterusnya, mencipta antara muka belakang PHP digunakan untuk mengendalikan permintaan bahagian hadapan dan berinteraksi dengan pangkalan data. Kami mula-mula mencipta fail bernama "getShifts.php" untuk melaksanakan antara muka untuk mendapatkan maklumat jadual pekerja:

3. <?php
   // 连接数据库
   $conn = new mysqli("localhost", "username", "password", "database_name");
   
   // 检查连接是否成功
   if ($conn->connect_error) {
       die("连接失败: " . $conn->connect_error);
   }
   
   // 获取所有员工排班信息
   $sql = "SELECT * FROM shifts";
   $result = $conn->query($sql);
   
   // 将结果转化为JSON格式并返回
   $shifts = [];
   if ($result->num_rows > 0) {
       while ($row = $result->fetch_assoc()) {
           $shifts[] = $row;
       }
   }
   echo json_encode($shifts);
   
   // 关闭连接
   $conn->close();
   ?>

   
   Begitu juga, kami juga perlu mencipta fail untuk menyimpan jadual pekerja Antara muka maklumat dilaksanakan dalam fail "saveShifts.php":

<?php
// 连接数据库
$conn = new mysqli("localhost", "username", "password", "database_name");

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取前端发送的员工排班信息
$data = json_decode(file_get_contents('php://input'), true);

// 清空原有的员工排班信息
$sql = "TRUNCATE TABLE shifts";
$conn->query($sql);

// 保存新的员工排班信息
foreach ($data as $shift) {
    $date = $shift['date'];
    $shiftType = $shift['shift'];
    $employeeId = $shift['employee_id'];
    
    $sql = "INSERT INTO shifts (date, shift, employee_id) VALUES ('$date', '$shiftType', $employeeId)";
    $conn->query($sql);
}

// 关闭连接
$conn->close();
?>

Buat antara muka hadapan Vue

Sekarang, kami mula mencipta antara muka hadapan Vue. Kami mula-mula mencipta komponen bernama "ShiftSchedule.vue" untuk memaparkan jadual kerja pekerja:

4. <template>
     <div>
       <table>
         <thead>
           <tr>
             <th>Date</th>
             <th>Shift</th>
             <th>Employee ID</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(shift, index) in shifts" :key="index">
             <td>{{ shift.date }}</td>
             <td>{{ shift.shift }}</td>
             <td>{{ shift.employee_id }}</td>
           </tr>
         </tbody>
       </table>
       <button @click="saveShifts">Save</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         shifts: []
       }
     },
     mounted() {
       this.getShifts();
     },
     methods: {
       getShifts() {
         fetch('getShifts.php')
           .then(response => response.json())
           .then(data => this.shifts = data);
       },
       saveShifts() {
         fetch('saveShifts.php', {
           method: 'POST',
           body: JSON.stringify(this.shifts)
         })
           .then(response => {
             if (response.ok) {
               alert('保存成功');
             } else {
               alert('保存失败');
             }
           });
       }
     }
   }
   </script>

   
   Seterusnya, kami menggunakan komponen ini dalam aplikasi utama:

<template>
  <div>
    <h1>员工考勤系统 - 工作排班界面</h1>
    <ShiftSchedule></ShiftSchedule>
  </div>
</template>

<script>
import ShiftSchedule from './ShiftSchedule.vue';

export default {
  components: {
    ShiftSchedule
  }
}
</script>

#🎜🎜 #

Jalankan aplikasi

Seterusnya, kami meletakkan kod PHP dan Vue pada pelayan dan menjalankan aplikasi. Lawati halaman web ini untuk melihat antara muka jadual kerja pekerja dan anda boleh mengedit serta menyimpan maklumat jadual pekerja.

5. Ringkasan
   Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk mereka bentuk antara muka penjadualan kerja sistem kehadiran pekerja Dengan mencipta jadual pangkalan data, menulis antara muka PHP dan membangunkan bahagian hadapan Vue -antara muka akhir, Melaksanakan fungsi mendapatkan dan menyimpan maklumat jadual pekerja. Dalam pembangunan sebenar, antara muka dan antara muka boleh dikembangkan dan dioptimumkan mengikut keperluan khusus. Saya harap artikel ini akan membantu anda mereka bentuk antara muka penjadualan kerja sistem kehadiran pekerja.

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