cari
Rumahpembangunan bahagian belakangtutorial phpBagaimana untuk melaksanakan pembangunan PHP dan Vue fungsi kehadiran pekerja

Bagaimana untuk melaksanakan pembangunan PHP dan Vue fungsi kehadiran pekerja

Sep 25, 2023 am 11:37 AM
pembangunan php (php)Fungsi kehadiran pekerja (kehadiran)vue terbuka (vue)

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();
}
?>
  1. 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);
?>
  1. 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);
            });
        }
    }
});
  1. 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!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
PHP dan Python: Paradigma yang berbeza dijelaskanPHP dan Python: Paradigma yang berbeza dijelaskanApr 18, 2025 am 12:26 AM

PHP terutamanya pengaturcaraan prosedur, tetapi juga menyokong pengaturcaraan berorientasikan objek (OOP); Python menyokong pelbagai paradigma, termasuk pengaturcaraan OOP, fungsional dan prosedur. PHP sesuai untuk pembangunan web, dan Python sesuai untuk pelbagai aplikasi seperti analisis data dan pembelajaran mesin.

PHP dan Python: menyelam mendalam ke dalam sejarah merekaPHP dan Python: menyelam mendalam ke dalam sejarah merekaApr 18, 2025 am 12:25 AM

PHP berasal pada tahun 1994 dan dibangunkan oleh Rasmuslerdorf. Ia pada asalnya digunakan untuk mengesan pelawat laman web dan secara beransur-ansur berkembang menjadi bahasa skrip sisi pelayan dan digunakan secara meluas dalam pembangunan web. Python telah dibangunkan oleh Guidovan Rossum pada akhir 1980 -an dan pertama kali dikeluarkan pada tahun 1991. Ia menekankan kebolehbacaan dan kesederhanaan kod, dan sesuai untuk pengkomputeran saintifik, analisis data dan bidang lain.

Memilih antara php dan python: panduanMemilih antara php dan python: panduanApr 18, 2025 am 12:24 AM

PHP sesuai untuk pembangunan web dan prototaip pesat, dan Python sesuai untuk sains data dan pembelajaran mesin. 1.Php digunakan untuk pembangunan web dinamik, dengan sintaks mudah dan sesuai untuk pembangunan pesat. 2. Python mempunyai sintaks ringkas, sesuai untuk pelbagai bidang, dan mempunyai ekosistem perpustakaan yang kuat.

PHP dan Rangka Kerja: Memodenkan bahasaPHP dan Rangka Kerja: Memodenkan bahasaApr 18, 2025 am 12:14 AM

PHP tetap penting dalam proses pemodenan kerana ia menyokong sejumlah besar laman web dan aplikasi dan menyesuaikan diri dengan keperluan pembangunan melalui rangka kerja. 1.Php7 meningkatkan prestasi dan memperkenalkan ciri -ciri baru. 2. Rangka kerja moden seperti Laravel, Symfony dan CodeIgniter memudahkan pembangunan dan meningkatkan kualiti kod. 3. Pengoptimuman prestasi dan amalan terbaik terus meningkatkan kecekapan aplikasi.

Impak PHP: Pembangunan Web dan seterusnyaImpak PHP: Pembangunan Web dan seterusnyaApr 18, 2025 am 12:10 AM

Phphassignificantelympactedwebdevelopmentandextendsbeyondit.1) itpowersmajorplatformslikeworderpressandexcelsindatabaseIntions.2) php'SadaptabilityAldoStoScaleforlargeapplicationFrameworksLikelara.3)

Bagaimanakah jenis membayangkan jenis PHP, termasuk jenis skalar, jenis pulangan, jenis kesatuan, dan jenis yang boleh dibatalkan?Bagaimanakah jenis membayangkan jenis PHP, termasuk jenis skalar, jenis pulangan, jenis kesatuan, dan jenis yang boleh dibatalkan?Apr 17, 2025 am 12:25 AM

Jenis PHP meminta untuk meningkatkan kualiti kod dan kebolehbacaan. 1) Petua Jenis Skalar: Oleh kerana Php7.0, jenis data asas dibenarkan untuk ditentukan dalam parameter fungsi, seperti INT, Float, dan lain -lain. 2) Return Type Prompt: Pastikan konsistensi jenis nilai pulangan fungsi. 3) Jenis Kesatuan Prompt: Oleh kerana Php8.0, pelbagai jenis dibenarkan untuk ditentukan dalam parameter fungsi atau nilai pulangan. 4) Prompt jenis yang boleh dibatalkan: membolehkan untuk memasukkan nilai null dan mengendalikan fungsi yang boleh mengembalikan nilai null.

Bagaimanakah PHP mengendalikan pengklonan objek (kata kunci klon) dan kaedah sihir __clone?Bagaimanakah PHP mengendalikan pengklonan objek (kata kunci klon) dan kaedah sihir __clone?Apr 17, 2025 am 12:24 AM

Dalam PHP, gunakan kata kunci klon untuk membuat salinan objek dan menyesuaikan tingkah laku pengklonan melalui kaedah Magic \ _ _ _. 1. Gunakan kata kunci klon untuk membuat salinan cetek, mengkloning sifat objek tetapi bukan sifat objek. 2. Kaedah klon \ _ \ _ boleh menyalin objek bersarang untuk mengelakkan masalah menyalin cetek. 3. Beri perhatian untuk mengelakkan rujukan pekeliling dan masalah prestasi dalam pengklonan, dan mengoptimumkan operasi pengklonan untuk meningkatkan kecekapan.

PHP vs Python: Gunakan Kes dan AplikasiPHP vs Python: Gunakan Kes dan AplikasiApr 17, 2025 am 12:23 AM

PHP sesuai untuk pembangunan web dan sistem pengurusan kandungan, dan Python sesuai untuk sains data, pembelajaran mesin dan skrip automasi. 1.PHP berfungsi dengan baik dalam membina laman web dan aplikasi yang cepat dan berskala dan biasanya digunakan dalam CMS seperti WordPress. 2. Python telah melakukan yang luar biasa dalam bidang sains data dan pembelajaran mesin, dengan perpustakaan yang kaya seperti numpy dan tensorflow.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna