Cara menggunakan PHP dan Vue untuk membina panel pengurusan kehadiran pekerja-tutorial php-php.cn

Cara menggunakan PHP dan Vue untuk membina panel pengurusan kehadiran pekerja

PHPz

Lepaskan： 2023-09-27 09:08:02

asal

817 orang telah melayarinya

Cara menggunakan PHP dan Vue untuk membina panel pengurusan kehadiran pekerja

Dengan pengembangan skala perusahaan, pengurusan pekerja dan penyeliaan kehadiran telah menjadi aspek penting dalam kerja harian. Untuk meningkatkan kecekapan kerja dan mengurangkan kos buruh, banyak syarikat memilih untuk menggunakan teknologi komputer untuk menguruskan rekod kehadiran pekerja. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membina panel pengurusan kehadiran pekerja yang mudah dan berkesan.

1. Persediaan

Sebelum mula membina panel pengurusan kehadiran pekerja, kita perlu memastikan bahawa kita mempunyai persediaan berikut:

Persekitaran pelayan: Pastikan PHP dan MySQL telah dipasang pada pelayan.
Persekitaran pembangunan: Adalah disyorkan untuk menggunakan persekitaran pembangunan bersepadu (IDE) seperti xampp, wamp, dsb., yang boleh memudahkan penulisan kod dan penyahpepijatan.
Rangka kerja bahagian hadapan: Kami memilih untuk menggunakan Vue sebagai rangka kerja bahagian hadapan kerana ia mudah digunakan dan mempunyai fungsi yang kaya.
Pangkalan Data: Kami akan menggunakan MySQL sebagai pangkalan data untuk menyimpan rekod kehadiran pekerja.

2. Cipta pangkalan data dan struktur jadual

Buat pangkalan data bernama "kehadiran" dalam MySQL dan buat struktur jadual berikut:

Jadual pekerja (pekerja):

CREATE TABLE employees (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  department VARCHAR(255) NOT NULL
);

Salin selepas log masuk

Jadual rekod kehadiran (rekod_kehadiran

3) . Pembangunan back-end

Dalam PHP, kita perlu menggunakan sambungan seperti mysqli atau PDO untuk menyambung ke pangkalan data. Berikut ialah contoh kod untuk menyambung ke pangkalan data MySQL:

CREATE TABLE attendance_records (
  id INT AUTO_INCREMENT PRIMARY KEY,
  employee_id INT NOT NULL,
  date DATE NOT NULL,
  time_in TIME NOT NULL,
  time_out TIME,
  FOREIGN KEY (employee_id) REFERENCES employees(id)
);

Salin selepas log masuk

Kami perlu mencipta banyak antara muka API untuk mengendalikan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan pekerja dan rekod kehadiran. Berikut ialah kod sampel untuk mendapatkan senarai pekerja:

<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "attendance";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}
?>

Salin selepas log masuk

Dengan cara yang sama, kami boleh mencipta antara muka API lain untuk mengendalikan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan pekerja dan rekod kehadiran.

4. Pembangunan bahagian hadapan

Jalankan arahan berikut pada baris arahan untuk mencipta projek Vue:

<?php
// 获取员工列表
$sql = "SELECT * FROM employees";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $employees = array();

    while($row = $result->fetch_assoc()) {
        $employees[] = $row;
    }

    // 将结果转成JSON格式
    echo json_encode($employees);
} else {
    echo "暂无员工";
}
?>

Salin selepas log masuk

Pilih konfigurasi lalai mengikut gesaan.

Gunakan Penghala Vue untuk mencipta laluan dan pandangan untuk memaparkan senarai pekerja, rekod kehadiran, dsb.

Gunakan axios atau perpustakaan Ajax lain untuk memulakan permintaan HTTP untuk mendapatkan data back-end. Berikut ialah kod sampel yang memperoleh senarai pekerja dan memaparkannya pada halaman:

vue create attendance-management-panel

Salin selepas log masuk

Seperti yang diperlukan, komponen lain boleh dibuat untuk melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan pertanyaan rekod kehadiran pekerja.

5. Deployment and Testing

Bungkus kod bahagian hadapan dan masukkannya ke dalam direktori web pelayan, dan muat naik kod bahagian belakang ke pelayan. Pastikan PHP dan MySQL dikonfigurasikan dengan betul pada pelayan.

Anda boleh menguji fungsi panel pengurusan kehadiran pekerja dengan mengakses laman web melalui pelayar anda.

Kesimpulan

Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk membina panel pengurusan kehadiran pekerja, dan menyediakan contoh kod yang berkaitan. Sudah tentu, ini hanyalah contoh mudah, dan aplikasi sebenar perlu diselaraskan dan dikembangkan mengikut keperluan khusus. Tetapi saya percaya bahawa melalui contoh ini, anda sudah mempunyai pemahaman tertentu tentang cara menggunakan PHP dan Vue untuk membina panel pengurusan kehadiran pekerja. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membina panel pengurusan kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!