Vue 脚手架实现试卷页面 - 更新试题库页面及 Excel 导出

2023-09-29 12:02:42

在Vue 脚手架 创建的项目中，我们对试卷页面进行了升级，新增了更新试题库页面 和Excel 导出 功能。本文将深入探讨这些新功能的实现，并指导你一步步完成设置。

更新试题库页面

更新试题库页面允许用户添加、编辑和删除试题。我们使用 Vuex 存储管理试题，并使用 Formik 进行表单验证。

添加试题

在<template>中创建添加试题的表单：

<template>
  <div>
    <form @submit.prevent="addQuestion">
      <!-- 表单字段 -->
    </form>
  </div>
</template>

在<script>中定义 addQuestion 方法：

methods: {
  addQuestion() {
    // 获取表单数据
    const question = {
      type: this.questionType,
      title: this.questionTitle,
      // ...
    };

    // 将试题添加到 Vuex 状态
    this.$store.dispatch('addQuestion', question);
  }
}

编辑试题

在<template>中使用 v-if 显示编辑表单：

<template>
  <div>
    <template v-if="isEditing">
      <form @submit.prevent="editQuestion">
        <!-- 表单字段 -->
      </form>
    </template>
  </div>
</template>

在<script>中定义 editQuestion 方法：

methods: {
  editQuestion() {
    // 获取表单数据
    const question = {
      id: this.currentQuestion.id,
      type: this.questionType,
      title: this.questionTitle,
      // ...
    };

    // 更新 Vuex 状态中的试题
    this.$store.dispatch('editQuestion', question);

    // 关闭编辑表单
    this.isEditing = false;
  }
}

删除试题

在<script>中定义 deleteQuestion 方法：

methods: {
  deleteQuestion() {
    // 确认删除
    if (confirm('确定删除此试题？')) {
      // 从 Vuex 状态中删除试题
      this.$store.dispatch('deleteQuestion', this.currentQuestion.id);
    }
  }
}

Excel 导出

Excel 导出功能使用 excel-export-js 库将试题数据导出到 Excel 文件。

在<script>中引入 excel-export-js 库：

import ExcelJS from 'exceljs';

定义 exportToExcel 方法：

methods: {
  exportToExcel() {
    // 创建一个新的 Excel 工作簿
    const workbook = new ExcelJS.Workbook();

    // 创建一个新的工作表
    const worksheet = workbook.addWorksheet('试题数据');

    // 设置表头
    worksheet.columns = [
      { header: '类型', key: 'type' },
      { header: '题目', key: 'title' },
      // ...
    ];

    // 获取试题数据
    const questions = this.$store.getters.allQuestions;

    // 添加试题数据到工作表
    questions.forEach((question) => {
      worksheet.addRow(question);
    });

    // 保存 Excel 文件
    workbook.xlsx.writeBuffer().then((data) => {
      const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      saveAs(blob, '试题数据.xlsx');
    });
  }
}