Cara menggunakan PHP dan Vue untuk membangunkan antara muka eksport data kehadiran pekerja dalam talian-tutorial php-php.cn

Cara menggunakan PHP dan Vue untuk membangunkan antara muka eksport data kehadiran pekerja dalam talian

Cara menggunakan PHP dan Vue untuk membangunkan antara muka eksport data untuk kehadiran pekerja dalam talian

Pengenalan: Dengan perkembangan pesat Internet, semakin banyak syarikat beralih kepada pengurusan dalam talian kehadiran pekerja, yang menyediakan banyak peluang untuk mengoptimumkan pengurusan sumber manusia. Dalam artikel ini, kami akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan antara muka eksport data kehadiran pekerja dalam talian untuk memudahkan perusahaan mengeksport dan menganalisis data kehadiran.

1. Latar belakang projek dan analisis permintaan

Fungsi sistem pengurusan kehadiran pekerja dalam talian terutamanya termasuk daftar masuk pekerja, log keluar, cuti, kerja lebih masa dan operasi lain, dan boleh menjana laporan yang boleh dieksport dan dianalisis. Artikel ini memberi tumpuan kepada cara membangunkan antara muka eksport data untuk pentadbir mengeksport data kehadiran dengan mudah.

Keperluan untuk antara muka eksport data adalah seperti berikut:

Paparkan senarai rekod kehadiran pekerja, termasuk nama pekerja, tarikh, masa daftar masuk, masa daftar keluar dan maklumat lain
Sediakan fungsi penapisan rekod kehadiran mengikut tarikh;
Menyediakan eksport kehadiran Fungsi rakaman menyokong format Excel dan CSV
Menyediakan fungsi mengeksport semua rekod kehadiran, dan juga menyediakan fungsi mengeksport rekod kehadiran mengikut syarat penapis.

2. Pemilihan teknologi

Teknologi bahagian hadapan: Gunakan rangka kerja Vue untuk merealisasikan paparan data dan fungsi penapisan bersyarat;
Teknologi bahagian belakang: Gunakan PHP untuk membangunkan antara muka bahagian belakang, bertanggungjawab untuk menyoal pangkalan data dan menjana eksport fail;
Pangkalan Data: Gunakan MySQL untuk menyimpan rekod kehadiran pekerja.

3. Pembangunan bahagian hadapan

Pengamatan projek bahagian hadapan

Gunakan alat Vue CLI untuk memulakan projek Vue baharu.

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

Salin selepas log masuk

Buat komponen senarai kehadiran pekerja

Buat komponen bernama AttendanceList.vue dalam direktori src/components untuk memaparkan senarai rekod kehadiran pekerja . 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>

Salin selepas log masuk

创建日期筛选组件

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

Salin selepas log masuk

创建数据导出组件

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

Salin selepas log masuk

四、后端开发

创建数据库表

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

Salin selepas log masuk

编写后端接口

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

Salin selepas log masuk

五、运行测试

启动后端服务

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

$ php -S localhost:8000

Salin selepas log masuk

运行前端项目

$ cd attendance-export
$ npm run serve

Salin selepas log masuk

访问项目界面

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

DateFilter.vue

src/components

DataExport.vue

src/components

kehadiran dalam pangkalan data MySQL untuk menyimpan rekod kehadiran pekerja. 🎜rrreee🎜🎜Tulis antara muka belakang🎜🎜🎜Menggunakan PHP untuk menulis antara muka belakang, bertanggungjawab untuk menanyakan pangkalan data dan menjana fail eksport. 🎜rrreee🎜 5. Jalankan ujian 🎜🎜🎜 Mulakan perkhidmatan backend 🎜🎜🎜 Namakan fail PHP di atas api.php dan letakkan dalam direktori yang boleh diakses oleh pelayan. Mulakan pelayan PHP, sebagai contoh, gunakan arahan php-cli: 🎜rrreee🎜🎜Jalankan projek bahagian hadapan🎜🎜rrreee

http: //localhost dalam pelayar :8080, anda boleh melihat senarai rekod kehadiran pekerja, penapisan tarikh dan butang eksport data. Lakukan operasi seperti yang diperlukan untuk mengeksport rekod kehadiran. 🎜🎜Kesimpulan: Artikel ini memperkenalkan secara terperinci cara menggunakan PHP dan Vue untuk membangunkan antara muka eksport data kehadiran pekerja dalam talian Melalui kerjasama bahagian hadapan dan belakang, fungsi paparan, penapisan dan eksport rekod kehadiran direalisasikan. Saya harap artikel ini dapat membantu anda menggunakan PHP dan Vue dengan lebih baik untuk membangunkan sistem pengurusan kehadiran dalam talian. 🎜

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan antara muka eksport data kehadiran pekerja dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!