Bagaimana untuk melaksanakan pembangunan PHP dan Vue fungsi kehadiran pekerja

Cara melaksanakan pembangunan PHP dan Vue fungsi kehadiran pekerja

Dengan pengembangan skala perusahaan dan kerumitan operasi dan pengurusan, pengurusan kehadiran pekerja telah menjadi tugas penting yang tidak boleh diabaikan oleh setiap perusahaan. Untuk menguruskan kehadiran pekerja dengan mudah dan cekap, banyak syarikat memilih untuk menggunakan PHP dan Vue untuk pembangunan. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi kehadiran pekerja dan menyediakan contoh kod khusus.

1. Penyediaan projek
Sebelum memulakan pembangunan, anda perlu menyediakan persekitaran pembangunan terlebih dahulu. Pastikan anda telah memasang PHP, Vue dan sambungan atau kebergantungan yang berkaitan.

2. Reka bentuk pangkalan data
Inti sistem kehadiran ialah perekodan dan pengurusan maklumat kehadiran pekerja. Dalam pangkalan data, jadual pekerja dan jadual kehadiran perlu direka bentuk.
Jadual pekerja boleh memasukkan maklumat asas seperti ID pekerja, nama, jawatan, dsb. Helaian kehadiran boleh merangkumi maklumat rekod kehadiran seperti ID kehadiran, ID pekerja, tarikh, masa bekerja dan waktu tidak bekerja.

3. Pembangunan bahagian belakang

1. Menyambung ke pangkalan data
   Dalam PHP, anda boleh menggunakan sambungan seperti PDO atau mysqli untuk menyambung ke pangkalan data. Berikut ialah contoh kod yang menggunakan PDO untuk menyambung ke pangkalan data MySQL:

<?php
$host = 'localhost';
$dbname = 'your_database_name';
$username = 'your_username';
$password = 'your_password';

try {
    $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Connected successfully"; 
}
catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}
?>

2. Menyiasat maklumat kehadiran pekerja
   Kami boleh menggunakan penyata SQL untuk menanyakan maklumat kehadiran pekerja. Berikut ialah contoh kod untuk menanyakan maklumat kehadiran pekerja:

<?php
$employeeId = $_POST['employeeId'];

$stmt = $conn->prepare("SELECT * FROM 考勤表 WHERE 员工ID = :employeeId");
$stmt->bindParam(':employeeId', $employeeId);
$stmt->execute();

$result = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($result);
?>

3. Tambah rekod kehadiran pekerja
   Apabila pekerja pergi bekerja atau keluar kerja, kita boleh merekodkan kehadiran pekerja dengan memasukkan rekod kehadiran. Berikut ialah contoh kod untuk memasukkan rekod kehadiran pekerja:

<?php
$employeeId = $_POST['employeeId'];
$date = $_POST['date'];
$startTime = $_POST['startTime'];
$endTime = $_POST['endTime'];

$stmt = $conn->prepare("INSERT INTO 考勤表 (员工ID, 日期, 上班时间, 下班时间) VALUES (:employeeId, :date, :startTime, :endTime)");
$stmt->bindParam(':employeeId', $employeeId);
$stmt->bindParam(':date', $date);
$stmt->bindParam(':startTime', $startTime);
$stmt->bindParam(':endTime', $endTime);
$stmt->execute();

echo "Record inserted successfully";
?>

4. Pembangunan bahagian hadapan

1. Cipta contoh Vue
   Dalam Vue, kita boleh menggunakan modul asas Vue untuk mencipta tika Vue. Berikut ialah kod contoh mudah untuk membuat contoh Vue:

new Vue({
    el: '#app',
    data: {
        employeeId: '',
        date: '',
        startTime: '',
        endTime: '',
        attendanceList: []
    },
    methods: {
        getAttendanceList() {
            // 发送Ajax请求，获取考勤列表数据
            axios.post('getAttendanceList.php', {
                employeeId: this.employeeId
            })
            .then((response) => {
                this.attendanceList = response.data;
            })
            .catch((error) => {
                console.log(error);
            });
        },
        addAttendance() {
            // 发送Ajax请求，添加员工考勤记录
            axios.post('addAttendance.php', {
                employeeId: this.employeeId,
                date: this.date,
                startTime: this.startTime,
                endTime: this.endTime
            })
            .then((response) => {
                console.log(response.data);
            })
            .catch((error) => {
                console.log(error);
            });
        }
    }
});

2. Membina halaman hadapan
   Dalam HTML, kami boleh menggunakan fungsi pengikatan data Vue untuk memaparkan senarai kehadiran pekerja secara dinamik dan memproses penyerahan rekod kehadiran pekerja. Berikut ialah contoh halaman muka hadapan yang mudah:

   <div id="app">
    <h1 id="员工考勤管理系统">员工考勤管理系统</h1>
    <div>
        <label for="employeeId">员工ID：</label>
        <input type="text" v-model="employeeId">
        <button @click="getAttendanceList">查询考勤列表</button>
    </div>
    <table>
        <tr>
            <th>日期</th>
            <th>上班时间</th>
            <th>下班时间</th>
        </tr>
        <tr v-for="attendance in attendanceList">
            <td>{{ attendance.日期 }}</td>
            <td>{{ attendance.上班时间 }}</td>
            <td>{{ attendance.下班时间 }}</td>
        </tr>
    </table>
    <div>
        <label for="date">日期：</label>
        <input type="text" v-model="date">
        <label for="startTime">上班时间：</label>
        <input type="text" v-model="startTime">
        <label for="endTime">下班时间：</label>
        <input type="text" v-model="endTime">
        <button @click="addAttendance">提交考勤记录</button>
    </div>
   </div>

   Di atas ialah contoh cara menggunakan PHP dan Vue untuk membangunkan fungsi kehadiran pekerja. Melalui reka bentuk pangkalan data yang munasabah dan logik pemprosesan latar belakang, digabungkan dengan antara muka interaktif bahagian hadapan yang mesra, kami boleh dengan cepat melaksanakan sistem kehadiran pekerja yang mudah dan cekap. Pembangun boleh mengoptimumkan dan mengembangkan lagi berdasarkan keperluan khusus. Semoga artikel ini dapat membantu anda.

   Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pembangunan PHP dan Vue fungsi kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!