Rumah >pembangunan bahagian belakang >tutorial php >Cara menggunakan PHP dan Vue untuk mereka bentuk paparan carta statistik sistem kehadiran pekerja
Cara menggunakan PHP dan Vue untuk mereka bentuk paparan carta statistik sistem kehadiran pekerja
- WBOYasal
- 2023-09-24 09:39:201491semak imbas
Cara menggunakan PHP dan Vue untuk mereka bentuk paparan carta statistik sistem kehadiran pekerja
Dalam beberapa tahun kebelakangan ini, dengan perkembangan teknologi yang berterusan, perusahaan mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk pengurusan kehadiran pekerja. Untuk mengira dan memaparkan data kehadiran pekerja dengan lebih baik, adalah sangat penting untuk mereka bentuk sistem kehadiran pekerja dan mencapai paparan visual data.
Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk mereka bentuk sistem kehadiran pekerja dan memaparkan carta statistik.
1. Reka bentuk sistem
Pertama, kita perlu mereka bentuk pangkalan data untuk menyimpan data kehadiran pekerja. Data kehadiran termasuk nama pekerja, tarikh kehadiran, masa bekerja, waktu tidak bekerja dan maklumat lain. Anda boleh menggunakan MySQL atau pangkalan data hubungan lain untuk mencipta pangkalan data dan mereka bentuk struktur jadual yang sepadan.
2. Pembangunan bahagian belakang
Gunakan PHP untuk melaksanakan logik bahagian belakang sistem. Kita perlu mencipta beberapa fail PHP untuk mengendalikan permintaan dari bahagian hadapan dan berinteraksi dengan pangkalan data.
Mula-mula, buat fail antara muka untuk mengendalikan permintaan bahagian hadapan, seperti api.php. Dalam fail ini, anda boleh menentukan beberapa fungsi antara muka untuk mengendalikan operasi penambahan, pemadaman, pengubahsuaian dan pertanyaan data kehadiran pekerja. api.php。在该文件中，可以定义一些接口函数来处理员工考勤数据的增删改查操作。
<?php
// 连接数据库
$conn = new mysqli('localhost', 'username', 'password', 'database');
// 设定字符集
$conn->set_charset('utf8');
// 增加员工考勤数据
function addAttendance($name, $date, $start, $end) {
global $conn;
// 执行插入操作
$sql = "INSERT INTO attendance (name, date, start, end) VALUES ('$name', '$date', '$start', '$end')";
$conn->query($sql);
// 返回结果
return ['status' => 'success'];
}
// 获取员工考勤数据
function getAttendance($name, $date) {
global $conn;
// 执行查询操作
$sql = "SELECT * FROM attendance WHERE name = '$name' AND date = '$date'";
$result = $conn->query($sql);
// 返回结果
return ['status' => 'success', 'data' => $result->fetch_assoc()];
}
// ...其他接口函数，比如更新和删除员工考勤数据的函数
?>接下来，我们需要创建一个用于与前端页面交互的文件，比如index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>员工考勤系统</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue/dist/vue.css">
</head>
<body>
<div id="app">
<!-- 前端页面内容 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
// 前端页面逻辑
});
</script>
</body>
</html>Seterusnya, kita perlu mencipta fail untuk berinteraksi dengan halaman hadapan, seperti index.php. Dalam fail ini, kami boleh menggunakan Vue untuk mengendalikan paparan halaman hadapan dan interaksi pengguna. Mula-mula, perkenalkan fail berkaitan Vue dan buat contoh Vue. new Vue({
el: '#app',
data: {
name: '',
date: '',
start: '',
end: '',
attendance: null
},
methods: {
addAttendance: function() {
// 调用后端接口来增加员工考勤数据
// 可以使用axios等库发送POST请求到api.php
},
getAttendance: function() {
// 调用后端接口来获取员工考勤数据
// 可以使用axios等库发送GET请求到api.php
}
// ...其他方法
}
});Kemudian, dalam contoh Vue, tentukan beberapa kaedah untuk mengendalikan tingkah laku interaktif pengguna dan berinteraksi dengan bahagian belakang melalui fungsi antara muka yang ditakrifkan sebelum ini. <div id="app">
<h2>员工考勤系统</h2>
<input type="text" v-model="name" placeholder="请输入员工姓名">
<input type="text" v-model="date" placeholder="请输入考勤日期">
<input type="text" v-model="start" placeholder="请输入上班时间">
<input type="text" v-model="end" placeholder="请输入下班时间">
<button @click="addAttendance">提交</button>
<button @click="getAttendance">查询</button>
<div v-if="attendance">
<h3>员工考勤详情</h3>
<p>姓名：{{ attendance.name }}</p>
<p>日期：{{ attendance.date }}</p>
<p>上班时间：{{ attendance.start }}</p>
<p>下班时间：{{ attendance.end }}</p>
</div>
<!-- 使用ECharts展示图表 -->
<div id="chart" style="width: 600px;height:400px;"></div>
</div>
<!-- 引入ECharts脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
name: '',
date: '',
start: '',
end: '',
attendance: null
},
methods: {
addAttendance: function() {
// 调用后端接口来增加员工考勤数据
// 可以使用axios等库发送POST请求到api.php
},
getAttendance: function() {
// 调用后端接口来获取员工考勤数据
// 可以使用axios等库发送GET请求到api.php
}
// ...其他方法
},
mounted: function() {
// 页面加载时获取员工考勤数据，并绘制图表
// 在getAttendance函数中获取数据后，调用绘制图表的方法
}
});
</script>3. Pembangunan bahagian hadapan
Gunakan Vue untuk mereka bentuk halaman hadapan, dan gunakan beberapa perpustakaan carta untuk memaparkan statistik kehadiran pekerja. Dalam contoh Vue, data diperoleh melalui fungsi antara muka yang ditakrifkan sebelum ini dan dipaparkan ke dalam halaman. Perkenalkan perpustakaan carta, seperti ECharts, ke halaman hujung hadapan dan gunakan perpustakaan ini untuk melukis carta. Carta yang berbeza boleh direka bentuk mengikut keperluan khusus, seperti carta bar, carta garisan, dsb. rrreee
Melalui pelaksanaan langkah di atas, kami boleh mereka bentuk sistem kehadiran pekerja yang dilaksanakan menggunakan PHP dan Vue, dan memaparkan statistik kehadiran pekerja melalui carta. Sudah tentu, pelaksanaan khusus masih perlu diselaraskan dan ditambah baik mengikut keperluan tertentu. 🎜Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk mereka bentuk paparan carta statistik sistem kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!