Cara menggunakan PHP dan Vue untuk membangunkan pertanyaan rekod pukulan kehadiran pekerja dalam talian

Cara menggunakan PHP dan Vue untuk membangunkan pertanyaan rekod punch-in dalam talian untuk kehadiran pekerja

Dalam perusahaan moden, pengurusan kehadiran pekerja adalah tugas yang sangat penting. Rekod manual tradisional mudah ralat dan menyusahkan untuk pertanyaan dan statistik. Dengan fungsi PHP dan Vue yang berkuasa, kami boleh membangunkan sistem pertanyaan rekod tebuk kehadiran pekerja dalam talian, menjadikan pengurusan kehadiran lebih cekap, mudah dan tepat.

1. Penyediaan projek
Sebelum bermula, kita perlu menyediakan persekitaran dan alatan pembangunan berikut:

• Persekitaran pembangunan PHP (seperti XAMPP)
• Penyunting teks (seperti Teks Sublime, Kod Visual Studio, dsb. )
• Pangkalan data MySQL
• Vue.js persekitaran pembangunan (anda boleh menggunakan Vue CLI)

2 Reka bentuk pangkalan data
Kami perlu mencipta pangkalan data MySQL untuk menyimpan maklumat pekerja dan rekod jam masuk. Reka pangkalan data bernama "pengurusan_kehadiran", yang mengandungi dua jadual: pekerja dan kehadiran. Jadual pekerja digunakan untuk menyimpan maklumat asas pekerja, termasuk medan: id (kunci utama penambahan automatik), nama (nama pekerja), jabatan (jabatan tempat mereka berada), dsb. Jadual kehadiran digunakan untuk menyimpan rekod kehadiran, termasuk medan: id (kunci utama kenaikan automatik), id_pekerja (id pekerja), masa_daftar_masuk (masa dalam masa), masa_daftar_keluar (masa jam), dsb.

3. Pembangunan bahagian belakang

1. Buat folder projek bernama "pengurusan_kehadiran".
2. Buat folder bernama "backend" di bawah folder projek untuk menyimpan kod berkaitan latar belakang.
3. Buat folder bernama "config" di bawah folder bahagian belakang untuk menyimpan fail konfigurasi.
4. Buat folder bernama "api" di bawah folder bahagian belakang untuk menyimpan kod berkaitan API.
5. Buat fail bernama "database.php" dalam folder konfigurasi untuk mengkonfigurasi maklumat sambungan pangkalan data.

kembali [

'host' => 'localhost',
'username' => 'root',
'password' => 'your_password',
'database' => 'attendance_management',

];
?>

6. Buat fail bernama "employees.php" di bawah folder api untuk mengendalikan permintaan API berkaitan pekerja.

memerlukan_sekali '../config/database.php';

Pekerja kelas {

private $conn;
private $table = 'employees';

public function __construct($db) {
    $this->conn = $db;
}

public function getEmployees() {
    $query = 'SELECT * FROM ' . $this->table;

    $stmt = $this->conn->prepare($query);
    $stmt->execute();

    return $stmt;
}

}
?>

7. Buat fail.php yang bernama" "kehadiran" fail , digunakan untuk mengendalikan permintaan API berkaitan kehadiran.

memerlukan_sekali '../config/database.php';

Kehadiran kelas {

private $conn;
private $table = 'attendance';

public function __construct($db) {
    $this->conn = $db;
}

public function getAttendanceByEmployeeId($employeeId) {
    $query = 'SELECT * FROM ' . $this->table . ' WHERE employee_id = ?';

    $stmt = $this->conn->prepare($query);
    $stmt->bindParam(1, $employeeId);
    $stmt->execute();

    return $stmt;
}

}
?>

4 folder projek , laksanakan arahan berikut untuk memasang Vue CLI (anda perlu memastikan bahawa Node.js dipasang):

1. npm install -g @vue/cli

Laksanakan arahan berikut dalam folder projek untuk mencipta Vue projek bernama "frontend":

2. vue create frontend

Masukkan folder frontend dan laksanakan arahan berikut untuk memasang Vue Router dan Axios:

3. cd frontend
npm install vue-router axios

file axios

"komponen dalam direktori frontend/src ", digunakan untuk menyimpan komponen Vue.

4. Buat fail bernama "Attendance.vue" di bawah folder komponen untuk memaparkan rekod kehadiran. . Tambah konfigurasi penghalaan.
5. import Vue dari 'vue';

import VueRouter daripada 'vue-router';

import Kehadiran daripada '../components/Attendance.vue';

Vue.use(VueRouter);

const laluan = [

<div>
    <h2>员工考勤记录</h2>
    <select v-model="selectedEmployee" @change="onEmployeeChange">
        <option v-for="employee in employees" :value="employee.id">{{ employee.name }}</option>
    </select>
    <table>
        <thead>
            <tr>
                <th>打卡时间</th>
                <th>下班打卡时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="record in attendance">
                <td>{{ record.check_in_time }}</td>
                <td>{{ record.check_out_time }}</td>
            </tr>
        </tbody>
    </table>
</div>

];

const router = VueRouter baharu({

data() {
    return {
        employees: [],
        selectedEmployee: null,
        attendance: []
    };
},
mounted() {
    this.getEmployees();
},
methods: {
    getEmployees() {
        axios.get('http://localhost/backend/api/employees.php')
            .then(response => {
                this.employees = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    },
    onEmployeeChange() {
        axios.get('http://localhost/backend/api/attendance.php?employeeId=' + this.selectedEmployee)
            .then(response => {
                this.attendance = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
}

});
6. eksport penghala lalai;

5 Jalankan projek

Mula-mula mulakan persekitaran pembangunan PHP (seperti sebagai contoh: sambungan pangkalan data adalah normal.

Buat fail bernama ".htaccess" dalam folder hujung belakang untuk mengkonfigurasi penulisan semula URL.

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php?/$1 [L]

Excute the following folder Perintah untuk menjalankan projek Vue:

npm run serve

Buka penyemak imbas dan lawati http://localhost:8080 untuk melihat antara muka rekod kehadiran pekerja.
1. Selepas memilih pekerja, halaman akan memanggil API bahagian belakang berdasarkan ID pekerja untuk mendapatkan rekod punch-in pekerja dan memaparkannya dalam jadual.

Melalui langkah pembangunan di atas, kami berjaya melaksanakan sistem pertanyaan rekod tebuk kehadiran pekerja dalam talian yang dibangunkan menggunakan PHP dan Vue. Pengguna boleh melihat rekod kehadiran mereka dengan memilih pekerja, yang bukan sahaja meningkatkan kecekapan pengurusan kehadiran tetapi juga mengurangkan berlakunya kesilapan manusia. Pada masa yang sama, projek ini juga menunjukkan kepada kita langkah-langkah asas dan perkara teknikal tentang cara menggabungkan PHP dan Vue untuk pembangunan timbunan penuh. Saya harap artikel ini membantu anda dan saya ucapkan selamat maju jaya dengan pengaturcaraan anda!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan pertanyaan rekod pukulan kehadiran pekerja dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!