Bagaimana untuk membangunkan aplikasi kehadiran pekerja dalam talian dengan PHP dan Vue

Cara membangunkan aplikasi kehadiran pekerja dalam talian dengan PHP dan Vue

Abstrak: Dengan perkembangan pesat teknologi, semakin banyak syarikat Memilih untuk alihkan sistem kehadiran pekerja anda ke platform dalam talian. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue, dua teknologi pembangunan popular, untuk membangunkan aplikasi kehadiran pekerja dalam talian. Kami akan memberikan contoh kod khusus untuk membantu pembaca memahami dan menggunakan dengan lebih baik.

1. Tetapan Persekitaran

Sebelum anda bermula, sila pastikan persekitaran pembangunan anda telah disediakan dengan betul. Anda perlu memasang persekitaran pembangunan untuk PHP dan Vue, seperti XAMPP (untuk pengguna Windows) atau MAMP (untuk pengguna Mac). Pada masa yang sama, anda juga memerlukan pelayan pangkalan data untuk menyimpan data kehadiran pekerja, seperti MySQL.

2. Buat pangkalan data

Gunakan alat pentadbir MySQL (seperti phpMyAdmin) untuk mencipta pangkalan data baharu untuk menyimpan data kehadiran pekerja. Cipta pangkalan data bernama "kehadiran", kemudian buat jadual bernama "pekerja" untuk menyimpan maklumat pekerja, dan jadual bernama "kehadiran" untuk menyimpan rekod kehadiran pekerja. Berikut ialah contoh kod SQL untuk mencipta dua jadual ini:

Buat jadual pekerja:

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

Buat jadual kehadiran:

CREATE TABLE attendances (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    employee_id INT(11) NOT NULL,
    check_in DATETIME NOT NULL,
    check_out DATETIME,
    FOREIGN KEY (employee_id) REFERENCES employees(id)
);

#🎜 🎜# Pembangunan Bahagian Belakang - PHP

Pertama, kita perlu mencipta fail PHP untuk mengendalikan logik bahagian belakang. Kita boleh menamakan fail ini "api.php". Dalam fail ini, kami akan menulis kod untuk interaksi data dengan aplikasi Vue bahagian hadapan melalui API. Berikut ialah contoh mudah:

<?php

header('Content-Type: application/json');

// 连接到数据库
$dsn = 'mysql:host=localhost;dbname=attendance';
$username = 'root';
$password = '';

try {
    $db = new PDO($dsn, $username, $password);
} catch (PDOException $e) {
    echo '数据库连接失败: ' . $e->getMessage();
    exit();
}

// 获取所有员工信息
function getEmployees() {
    global $db;
    
    $stmt = $db->prepare('SELECT * FROM employees');
    $stmt->execute();
    
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

// 添加新的考勤记录
function addAttendance($employeeId, $checkIn) {
    global $db;
    
    $stmt = $db->prepare('INSERT INTO attendances(employee_id, check_in) VALUES(?, ?)');
    $stmt->execute([$employeeId, $checkIn]);
    
    return $db->lastInsertId();
}

// 更新考勤记录
function updateAttendance($attendanceId, $checkOut) {
    global $db;
    
    $stmt = $db->prepare('UPDATE attendances SET check_out = ? WHERE id = ?');
    $stmt->execute([$checkOut, $attendanceId]);
    
    return $stmt->rowCount();
}

// 获取指定员工的考勤记录
function getAttendances($employeeId) {
    global $db;
    
    $stmt = $db->prepare('SELECT * FROM attendances WHERE employee_id = ?');
    $stmt->execute([$employeeId]);
    
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

// 根据传入的API请求参数调用相应的函数
if (isset($_GET['action'])) {
    $action = $_GET['action'];
    if ($action === 'getEmployees') {
        echo json_encode(getEmployees());
    } else if ($action === 'addAttendance') {
        $employeeId = $_POST['employeeId'];
        $checkIn = $_POST['checkIn'];
        
        echo json_encode(['id' => addAttendance($employeeId, $checkIn)]);
    } else if ($action === 'updateAttendance') {
        $attendanceId = $_POST['attendanceId'];
        $checkOut = $_POST['checkOut'];
        
        echo json_encode(['rowsAffected' => updateAttendance($attendanceId, $checkOut)]);
    } else if ($action === 'getAttendances') {
        $employeeId = $_GET['employeeId'];
        
        echo json_encode(getAttendances($employeeId));
    }
}

Dalam fail PHP ini, kami mula-mula menyambung ke pangkalan data dan mentakrifkan beberapa fungsi untuk mengendalikan pelbagai permintaan API. Logik khusus termasuk mendapatkan maklumat pekerja, menambah/mengemas kini rekod kehadiran, dan mendapatkan rekod kehadiran pekerja tertentu.

Di sini, kami hanya menyediakan beberapa contoh fungsi asas, yang boleh anda panjangkan dan ubah suai mengikut keperluan sebenar anda.

Pembangunan bahagian hadapan - Vue

Seterusnya, kami akan menggunakan Vue untuk membangunkan aplikasi bahagian hadapan. Kita perlu mencipta contoh Vue untuk membuat dan mengurus antara muka dan logik aplikasi. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
  <title>员工考勤应用程序</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1 id="员工列表">员工列表</h1>
    <ul>
      <li v-for="employee in employees" :key="employee.id">
        {{ employee.name }} - {{ employee.department }}
        <button @click="addAttendance(employee.id)">签到</button>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
        el: "#app",
        data: {
            employees: []
        },
        mounted() {
            this.getEmployees();
        },
        methods: {
            getEmployees() {
                fetch('api.php?action=getEmployees')
                    .then(response => response.json())
                    .then(data => {
                        this.employees = data;
                    });
            },
            addAttendance(employeeId) {
                fetch('api.php?action=addAttendance', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        employeeId: employeeId,
                        checkIn: new Date().toISOString()
                    })
                })
                .then(response => response.json())
                .then(data => {
                    alert(`签到成功，考勤ID: ${data.id}`);
                });
            }
        }
    });
  </script>
</body>
</html>

Dalam contoh ini, kami mula-mula memperkenalkan fail JavaScript Vue. Kemudian, kami mencipta contoh Vue, menentukan senarai pekerja dan dua kaedah untuk mendapatkan maklumat pekerja dan menambah rekod kehadiran. Apabila halaman dimuatkan, tika Vue akan secara automatik memanggil kaedah yang dipasang untuk mendapatkan maklumat pekerja dan mengikatnya pada harta pekerja. Dalam senarai, kami menggunakan arahan v-for untuk melingkari setiap pekerja dan menambah butang daftar masuk untuk setiap pekerja. Apabila pengguna mengklik butang log masuk, kaedah addAttendance akan dicetuskan untuk memulakan permintaan untuk menambah rekod kehadiran pada bahagian belakang dan gesaan log masuk yang berjaya akan dipaparkan selepas kejayaan.

Perlu diambil perhatian bahawa permintaan API dalam contoh ini menggunakan fungsi ambil untuk memulakan permintaan tak segerak Anda juga boleh menggunakan perpustakaan lain yang serupa, seperti axios.

Kesimpulan

Dengan menggunakan PHP dan Vue untuk membangunkan aplikasi kehadiran pekerja dalam talian, kami boleh melaksanakan sistem kehadiran pekerja yang mudah dan praktikal. Dalam artikel ini, kami menyediakan contoh kod khusus untuk membantu pembaca memahami proses penyimpanan dan interaksi data. Sudah tentu, ini hanyalah rangka kerja asas, dan anda boleh melanjutkan dan mengubah suainya mengikut keperluan dan keadaan sebenar anda. Saya harap artikel ini akan membantu anda memahami cara menggunakan PHP dan Vue untuk membangunkan aplikasi kehadiran pekerja dalam talian.

Atas ialah kandungan terperinci Bagaimana untuk membangunkan aplikasi kehadiran pekerja dalam talian dengan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!