Home > Article > Backend Development > How to use PHP and Vue to develop an online employee attendance data export interface
How to use PHP and Vue to develop an online employee attendance data export interface
Introduction: With the rapid development of the Internet, more and more companies are beginning to turn to online management Employee attendance, which provides great convenience for optimizing human resource management. In this article, we will introduce how to use PHP and Vue to develop an online employee attendance data export interface to facilitate enterprises to export and analyze attendance data.
1. Project background and demand analysis
The functions of the online employee attendance management system mainly include employee sign-in, sign-out, leave, overtime and other operations, and can generate reports for export and analysis . This article focuses on how to develop a data export interface for administrators to easily export attendance data.
The requirements for the data export interface are as follows:
2. Technology selection
3. Front-end development
Use the Vue CLI tool to initialize a new Vue project.
$ npm install -g @vue/cli $ vue create attendance-export
Create a component named AttendanceList.vue
in the src/components
directory Component used to display the employee's attendance record list.
<template> <div> <!-- 考勤记录列表 --> <table> <thead> <tr> <th>姓名</th> <th>日期</th> <th>签到时间</th> <th>签退时间</th> </tr> </thead> <tbody> <tr v-for="record in attendanceList" :key="record.id"> <td>{{ record.name }}</td> <td>{{ record.date }}</td> <td>{{ record.startTime }}</td> <td>{{ record.endTime }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { attendanceList: [] // 考勤记录列表数据 } }, mounted() { this.getAttendanceList(); // 页面加载时获取考勤记录列表 }, methods: { getAttendanceList() { // 使用Vue的axios插件发送请求获取考勤记录数据 axios.get('/api/attendance') .then(response => { this.attendanceList = response.data; }) .catch(error => { console.error(error); }); } } } </script> <style> table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; border-bottom: 1px solid #ddd; } </style>
Create a component named DateFilter.vue
in the src/components
directory , used to implement the function of filtering attendance records by date.
<template> <div> <!-- 日期选择器 --> <input type="date" v-model="selectedDate" @input="filterByDate" /> </div> </template> <script> export default { data() { return { selectedDate: null // 选择的日期 } }, methods: { filterByDate() { // 使用Vue的$emit方法触发自定义事件,将选择的日期传递给父组件 this.$emit('filter', this.selectedDate); } } } </script>
Create a component named DataExport.vue
in the src/components
directory , used to implement the function of exporting attendance records.
<template> <div> <button @click="exportAll">导出全部</button> <button @click="exportFiltered">按条件导出</button> </div> </template> <script> export default { methods: { exportAll() { // 发送导出全部考勤记录的请求 axios.get('/api/export?type=csv') .then(response => { this.downloadFile(response.data, 'attendance.csv'); }) .catch(error => { console.error(error); }); }, exportFiltered() { // 发送按条件导出考勤记录的请求 axios.get('/api/export?type=excel&date=' + this.selectedDate) .then(response => { this.downloadFile(response.data, 'attendance.xlsx'); }) .catch(error => { console.error(error); }); }, downloadFile(fileContent, fileName) { // 创建一个临时链接并下载文件 const blob = new Blob([fileContent]); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = fileName; link.click(); } } } </script>
4. Back-end development
Create a table named attendance
in the MySQL database , save employees’ attendance records.
CREATE TABLE attendance ( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50) NOT NULL, date DATE NOT NULL, startTime TIME NOT NULL, endTime TIME NOT NULL );
Use PHP to write the back-end interface, which is responsible for querying the database and generating export files.
<?php // 连接MySQL数据库 $servername = "localhost"; $username = "root"; $password = "password"; $dbname = "attendance"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } // 查询考勤记录数据 function getAttendanceList($date = null) { global $conn; $sql = "SELECT * FROM attendance"; if ($date) { $sql .= " WHERE date = '".$date."'"; } $result = $conn->query($sql); $attendanceList = array(); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $attendanceList[] = $row; } } return $attendanceList; } // 导出考勤记录为Excel文件 function exportToExcel($attendanceList) { // 使用PHPExcel库生成Excel文件 require_once 'PHPExcel.php'; $objPHPExcel = new PHPExcel(); $objPHPExcel->getActiveSheet()->fromArray($attendanceList, null, 'A1'); $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007'); ob_start(); $objWriter->save('php://output'); $content = ob_get_clean(); return $content; } // 导出考勤记录为CSV文件 function exportToCSV($attendanceList) { $content = "姓名,日期,签到时间,签退时间 "; foreach ($attendanceList as $record) { $content .= $record['name'].','.$record['date'].','.$record['startTime'].','.$record['endTime']." "; } return $content; } // 根据请求参数调用不同的导出方法 if ($_GET['type'] == 'csv') { $attendanceList = getAttendanceList(); $content = exportToCSV($attendanceList); header("Content-Disposition: attachment; filename=attendance.csv"); header("Content-Type: text/csv"); echo $content; } else if ($_GET['type'] == 'excel') { $date = $_GET['date']; $attendanceList = getAttendanceList($date); $content = exportToExcel($attendanceList); header("Content-Disposition: attachment; filename=attendance.xlsx"); header("Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); echo $content; } else { header("HTTP/1.1 400 Bad Request"); } ?>
5. Run the test
Name the above PHP file api.php
, and Place it in a directory that can be accessed by the server. Start a PHP server, for example, use the php-cli command:
$ php -S localhost:8000
$ cd attendance-export $ npm run serve
Visit http://localhost:8080
in the browser, and you can see the employee's attendance record list, date filtering and data export buttons. Perform operations as needed to export attendance records.
Conclusion: This article introduces in detail how to use PHP and Vue to develop an online employee attendance data export interface. Through the cooperation of the front and back ends, the display, filtering and export functions of attendance records are realized. I hope this article can help you better apply PHP and Vue to develop an online attendance management system.
The above is the detailed content of How to use PHP and Vue to develop an online employee attendance data export interface. For more information, please follow other related articles on the PHP Chinese website!