课程分类导入前端实现

ゞ浴缸里的玫瑰 2021-07-24 18:44 430阅读 0赞

# 一 导入课程分类需求 #

## 1 导入课程分类 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

## 2 课程分类列表 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

# 二 Excel模板上传 #

## 1 编辑Excel模板 ##

## 2 将文件上传到阿里云OSS ##

![20201201203641371.png][]

# 三 路由和组件 #

## 1 添加vue组件 ##

![20201201203658405.png][]

## 2 添加路由 ##

// 课程分类管理
      {
        path: '/subject',
        component: Layout,
        redirect: '/subject/list',
        name: 'Subject',
        meta: { title: '课程分类管理' },
        children: [
          {
            path: 'list',
            name: 'SubjectList',
            component: () => import('@/views/subject/list'),
            meta: { title: '课程分类列表' }
          },
          {
            path: 'import',
            name: 'SubjectImport',
            component: () => import('@/views/subject/import'),
            meta: { title: '导入课程分类' }
          }
        ]
      },

# 四 import.vue组件 #

## 1 添加配置 ##

config/dev.env.js中添加阿里云oss bucket地址，注意：修改后重启前端服务器

OSS_PATH: '"https://gulimall-cakin.oss-cn-chengdu.aliyuncs.com"'

## 2 js定义数据 ##

data() {
        return {
          defaultExcelTemplate: process.env.OSS_PATH + '/excel/课程分类列表模板.xls', // 默认Excel模板
          importBtnDisabled: false // 导入按钮是否禁用
        }
      },

## 3 模板 ##

<template>
      <div class="app-container">
        <el-form label-width="120px">
          
          <el-form-item label="下载模板">
            <el-tag type="info">excel模版说明</el-tag>
            <el-tag>
              <i class="el-icon-download"/>
              <a :href="defaultExcelTemplate">点击下载模版</a>
            </el-tag>
          </el-form-item>
          
          <el-form-item label="选择Excel">
            
            <el-upload
              ref="upload"
              :auto-upload="false"
              :on-exceed="fileUploadExceed"
              :on-success="fileUploadSuccess"
              :on-error="fileUploadError"
              :limit="1"
              action="http://127.0.0.1:8110/admin/edu/subject/import"
              name="file"
              accept="application/vnd.ms-excel">
              
              <el-button
                slot="trigger"
                size="small"
                type="primary">选取文件</el-button>
              
              <el-button
                :disabled="importBtnDisabled"
                style="margin-left: 10px;"
                size="small"
                type="success"
                @click="submitUpload()">导入</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </template>

## 4 js上传方法 ##

methods: {
        // 当选择文件超出约定数量时触发
        fileUploadExceed() {
          this.$message.warning('只能选取一个文件')
        },
        // 执行上传
        submitUpload() {
          this.importBtnDisabled = true // 禁用按钮
          this.$refs.upload.submit() // 手动表单提交
        },
    
        // 上传成功的回调
        fileUploadSuccess(response) {
          if (response.success) {
            this.importBtnDisabled = false // 启用按钮
            this.$message.success(response.message)
            this.$refs.upload.clearFiles() // 清空文件列表
          } else {
            this.$message.error('上传失败! （非20000）')
          }
        },
    
        // 上传失败的回调
        fileUploadError() {
          this.importBtnDisabled = false // 启用按钮
          this.$message.error('上传失败! （http失败）')
          this.$refs.upload.clearFiles() // 清空文件列表
        }
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/1d324013239246c7a61ec8d4fdd05cde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/b2230ba385364142b53963717d371046.png
[20201201203641371.png]: /images/20210724/33d2dc564f684a22ac0f29ce1cec7b1d.png
[20201201203658405.png]: /images/20210724/dd9aa3168ffa49aa9ac0b238937d3f77.png