7、重启oss服务，Swagger中测试文件上传
http://localhost:8001/swagger-ui.html
三、课程分类添加功能(前端)
1、添加课程分类路由
/src/router/index.js:
{ path: '/subject', component: Layout, //布局 redirect: '/subject/table', name: 'SubjectSort', meta: { title: '课程分类管理', icon: 'nested' }, children: [{ path: 'list', name: 'EduSubjectList', component: () => import ('@/views/edu/subject/list'), meta: { title: '课程分类列表', icon: 'table' } }, { path: 'import', name: 'EduSubjectImport', component: () => import ('@/views/edu/subject/import'), meta: { title: '导入课程分类', icon: 'tree' } } ] }
2、创建课程分类页面，修改路由对应的页面路径
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="OSS_PATH + '/excel/template.xlsx'">点击下载模版</a> </el-tag> </el-form-item> <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/addSubjects'" name="file" accept="application/vnd.ms-excel"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button :loading="false" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">{{ fileUploadBtnText }}</el-button> </el-upload> </el-form-item> </el-form> </div> </template>
编写js方法:
<script> export default { data() { return { BASE_API: process.env.BASE_API, // 接口API地址 OSS_PATH: process.env.OSS_PATH, // 阿里云OSS地址 fileUploadBtnText: '上传到服务器', // 按钮文字 importBtnDisabled: false, // 按钮是否禁用, loading: false } }, created() { }, methods: { //上传成功调用的方法 fileUploadSuccess(response){ if (response.success === true) { this.fileUploadBtnText = '导入成功' this.loading = false this.$message({ type: 'success', message: response.message }) } //跳转到列表页面 this.$router.push({path:'/subject/list'}) }, //上传失败调用的方法 fileUploadError(response){ if(response.success === false){ this.fileUploadBtnText = '导入失败' this.loading = false this.$message({ type: 'error', message: response.message }) } //跳转到列表页面 this.$router.push({path:'/subject/list'}) }, //点击按钮上传文件到接口 submitUpload(){ this.importBtnDisabled = true //上传按钮禁用 this.loading = true this.$refs.upload.submit() } } } </script>
4、启动服务测试
四、课程分类列表(后端）
1、根据返回数据创建对应实体类
//一级分类 @Data public class OneSubject { private String id; private String title; //一个一级分类里面有多个二级分类 private List<TwoSubject> children = new ArrayList<>(); }
//二级分类 @Data public class TwoSubject { private String id; private String title; }
返回数据格式为：
2、编写Controller类
@ApiOperation(value = "查询所有课程分类") @GetMapping("getAllSubject") public R getAllSubject(){ List <OneSubject> oneSubjectList = eduSubjectService.getAllSubject(); return R.ok().data("list",oneSubjectList); }
3、编写Service类
//查询所有的课程分类==>树形 @Override public List <OneSubject> getAllSubject() { //1.查询所有一级分类 parent_id=0 QueryWrapper<EduSubject> wrapper = new QueryWrapper<EduSubject>(); wrapper.eq("parent_id",0); List <EduSubject> oneSubjectList = this.baseMapper.selectList(wrapper); //2.查询所有二级分类 parent_id!=0 wrapper = new QueryWrapper<EduSubject>(); wrapper.ne("parent_id",0); List <EduSubject> twoSubjectList = this.baseMapper.selectList(wrapper); //定义最终的返回类型 List <OneSubject> finalSubjectList = new ArrayList <OneSubject>(); ///3 封装一级分类 //查询出来所有一级分类list集合集合，得到每一个一级分类对象，回去每一个一级分类对象值， //封装到要求的list集合里面 List<OneSubject> findSubjectList //List<EduSubject> ==> List <OneSubject> finalSubjectList for (EduSubject subject : oneSubjectList) { //将oneSubjectList封装到finalSubjectList OneSubject oneSubject = new OneSubject(); //以下两种方法都可 BeanUtils.copyProperties(subject,oneSubject); // oneSubject.setId(subject.getId()); // oneSubject.setTitle(subject.getTitle()); //在一级分类循环遍历查询所有的二级分类 //创建list集合封装每一个一级分类的二级分类 List <TwoSubject> children = new ArrayList <>(); for (EduSubject eduSubject : twoSubjectList) { TwoSubject twoSubject = new TwoSubject(); if (eduSubject.getParentId().equals(subject.getId())){ BeanUtils.copyProperties(eduSubject,twoSubject); children.add(twoSubject); } } oneSubject.setChildren(children); finalSubjectList.add(oneSubject);//加入结果集 该语句放在76行之后也可以想想看为啥??? } return finalSubjectList; }
4、使用swagger进行测试
…
五、课程分类列表(前端)
1、编写前端接口
import request from '@/utils/request' export default { //查询所有的课程分类 getAllSubject() { return request({ url: `/eduservice/subject/getAllSubject`, method: 'get' }) } }
2、参考tree模块把前端整合出来
<template> <div class="app-container"> <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" /> <el-tree ref="tree2" :data="data2" :props="defaultProps" :filter-node-method="filterNode" class="filter-tree" default-expand-all /> </div> </template>
3、前端接口调用
<script> import subject from '@/api/edu/subject' export default { data() { return { filterText: '', data2: [], defaultProps: { children: 'children', label: 'title' } } }, watch: { filterText(val) { this.$refs.tree2.filter(val) } }, created() { //页面加载完成后调用 this.getSubjectList() }, methods: { getSubjectList(){ subject.getAllSubject().then(response=>{ this.data2 = response.data.list; }) }, filterNode(value, data) { if (!value) return true return data.title.toLowerCase().indexOf(value) !== -1 //搜索不区分大小写 } } } </script>
4、启动项目服务测试
