Cara menggunakan PHP dan Vue untuk membina antara muka visualisasi data untuk kehadiran pekerja-tutorial php-php.cn

Cara menggunakan PHP dan Vue untuk membina antara muka visualisasi data untuk kehadiran pekerja

WBOY

Lepaskan： 2023-09-26 13:50:01

asal

743 orang telah melayarinya

Cara menggunakan PHP dan Vue untuk membina antara muka visualisasi data untuk kehadiran pekerja

Pengenalan:
Dalam pengurusan perusahaan moden, kehadiran pekerja merupakan pautan yang sangat penting. Untuk meningkatkan kecekapan pengurusan dan memantau kehadiran pekerja, banyak syarikat telah menggunakan sistem kehadiran automatik. Artikel ini akan menggunakan rangka kerja PHP dan Vue untuk membina antara muka visualisasi data untuk kehadiran pekerja bagi membantu syarikat memantau dan menganalisis data kehadiran pekerja dengan lebih baik.

1. Pengumpulan dan penyimpanan data
Pertama, kita perlu mengumpul data kehadiran pekerja dan menyimpannya dalam pangkalan data. Data kehadiran termasuk nama pekerja, masa masuk, status kehadiran dan maklumat lain.

Dalam PHP, anda boleh menggunakan pangkalan data MySQL untuk penyimpanan. Pertama, kita perlu mencipta pangkalan data bernama "kehadiran", dan kemudian mencipta jadual bernama "pekerja" dengan medan: id, nama, masa dan status.

Berikut ialah contoh kod yang sepadan:

// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "attendance";

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

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

// 创建员工表格
$sql = "CREATE TABLE employee (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(30) NOT NULL,
    time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    status ENUM('迟到', '早退', '请假', '正常') NOT NULL
)";

if ($conn->query($sql) === TRUE) {
    echo "表格已创建成功";
} else {
    echo "创建表格失败: " . $conn->error;
}

$conn->close();

Salin selepas log masuk

2 Bina antara muka visualisasi data
Seterusnya, kami menggunakan rangka kerja Vue untuk membina antara muka visualisasi data supaya syarikat dapat melihat status kehadiran pekerja secara visual.

Bahagian hadapan
Di bahagian hadapan, kami menggunakan komponen Vue untuk menentukan antara muka visualisasi data untuk kehadiran pekerja. Pertama, kita perlu memperkenalkan perpustakaan Vue dan Axios (digunakan untuk menghantar permintaan HTTP) dan mencipta contoh Vue.

Berikut ialah contoh kod yang sepadan:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>员工考勤数据可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>员工考勤数据可视化</h1>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>打卡时间</th>
                    <th>考勤状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="employee in employees" :key="employee.id">
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.time }}</td>
                    <td>{{ employee.status }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                employees: []
            },
            mounted() {
                this.fetchEmployees();
            },
            methods: {
                fetchEmployees() {
                    axios.get('api.php')
                        .then(response => {
                            this.employees = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

Salin selepas log masuk

Bahagian belakang
Di bahagian belakang, kita perlu menggunakan PHP untuk menulis API untuk mendapatkan data kehadiran pekerja daripada pangkalan data dan mengembalikannya ke bahagian hadapan.

Berikut ialah contoh kod yang sepadan:

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "attendance";

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

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

$sql = "SELECT * FROM employee";
$result = $conn->query($sql);

$employees = array();

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

echo json_encode($employees);

$conn->close();
?>

Salin selepas log masuk

3 Paparan keputusan
Melalui langkah di atas, kami berjaya membina antara muka visualisasi data untuk kehadiran pekerja. Apabila mengakses halaman, bahagian hadapan menghantar permintaan HTTP untuk mendapatkan data kehadiran pekerja yang dikembalikan oleh bahagian belakang dan memaparkannya dalam jadual.

Melalui antara muka ini, pengurus perusahaan secara intuitif boleh memahami status kehadiran setiap pekerja, menemui dan mengendalikan keabnormalan kehadiran tepat pada masanya dan meningkatkan kecekapan pengurusan.

Kesimpulan:
Dengan menggunakan gabungan PHP dan Vue, kami melaksanakan antara muka visualisasi data kehadiran pekerja yang mudah. Sudah tentu, ini hanyalah contoh asas, dan anda boleh mengembangkan dan mengoptimumkannya mengikut situasi sebenar untuk memenuhi keperluan anda sendiri.

Saya harap artikel ini akan membantu anda dalam membina antara muka visualisasi data kehadiran pekerja!

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