Comment utiliser PHP et Vue pour développer une interface d'exportation de données de présence des employés en ligne-tutoriel php-php.cn

Comment utiliser PHP et Vue pour développer une interface d'exportation de données de présence des employés en ligne

WBOY

Libérer： 2023-09-24 12:36:01

original

687 Les gens l'ont consulté

Comment utiliser PHP et Vue pour développer une interface dexportation de données de présence des employés en ligne

Comment utiliser PHP et Vue pour développer une interface d'exportation de données pour la présence des employés en ligne

Introduction : Avec le développement rapide d'Internet, de plus en plus d'entreprises se tournent vers la gestion en ligne de la présence des employés, qui offre de nombreuses opportunités d’optimisation de la gestion des ressources humaines. Grande commodité. Dans cet article, nous présenterons comment utiliser PHP et Vue pour développer une interface d'exportation de données de présence des employés en ligne afin de permettre aux entreprises d'exporter et d'analyser les données de présence.

1. Contexte du projet et analyse de la demande

Les fonctions du système de gestion des présences des employés en ligne incluent principalement la connexion, la déconnexion, les congés, les heures supplémentaires et d'autres opérations, et peuvent générer des rapports qui peuvent être exportés et analysés. Cet article se concentre sur la façon de développer une interface d'exportation de données permettant aux administrateurs d'exporter facilement les données de présence.

Les exigences pour l'interface d'exportation de données sont les suivantes :

Afficher une liste des enregistrements de présence des employés, y compris le nom de l'employé, la date, l'heure d'arrivée, l'heure de départ et d'autres informations
Fournir la fonction de filtrage ; enregistrements de présence par date ;
Fournir l'exportation des enregistrements de présence La fonction d'enregistrement prend en charge les formats Excel et CSV ;
Fournit la fonction d'exportation de tous les enregistrements de présence, et fournit également la fonction d'exportation des enregistrements de présence en fonction des conditions de filtrage ;

2. Sélection de la technologie

Technologie front-end : utilisez le framework Vue pour réaliser des fonctions d'affichage des données et de filtrage conditionnel ;
Technologie back-end : utilisez PHP pour développer une interface back-end, responsable de l'interrogation de la base de données et de la génération. exporter des fichiers ;
Base de données : utilisez MySQL pour stocker les enregistrements de présence des employés.

3. Développement front-end

Initialisation du projet front-end

Utilisez l'outil Vue CLI pour initialiser un nouveau projet Vue.

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

Copier après la connexion

Créer un composant de liste de présence des employés

Créez un composant nommé AttendanceList.vue dans le répertoire src/components pour afficher la liste des présences de l'employé. src/components目录下创建一个名为AttendanceList.vue的组件，用于展示员工的考勤记录列表。

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

Copier après la connexion

创建日期筛选组件

在src/components目录下创建一个名为DateFilter.vue的组件，用于实现按照日期筛选考勤记录的功能。

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

Copier après la connexion

创建数据导出组件

在src/components目录下创建一个名为DataExport.vue的组件，用于实现导出考勤记录的功能。

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

Copier après la connexion

四、后端开发

创建数据库表

在MySQL数据库中创建一个名为attendance的表，保存员工的考勤记录。

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

Copier après la connexion

编写后端接口

使用PHP编写后端接口，负责查询数据库和生成导出文件。

<?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");
}
?>

Copier après la connexion

五、运行测试