谷粒学院-day7

项目部分

上传课程分类

后端

上传excel表数据到数据库

//添加课程分类
    @ApiOperation(value = "Excel批量导入")
    @PostMapping("addSubject")
    public R addSubject(MultipartFile file) {
    
    
        //1 获取上传的excel文件 MultipartFile
        //返回错误提示信息
        subjectService.importSubjectData(file,subjectService);
        //判断返回集合是否为空
        return R.ok();
    }

@Override
    public void importSubjectData(MultipartFile file, EduSubjectService subjectService) {
    
    
        try {
    
    
            //1 获取文件输入流
            InputStream inputStream = file.getInputStream();

            // 这里 需要指定读用哪个class去读，然后读取第一个sheet 文件流会自动关闭
            EasyExcel.read(inputStream, ExcelSubjectData.class, new SubjectExcelListener(subjectService)).sheet().doRead();
        }catch(Exception e) {
    
    
            e.printStackTrace();
            throw new GuliException(20002,"添加课程分类失败");
        }
    }

前端

<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="OSS_PATH + '/excel/%E8%AF%BE%E7%A8%8B%E5%88%86%E7%B1%BB%E5%88%97%E8%A1%A8%E6%A8%A1%E6%9D%BF.xls'">点击下载模版</a> -->
          <a :href="'/static/subject.xlsx'">点击下载模版</a>
        </el-tag>

      </el-form-item>
        <!-- ref相当于表单的id -->
      <el-form-item label="选择Excel">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :disabled="importBtnDisabled"
          :limit="1"
          :action="BASE_API+'/eduservice/subject/addSubject'"
          name="file"
          accept="application/vnd.ms-excel">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button
            :loading="loading"
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload">{
   
   { fileUploadBtnText }}</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
    export default{
        data(){
            return{
                BASE_API: process.env.BASE_API, // 接口API地址
                //OSS_PATH: process.env.OSS_PATH, // 阿里云OSS地址
                importBtnDisabled: false, // 按钮是否禁用,
                fileUploadBtnText:'上传到服务器',
                loading: false
            }
        },
        created(){

        },
        methods:{
            submitUpload(){
                this.fileUploadBtnText = '正在上传'
                this.importBtnDisabled = true
                this.loading = true
                // js document.getElementById("upload").submit()
                this.$refs.upload.submit()
            },
            fileUploadSuccess(response){
                if(response.success === true){
                    this.fileUploadBtnText = '导入成功'
                    this.loading = false
                    // 提示成功信息
                    this.$message({
                        type:'success',
                        message:'成功添加课程分类'
                    })
                }
            },
            fileUploadError(response) {
                this.fileUploadBtnText = '导入失败'
                this.loading = false
                this.$message({
                type: 'error',
                message: '导入失败'
                })
            }        
        }
    }
 
</script>

读出分类信息，用树的形式展示

后端跳过

前端

<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />

    <el-tree
      ref="subjectTree"
      :data="subjectList"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />

  </div>
</template>

<script>
import subject from '@/api/edu/subject'
export default {

  data() {
    return {
      filterText: '',
      subjectList: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.subjectTree.filter(val)
    }
  },

  created() {
    this.fetchNodeList()
  },

  methods: {
    fetchNodeList() {
      subject.getAllSubject().then(response => {
        if (response.success === true) {
          this.subjectList = response.data.list
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    }
  }
}
</script>

课程上传

课程表分析

添加课程信息接口

整合富文本

最终效果