How to combine PHP and Vue to import and export employee attendance data

How to combine PHP and Vue to realize the import and export of employee attendance data

Importing and exporting employee attendance data is one of the common functions in enterprise management systems. By combining PHP and Vue can implement simple and effective import and export functions of employee attendance data. This article describes how to implement this functionality using both technologies, and provides specific code examples.

1. Import employee attendance data

1. Create a front-end page

First, we need to create a front-end page for users to upload employee attendance data files . Use Vue to quickly create a page with user interaction functions.

<template>
  <div>
    <input type="file" @change="uploadFile" />
    <button @click="importData">导入数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile(e) {
      this.file = e.target.files[0];
    },
    importData() {
      let formData = new FormData();
      formData.append("file", this.file);
      axios.post("/import.php", formData).then((response) => {
        // 处理导入结果
        console.log(response.data);
      });
    },
  },
};
</script>

In the above code, we create a page containing file selection and import buttons. The user can select the employee attendance data file to be imported and save the file to this.file attribute. We then use Vue's @change method to listen to the file selection event and use the axios library to send a POST request to upload the file to the server.

Create back-end processing logic

On the server side, we use PHP to process the uploaded employee attendance data file and import the data into the database. The following is a simple sample code:

<?php
$allowedExtensions = ['csv', 'xls', 'xlsx']; //允许的文件扩展名
$uploadPath = './uploads/'; //上传文件保存的路径

if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
  $extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
  
  if (in_array($extension, $allowedExtensions)) {
    $filename = uniqid() . '.' . $extension;
    $filePath = $uploadPath . $filename;

    move_uploaded_file($_FILES['file']['tmp_name'], $filePath);

    // 解析文件并导入数据到数据库
    // TODO: 进行数据导入逻辑

    echo json_encode(['success' => true, 'message' => '数据导入成功']);
  } else {
    echo json_encode(['success' => false, 'message' => '不支持的文件格式']);
  }
} else {
  echo json_encode(['success' => false, 'message' => '文件上传失败']);
}
?>

The above code first checks whether the file is uploaded successfully and checks whether the file extension is allowed. If everything is normal, move the file to the specified path and import the data.

2. Export employee attendance data

Create a front-end page

Similar to the import function, we need to create a front-end page for users to select Exported employee attendance data. The following is a sample code:

<template>
  <div>
    <button @click="exportData">导出数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    exportData() {
      axios.get("/export.php").then((response) => {
        // 处理导出结果
        console.log(response.data);

        // 下载文件
        const link = document.createElement("a");
        link.href = "data:application/octet-stream;base64," + response.data;
        link.setAttribute("download", "employee_attendance.csv");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
  },
};
</script>

In the above code, we create a page that contains an export button. When the user clicks the button, a GET request is sent to the server using the

axios

library. ##/export.phpPath. After receiving the exported data, create a element, set the href attribute to the exported data, and then set the file name through the setAttribute method. , and simulate the operation of clicking the download link, thereby realizing the export and download of files. Create back-end processing logic

2. On the server side, we use PHP to handle the request to export employee attendance data and generate a CSV file containing the data. The following is a simple sample code:

<?php
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="employee_attendance.csv"');

// 查询员工考勤数据
// TODO: 查询员工考勤数据的逻辑

// 生成CSV文件
$file = fopen('php://output', 'w');
fputcsv($file, ['姓名', '日期', '考勤状态']);

// 将查询结果写入CSV文件
// TODO: 将查询结果写入CSV文件的逻辑

fclose($file);
?>

The above code first sets the response header information, specifies Content-Type as

application/octet-stream

, Content-Disposition as attachment, and specifies the file Named

employee_attendance.csv, to download the file. Then, query employee attendance data and write the results into a CSV file.

By combining PHP and Vue, we can easily implement the import and export functions of employee attendance data. The front-end uses Vue to provide user interaction functions and interacts with the back-end through axios for data. The backend uses PHP to receive and process requests and implement data import and export operations. This article provides a simple code example for reference and learning.

The above is the detailed content of How to combine PHP and Vue to import and export employee attendance data. For more information, please follow other related articles on the PHP Chinese website!