Comment utiliser PHP et Vue pour développer une interface d'exportation 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 :

1. 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
2. Fournir la fonction de filtrage ; enregistrements de présence par date ;
3. Fournir l'exportation des enregistrements de présence La fonction d'enregistrement prend en charge les formats Excel et CSV ;
4. 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

1. Technologie front-end : utilisez le framework Vue pour réaliser des fonctions d'affichage des données et de filtrage conditionnel ;
2. 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 ;
3. Base de données : utilisez MySQL pour stocker les enregistrements de présence des employés.

3. Développement front-end

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

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

3. 创建日期筛选组件

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

4. 创建数据导出组件

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

四、后端开发

1. 创建数据库表

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

2. 编写后端接口

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

五、运行测试

1. 启动后端服务

将上述PHP文件命名为api.php，并将其放置到一个能被服务器访问到的目录下。启动一个PHP服务器，例如使用php-cli命令：

$ php -S localhost:8000

2. 运行前端项目

$ cd attendance-export
$ npm run serve

3. 访问项目界面

在浏览器中访问http://localhost:8080rrreee

Créez un composant de filtre de date
🎜Créez un composant nommé DateFilter.vue dans le répertoire src/components pour implémenter la fonction de filtrer les enregistrements de présence par date. 🎜rrreee
🎜Créez un composant d'exportation de données🎜🎜🎜Créez un composant nommé DataExport.vue dans le répertoire src/components pour implémenter la fonction d'exporter les relevés de présence. 🎜rrreee🎜4. Développement back-end🎜🎜🎜Créer une table de base de données🎜🎜🎜Créez une table nommée présence dans la base de données MySQL pour enregistrer les enregistrements de présence des employés. 🎜rrreee🎜🎜Écrire l'interface back-end🎜🎜🎜Utiliser PHP pour écrire l'interface back-end, chargée d'interroger la base de données et de générer les fichiers d'exportation. 🎜rrreee🎜 5. Exécutez le test 🎜🎜🎜 Démarrez le service backend 🎜🎜🎜 Nommez le fichier PHP ci-dessus api.php et placez-le dans un répertoire accessible par le serveur. Démarrez un serveur PHP, par exemple, utilisez la commande php-cli : 🎜rrreee🎜🎜Exécutez le projet front-end🎜🎜rrreee
🎜Visitez l'interface du projet🎜🎜🎜Visitez http : //localhost dans le navigateur :8080, vous pouvez voir la liste des présences de l'employé, le filtrage des dates et les boutons d'exportation des données. Effectuez les opérations nécessaires pour exporter les enregistrements de présence. 🎜🎜Conclusion : Cet article présente en détail comment utiliser PHP et Vue pour développer une interface d'exportation en ligne des données de présence des employés. Grâce à la coopération du front-end et du back-end, les fonctions d'affichage, de filtrage et d'exportation des enregistrements de présence sont réalisées. J'espère que cet article pourra vous aider à mieux utiliser PHP et Vue pour développer un système de gestion des présences en ligne. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!