Cara menjana modul pengiraan gaji kehadiran pekerja melalui PHP dan Vue-tutorial php-php.cn

Cara menjana modul pengiraan gaji kehadiran pekerja melalui PHP dan Vue

WBOY

Lepaskan： 2023-09-25 09:30:02

asal

614 orang telah melayarinya

Cara menjana modul pengiraan gaji kehadiran pekerja melalui PHP dan Vue

Ikhtisar:
Dalam setiap perusahaan, kehadiran pekerja dan pengiraan gaji adalah tugas yang sangat penting. Untuk memudahkan dan mengautomasikan proses ini, kami boleh menggunakan PHP dan Vue.js untuk mencipta modul pengiraan gaji untuk kehadiran pekerja. Artikel ini akan memperkenalkan cara menggunakan kedua-dua alatan ini untuk mencapai fungsi ini dan memberikan contoh kod khusus.

Langkah 1: Buat pangkalan data
Pertama, kita perlu mencipta pangkalan data untuk menyimpan rekod kehadiran dan maklumat gaji pekerja. Pangkalan data boleh dibuat dan diurus menggunakan MySQL atau sistem pengurusan pangkalan data lain. Berikut adalah contoh jadual pekerja mudah dan jadual rekod kehadiran:

Jadual pekerja (pekerja):

id: ID pekerja
nama (nama): nama pekerja
Gaji (gaji): gaji pekerja

Jadual rekod kehadiran (kehadiran):

id: Rekod ID
ID Pekerja (employee_id): ID Pekerja
Tarikh (tarikh): Tarikh kehadiran
Masa bekerja (mula_masa

Langkah 2: Buat API bahagian belakang

Gunakan PHP untuk melaksanakan API bahagian belakang dan menyediakan interaksi dengan pangkalan data. Berikut ialah contoh kod untuk mendapatkan rekod kehadiran pekerja:

<?php
// 数据库连接信息
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

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

// 获取员工考勤记录
$sql = "SELECT * FROM attendance";
$result = $conn->query($sql);

// 将结果转化为JSON格式并输出
$res = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $res[] = $row;
    }
}
echo json_encode($res);

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

Salin selepas log masuk

Langkah 3: Buat halaman hadapan

Gunakan Vue.js untuk mencipta halaman hadapan untuk memaparkan rekod kehadiran pekerja dan mengira gaji. Berikut ialah contoh kod untuk halaman rekod kehadiran pekerja yang ringkas:

<html>
<head>
    <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>ID</th>
                    <th>姓名</th>
                    <th>日期</th>
                    <th>上班时间</th>
                    <th>下班时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="record in attendanceRecords">
                    <td>{{ record.id }}</td>
                    <td>{{ record.name }}</td>
                    <td>{{ record.date }}</td>
                    <td>{{ record.start_time }}</td>
                    <td>{{ record.end_time }}</td>
                </tr>
            </tbody>
        </table>
        <button @click="calculateSalary">计算薪资</button>
        <div v-if="calculateSalaryResult">
            <p>薪资：{{ calculateSalaryResult }}</p>
        </div>
    </div>
    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                attendanceRecords: [],
                calculateSalaryResult: null
            },
            mounted() {
                // 获取员工考勤记录
                axios.get('api.php')
                    .then(response => {
                        this.attendanceRecords = response.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            methods: {
                calculateSalary() {
                    // 计算薪资的逻辑在这里实现
                    // 可以从this.attendanceRecords中获取考勤记录，并进行相应的计算
                    // 最后将计算结果赋值给this.calculateSalaryResult
                }
            }
        });
    </script>
</body>
</html>

Salin selepas log masuk

Seperti yang dapat dilihat daripada contoh kod di atas, Vue.js digunakan untuk membuat dan memaparkan data, manakala PHP digunakan untuk menyediakan antara muka bahagian belakang bagi data tersebut. Dalam halaman tersebut, kami menggunakan pustaka axios untuk menghantar permintaan HTTP untuk mendapatkan data bahagian belakang dan menyimpan hasil tindak balas kepada atribut data tika Vue. Akhirnya, kami mencetuskan logik pengiraan gaji melalui acara klik butang.

Ringkasan:

Dengan PHP dan Vue.js kami boleh mencipta modul pengiraan gaji untuk kehadiran pekerja dengan mudah. Menggunakan API bahagian belakang PHP untuk berinteraksi dengan pangkalan data, dan kemudian menggunakan rangka kerja bahagian hadapan Vue.js untuk memaparkan data dan melaksanakan logik pengiraan boleh memudahkan proses kehadiran dan pengiraan gaji. Contoh kod yang disediakan di atas hanyalah demonstrasi mudah Dalam projek sebenar, pelaksanaan yang lebih terperinci dan pengembangan fungsi diperlukan berdasarkan keperluan khusus.

Atas ialah kandungan terperinci Cara menjana modul pengiraan gaji kehadiran pekerja melalui PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!