Backend Development
PHP Tutorial
How to generate online employee attendance report via PHP and Vue
How to generate online employee attendance report via PHP and Vue
How to generate online employee attendance report through PHP and Vue
In the modern office environment, managing employee attendance is a very important task. With the continuous development of technology, generating online employee attendance reports through automated systems has become a common requirement. This article will introduce how to use PHP and Vue to implement this function, and provide specific code examples.
- Preliminary preparation
Before starting, we need to ensure that the relevant environments of PHP and Vue have been installed on the server. If it is not installed, you can find the corresponding installation tutorial through the link below.
- PHP installation tutorial: https://www.php.net/manual/en/install.php
- Vue installation tutorial: https://vuejs .org/v2/guide/installation.html
- Create database table
Before generating the attendance report, we need to create a database table to store employee attendance records. You can use the following SQL statement to create a simple table structure.
CREATE TABLE `attendance` ( `id` int(11) NOT NULL AUTO_INCREMENT, `employee_id` int(11) NOT NULL, `date` date NOT NULL, `clock_in_time` time NOT NULL, `clock_out_time` time NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
In this table, we store information related to each punch-in, including employee ID, date, work time and off work time, etc.
- Create PHP background file
We use PHP to handle background logic and read data from the database. First we need to create a file named "getAttendance.php" and write the following code:
<?php
// 连接到数据库
$conn = new mysqli("localhost", "username", "password", "attendance");
// 检查连接是否成功
if ($conn->connect_error) {
die("数据库连接失败: " . $conn->connect_error);
}
// 查询数据库中的考勤记录
$sql = "SELECT * FROM attendance";
$result = $conn->query($sql);
// 检查查询结果是否为空
if ($result->num_rows > 0) {
// 将查询结果转换为JSON格式，并输出给前端
$rows = array();
while ($row = $result->fetch_assoc()) {
$rows[] = $row;
}
echo json_encode($rows);
} else {
echo "没有找到考勤记录";
}
// 关闭数据库连接
$conn->close();In this file, we first connect to the database, and then query the attendance records in the database, And convert the result into JSON format and output it to the front end.
- Create Vue front-end code
Next we need to create a Vue front-end page to display attendance records. First create a file named "index.html" and introduce the Vue and axios libraries. Then write the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>员工考勤报告</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>员工ID</th>
<th>日期</th>
<th>上班时间</th>
<th>下班时间</th>
</tr>
</thead>
<tbody v-if="attendance.length">
<tr v-for="record in attendance" :key="record.id">
<td>{{ record.employee_id }}</td>
<td>{{ record.date }}</td>
<td>{{ record.clock_in_time }}</td>
<td>{{ record.clock_out_time }}</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan="4">没有找到考勤记录</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
attendance: []
},
mounted() {
this.getAttendance();
},
methods: {
getAttendance() {
axios.get('getAttendance.php')
.then(response => {
this.attendance = response.data;
})
.catch(error => {
console.log(error);
});
}
}
});
</script>
</body>
</html>In this code, we create a Vue instance and call the getAttendance method in the mounted hook function to obtain the attendance record. Then use the v-for directive to generate each row of the table.
- Run the project
Now we only need to place the above two files in the root directory of the server and access the "index.html" file in the browser to see the generated Online employee attendance reports.
Through the above steps, we successfully used PHP and Vue to generate an online employee attendance report. Of course, this is just a simple example and you can make more complex developments based on actual needs. Hope this article is helpful to you!
The above is the detailed content of How to generate online employee attendance report via PHP and Vue. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Explain JSON Web Tokens (JWT) and their use case in PHP APIs.
Apr 05, 2025 am 12:04 AM
JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,
How to implement panel drag and drop adjustment function similar to VSCode in front-end development?
Apr 04, 2025 pm 02:06 PM
Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...
How to manually trigger the onBlur event of a cell in Avue-crud row editing mode?
Apr 04, 2025 pm 02:00 PM
The onBlur event that implements Avue-crud row editing in the Avue component library manually triggers the Avue-crud component. It provides convenient in-line editing functions, but sometimes we need to...
How to use Vue 3 to implement up scrolling loading function similar to WeChat chat records?
Apr 04, 2025 pm 03:51 PM
How to achieve upward scrolling loading similar to WeChat chat records? When developing applications similar to WeChat chat records, a common question is how to...
Why is there no page request information on the console network after vue-router jump?
Apr 04, 2025 pm 05:27 PM
Why is there no page request information on the console network after vue-router jump? When using vue-router for page redirection, you may notice a...
How to implement the photo upload function of high-photographers of different brands on the front end?
Apr 04, 2025 pm 05:42 PM
How to implement the photo upload function of different brands of high-photographers on the front end When developing front-end projects, you often encounter the need to integrate hardware equipment. for...
How to use Vue to implement electronic quotation forms with single header and multi-body?
Apr 04, 2025 pm 11:39 PM
How to implement electronic quotation forms with single header and multi-body in Vue. In modern enterprise management, the electronic processing of quotation forms is to improve efficiency and...
When Vue and Mapbox combine Three.js, how do you ensure that the bottom of a 3D object is fixed on the map without changing with the perspective?
Apr 04, 2025 am 11:42 AM
Use Vue and Mapbox to combine Three.js to achieve the adaptation of three-dimensional object coordinate points and map viewing angles. When using Vue and Mapbox to combine Three.js, how to ensure three-dimensional objects...
