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:

1. Display a list of employee attendance records, including employee name, date, check-in time, check-out time and other information;
2. Provides the function of filtering attendance records by date;
3. provides the function of exporting attendance records, supporting Excel and CSV formats;
4. provides the function of exporting all attendance records, and also provides the function of exporting attendance according to filtering conditions Record function.

2. Technology selection

1. Front-end technology: use Vue framework to realize data display and conditional filtering functions;
2. Back-end technology: use PHP develops the back-end interface, which is responsible for querying the database and generating export files;
3. Database: Use MySQL to store employee attendance records.

3. Front-end development

1. Front-end project initialization

Use the Vue CLI tool to initialize a new Vue project.

$ npm install -g @vue/cli
$ vue create attendance-export

2. Create employee attendance list component

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>

3. Create date filter component

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>

4. Create a data export component

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

1. Create database table

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
);

2. Write the back-end interface

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

1. Start the backend service

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

2. Run the front-end project

$ cd attendance-export
$ npm run serve

3. Access the project interface

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!