Cara menggunakan PHP dan Vue untuk membangunkan pertanyaan rekod punch-in dalam talian untuk kehadiran pekerja
Dalam perusahaan moden, pengurusan kehadiran pekerja adalah tugas yang sangat penting. Rekod manual tradisional mudah ralat dan menyusahkan untuk pertanyaan dan statistik. Dengan fungsi PHP dan Vue yang berkuasa, kami boleh membangunkan sistem pertanyaan rekod tebuk kehadiran pekerja dalam talian, menjadikan pengurusan kehadiran lebih cekap, mudah dan tepat.
1. Penyediaan projek
Sebelum bermula, kita perlu menyediakan persekitaran dan alatan pembangunan berikut:
2 Reka bentuk pangkalan data
Kami perlu mencipta pangkalan data MySQL untuk menyimpan maklumat pekerja dan rekod jam masuk. Reka pangkalan data bernama "pengurusan_kehadiran", yang mengandungi dua jadual: pekerja dan kehadiran. Jadual pekerja digunakan untuk menyimpan maklumat asas pekerja, termasuk medan: id (kunci utama penambahan automatik), nama (nama pekerja), jabatan (jabatan tempat mereka berada), dsb. Jadual kehadiran digunakan untuk menyimpan rekod kehadiran, termasuk medan: id (kunci utama kenaikan automatik), id_pekerja (id pekerja), masa_daftar_masuk (masa dalam masa), masa_daftar_keluar (masa jam), dsb.
3. Pembangunan bahagian belakang
kembali [
'host' => 'localhost', 'username' => 'root', 'password' => 'your_password', 'database' => 'attendance_management',
];
?>
memerlukan_sekali '../config/database.php';
Pekerja kelas {
private $conn; private $table = 'employees'; public function __construct($db) { $this->conn = $db; } public function getEmployees() { $query = 'SELECT * FROM ' . $this->table; $stmt = $this->conn->prepare($query); $stmt->execute(); return $stmt; }
}
?>
memerlukan_sekali '../config/database.php';
Kehadiran kelas {
private $conn; private $table = 'attendance'; public function __construct($db) { $this->conn = $db; } public function getAttendanceByEmployeeId($employeeId) { $query = 'SELECT * FROM ' . $this->table . ' WHERE employee_id = ?'; $stmt = $this->conn->prepare($query); $stmt->bindParam(1, $employeeId); $stmt->execute(); return $stmt; }
}
?>
4 folder projek , laksanakan arahan berikut untuk memasang Vue CLI (anda perlu memastikan bahawa Node.js dipasang):
Laksanakan arahan berikut dalam folder projek untuk mencipta Vue projek bernama "frontend":
Masukkan folder frontend dan laksanakan arahan berikut untuk memasang Vue Router dan Axios:
file axios
import Kehadiran daripada '../components/Attendance.vue';
Vue.use(VueRouter);
const laluan = [
<div> <h2>员工考勤记录</h2> <select v-model="selectedEmployee" @change="onEmployeeChange"> <option v-for="employee in employees" :value="employee.id">{{ employee.name }}</option> </select> <table> <thead> <tr> <th>打卡时间</th> <th>下班打卡时间</th> </tr> </thead> <tbody> <tr v-for="record in attendance"> <td>{{ record.check_in_time }}</td> <td>{{ record.check_out_time }}</td> </tr> </tbody> </table> </div>
const router = VueRouter baharu({
data() { return { employees: [], selectedEmployee: null, attendance: [] }; }, mounted() { this.getEmployees(); }, methods: { getEmployees() { axios.get('http://localhost/backend/api/employees.php') .then(response => { this.employees = response.data; }) .catch(error => { console.log(error); }); }, onEmployeeChange() { axios.get('http://localhost/backend/api/attendance.php?employeeId=' + this.selectedEmployee) .then(response => { this.attendance = response.data; }) .catch(error => { console.log(error); }); } }
5 Jalankan projek
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]Excute the following folder Perintah untuk menjalankan projek Vue:
npm run serveAtas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan pertanyaan rekod pukulan kehadiran pekerja dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!