30.添加课程分类和课程分类列表(前后端)
一、添加课程分类
1、在router/index.js添加路由
{ path: '/subject', component: Layout, redirect: '/subject/table', name: '课程分类管理', meta: { title: '课程分类管理', icon: 'example' }, children: [ { path: 'table', name: '课程分类列表', component: () => import('@/views/edu/subject/list'), meta: { title: '课程分类列表', icon: 'table' } }, { path: 'save', name: '添加课程分类', component: () => import('@/views/edu/subject/save'), meta: { title: '添加课程分类', icon: 'tree' } } ] }
2、创建对应vue页面
3、实现
在list.vue页面添加代码:
<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="'/static/01.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/edu-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地址 fileUploadBtnText: '上传到服务器', // 按钮文字 importBtnDisabled: false, // 按钮是否禁用, loading: false } }, created() { }, methods:{ //点击按钮上传文件到接口里面 submitUpload() { this.importBtnDisabled = true this.loading = true // js:document.getElementById("upload").submit() this.$refs.upload.submit() }, //上传成功 fileUploadSuccess(response) { //提示信息 this.loading = false this.$message({ type: 'success', message: '添加课程分类成功' }) //跳转到课程分类列表 //由于跳转 this.$router.push({path:'/subject/list'}) }, //上传失败 fileUploadError() { this.loading = false this.$message({ type: 'error', message: '添加课程分类失败' }) } } } </script>
excel模板为上一章的excel数据
二、课程分类列表
1、后端接口实现
①首先创建两个实体类:一级分类和二级分类,其中一级分类有多个二级分类
在entity/subject创建实体类OneSubject
@Data public class OneSubject { private String id; private String title; //一个一级分类里面有多个二级分类 private List<TwoSubject> children = new ArrayList<>(); }
在entity/subject创建实体类TwoSubject
@Data public class OneSubject { private String id; private String title; }
②在EduSubjectController中添加获取所有一级分类集合接口
//课程分类列表功能(树形)
@GetMapping("getAllSubject")
public R getAllSubject() {
//list集合泛型是一级分类,因为它本身包含了二级分类
List<OneSubject> list = subjectService.getAllOneTwoSubject();
return R.ok().data("list",list);
}
③在EduSubjectService接口中添加getAllOneTwoSubject方法
List<OneSubject> getAllOneTwoSubject();
④在EduSubjectServiceImpl接口实现类中实现getAllOneTwoSubject方法
//课程分类列表功能(树形) @Override public List<OneSubject> getAllOneTwoSubject() { //1 查询出所有一级分类 parentid=0 QueryWrapper<EduSubject> wrapperOne = new QueryWrapper<>(); wrapperOne.eq("parent_id","0"); List<EduSubject> oneSubjectList = baseMapper.selectList(wrapperOne); //2 查询出所有二级分类 parentid!=0 QueryWrapper<EduSubject> wrapperTwo = new QueryWrapper<>(); wrapperTwo.ne("parent_id","0"); List<EduSubject> twoSubjectList = baseMapper.selectList(wrapperTwo); //创建list集合,用于存储最终封装数据 List<OneSubject> finalSubjectList = new ArrayList<>(); //3 封装一级分类 //查询出来的所有一级分类list集合遍历,得到每个一级分类对象,获取每个一级分类对象值, //封装到要求的list里面List<OneSubject> finalSubjectList for (int i = 0; i < oneSubjectList.size(); i++) { //遍历oneSubjectList集合 //得到oneSubjectList每个eduSubject对象 EduSubject eduSubject = oneSubjectList.get(i); //把eduSubject里面值获取出来,放到oneSubject对象里面 OneSubject oneSubject = new OneSubject(); // oneSubject.setId(eduSubject.getId()); // oneSubject.setTitle(eduSubject.getTitle()); //eduSubject复制到oneSubject,找到对应的值进行封装 BeanUtils.copyProperties(eduSubject,oneSubject); //多个oneSubject放到finalSubjectList里面 finalSubjectList.add(oneSubject); //4 封装二级分类 //创建list集合封装每个一级分类的二级分类 List<TwoSubject> twoFinalSubjectList = new ArrayList<>(); //遍历二级分类list集合 for (int m = 0; m < twoSubjectList.size(); m++) { //获取每个二级分类 EduSubject tSubject = twoSubjectList.get(m); //判断二级分类parentid和一级分类id是否一样 if(tSubject.getParentId().equals(eduSubject.getId())) { //把tSubject值复制到TwoSubject里面,放到twoFinalSubjectList里面 TwoSubject twoSubject = new TwoSubject(); BeanUtils.copyProperties(tSubject,twoSubject); twoFinalSubjectList.add(twoSubject); } } //把一级下面的二级分类放到一级分类里面 oneSubject.setChildren(twoFinalSubjectList); } return finalSubjectList; }
2、前端实现
①后端接口调用
export default { // 1 课程分类 getSubjectList(){ return request({ url: `/eduservice/edu-subject/getAllSubject`, method: 'get', }) } }
②list.vue页面实现
<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> <script> import subject from '@/api/edu/subject' export default { data() { return { filterText: '', data2: [],//返回所有分类数据 defaultProps: { children: 'children', label: 'title' } } }, created() { this.getAllSubjectList() }, watch: { filterText(val) { this.$refs.tree2.filter(val) } }, methods: { getAllSubjectList() { subject.getSubjectList() .then(response=>{ this.data2 = response.data.list }) }, filterNode(value, data) {//搜索框不区分大小写 if (!value) return true return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1 } } } </script>