Cara menggunakan PHP dan Vue untuk mereka bentuk halaman pemantauan kehadiran pekerja dalam talian
1 dan pemformatan Dengan kemajuan pengurusan pejabat, banyak syarikat dan organisasi sedang giat melaksanakan kaedah pengurusan pejabat yang lebih cekap. Halaman pemantauan kehadiran pekerja dalam talian adalah sebahagian daripada pengurusan perniagaan moden. PHP dan Vue pada masa ini adalah teknologi pembangunan web yang digunakan secara meluas. Menggabungkan mereka boleh mereka bentuk halaman pemantauan kehadiran pekerja dalam talian dengan mudah.
Berikut ialah contoh kod mudah yang menunjukkan cara mereka bentuk halaman pemantauan kehadiran pekerja dalam talian dalam PHP dan Vue:
#🎜🎜 #
<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败：" . $conn->connect_error);
}
// 添加员工考勤记录
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$employee_id = $_POST["employee_id"];
$attendance_time = $_POST["attendance_time"];
$sql = "INSERT INTO attendance (employee_id, attendance_time) VALUES ('$employee_id', '$attendance_time')";
if ($conn->query($sql) === TRUE) {
echo "记录添加成功";
} else {
echo "记录添加失败：" . $conn->error;
}
}
// 查询员工考勤记录
if ($_SERVER["REQUEST_METHOD"] == "GET") {
$employee_id = $_GET["employee_id"];
$start_date = $_GET["start_date"];
$end_date = $_GET["end_date"];
$sql = "SELECT * FROM attendance WHERE employee_id = '$employee_id' AND attendance_time BETWEEN '$start_date' AND '$end_date'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "ID: " . $row["employee_id"]. " - 考勤时间: " . $row["attendance_time"]. "<br>";
}
} else {
echo "未查询到相关记录";
}
}
$conn->close();
?><!DOCTYPE html>
<html>
<head>
<title>员工考勤监控页面</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>员工考勤监控页面</h1>
<input type="text" v-model="employeeId" placeholder="员工ID">
<input type="text" v-model="startDate" placeholder="开始日期">
<input type="text" v-model="endDate" placeholder="结束日期">
<button @click="searchAttendance">搜索</button>
<hr>
<ul>
<li v-for="item in attendanceList">{{ item }}</li>
</ul>
<hr>
<input type="text" v-model="attendanceTime" placeholder="考勤时间">
<button @click="addAttendance">添加考勤记录</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
employeeId: '',
startDate: '',
endDate: '',
attendanceList: [],
attendanceTime: '',
},
methods: {
searchAttendance: function() {
// 发送GET请求查询员工考勤记录
this.attendanceList = []; // 清空列表
fetch('backend.php?employee_id=' + this.employeeId + '&start_date=' + this.startDate + '&end_date=' + this.endDate)
.then(response => response.text())
.then(data => {
if (data == "未查询到相关记录") {
alert(data);
} else {
this.attendanceList = data.split("<br>");
}
});
},
addAttendance: function() {
// 发送POST请求添加员工考勤记录
fetch('backend.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'employee_id=' + this.employeeId + '&attendance_time=' + this.attendanceTime,
})
.then(response => response.text())
.then(data => {
alert(data);
});
}
}
});
</script>
</body>
</html>#🎜 #Contoh kod di atas menunjukkan proses reka bentuk halaman pemantauan kehadiran pekerja dalam talian yang mudah. Melalui gabungan PHP dan Vue, kami boleh melaksanakan fungsi menambah, menyoal dan memaparkan rekod kehadiran pekerja dengan mudah. Sudah tentu, pengembangan dan pengoptimuman yang lebih berfungsi mungkin diperlukan dalam projek sebenar, tetapi idea dan kaedah asas adalah sama.
Atas ialah kandungan terperinci Cara mereka bentuk halaman pemantauan kehadiran pekerja dalam talian menggunakan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
