课程管理
课程分类管理
表如何存储二级分类
一级分类 parentId 0
二级分类 parentId 1
id | title | parentId |
---|---|---|
1 | 前端 | 0(一级分类) |
11 | vue | 1 (对应前端的id,二级分类) |
100 | 组件 | 11 (对应vue的id,三级分类) |
EasyExcel介绍
阿里巴巴开源Excel处理框架,简单、节省内存(一行一行读取)
本质是对poi的封装
EasyExcel进行写的操作
(1)引入easyExcel的依赖version-2.1.1 --edu中
注意:需要引入poi的依赖 version-3.17 注意版本对应
<dependencies>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.1.1</version>
</dependency>
</dependencies>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>3.17</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>3.17</version>
</dependency>
(2)创建实体类对应Excel中的数据
设置Excel表头名称 注解 @ExcelProperty(“XXXX”)
@Data
public class ExcelData {
//设置excel表头名称,index设置列对应的属性
@ExcelProperty(value = "学生编号",index = 0)
private Integer sno;
@ExcelProperty(value = "学生姓名",index = 1)
private String sname;
}
(3)实现Excel的写操作
//设置写入文件夹地址和Excel文件名称
String filename = “F:\write.xlsx”;
//调用easyExcel里的方法实现写操作
Excel.write(文件路径名称,实体类的class).sheet(“XXX”).doWrite(List集合)
list集合是写入的数据
public static void main(String[] args) throws Exception {
//实现excel写的操作
// 设置写入文件夹地址和excel文件名
String fileName = "D:\\java.xlsx";
// 这里 需要指定写用哪个class去写,然后写到第一个sheet,名字为模板 然后文件流会自动关闭
//write方法两个参数 ,第一个参数文件路径名称,第二个参数实体类class
EasyExcel.write(fileName, ExcelData.class).sheet("第一个sheet").doWrite(data());
}
//循环设置要添加的数据,最终封装到list集合中
private static List<ExcelData> data() {
List<ExcelData> list = new ArrayList<ExcelData>();
for (int i = 0; i < 10; i++) {
ExcelData data = new ExcelData();
data.setSno(i);
data.setSname("lucy"+i);
list.add(data);
}
return list;
}
EasyExcel进行读的操作
(1)创建和Excel对应实体类,标记对应列关系index
@Data
public class ExcelData {
//设置excel表头名称,index设置列对应的属性
@ExcelProperty(value = "学生编号",index = 0)
private Integer sno;
@ExcelProperty(value = "学生姓名",index = 1)
private String sname;
}
(2)创建监听进行Excel文件读取,监听类继承AnalysisEventListener<泛型>
一行一行读取Excel内容invoke()
读取表头的方法invkeHeadMap()
读取完成之后的事情doAfterAllAnalysed()
package com.atguigu.excel;
import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.alibaba.excel.exception.ExcelDataConvertException;
import com.sun.scenario.effect.impl.sw.sse.SSEBlend_SRC_OUTPeer;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
//创建读取excel监听器
public class ExcelListener extends AnalysisEventListener<ExcelData> {
//创建list集合封装最终的数据
List<ExcelData> list = new ArrayList<ExcelData>();
private final ArrayList<ExcelData> ExcelData = new ArrayList<ExcelData>();
//一行一行去读取excle内容
@Override
public void invoke(ExcelData user, AnalysisContext analysisContext) {
System.out.println("***"+user);
list.add(user);
}
//读取excel表头信息
@Override
public void invokeHeadMap(Map<Integer, String> headMap, AnalysisContext context) {
System.out.println("表头信息:"+headMap);
}
//读取完成后执行
@Override
public void doAfterAllAnalysed(AnalysisContext analysisContext) {
}
}
(3)最终方法的调用
EasyExcel.read(filename,实体类.class,监听器).sheet.doRead()
public static void main(String[] args) {
String fileName = "D:\\java.xlsx";
// 这里 需要指定读用哪个class去读,然后读取第一个sheet 文件流会自动关闭
EasyExcel.read(fileName, ExcelData.class, new ExcelListener()).sheet().doRead();
}
添加课程分类功能
(1)引入easyExcel依赖
(2)使用代码生成器,生成课程分类的代码
(3)创建实体类和Excel进行对应
@Data
public class SubjectData {
//一级分类
@ExcelProperty(index = 0)
private String oneSubjectName;
//二级分类
@ExcelProperty(index = 1)
private String twoSubjectName;
}
(4)监听器
注意:不能把监听器交给spring管理
package com.atguigu.eduservice.listener;
import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.atguigu.eduservice.entity.EduSubject;
import com.atguigu.eduservice.entity.excel.SubjectData;
import com.atguigu.eduservice.service.EduSubjectService;
import com.atguigu.servicebase.exceptionhandler.GuliException;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
/**
* @author XueYanhong
* @description
* @date 2022/5/2 9:25
*/
//没有交给spring管理,不能注入东西
public class SubjectExcelListener extends AnalysisEventListener<SubjectData> {
//因为SubjectExcelListener不能交给spring管理,需要自己new,不能注入其他对象
//不能实现数据库操作,解决:new 监听器的时候就手动注入,自己写有参构造
public EduSubjectService subjectService;
public SubjectExcelListener() {
}
public SubjectExcelListener(EduSubjectService subjectService) {
this.subjectService = subjectService;
}
//读取Excel文件内容,一行一行读取
@Override
public void invoke(SubjectData subjectData, AnalysisContext analysisContext) {
if (subjectData == null) { //文件数据为空,没有内容
throw new GuliException(2001,"文件数据为空");
}
//一行一行读取,每次读取都有两个值,第一个值是一级分类,第二个值是二级分类
//判断一级是否重复
EduSubject existOneSubject = this.existOneSubject(subjectService, subjectData.getOneSubjectName());
if (existOneSubject == null) {//没有相同一级分类,进行添加
existOneSubject = new EduSubject();
existOneSubject.setParentId("0");
existOneSubject.setTitle(subjectData.getOneSubjectName());//一级分类名称
subjectService.save(existOneSubject);
}
//获取一级分类的id值
String pid = existOneSubject.getId();
//判断二级分类
//判断二级分类是否重复
EduSubject existTwoSubject = this.existTwoSubject(subjectService, subjectData.getTwoSubjectName(), pid);
if (existTwoSubject == null) {
existTwoSubject = new EduSubject();
existTwoSubject.setParentId(pid);
existTwoSubject.setTitle(subjectData.getTwoSubjectName());//二级分类名称
subjectService.save(existTwoSubject);
}
}
//判断一级分类不能重复添加
private EduSubject existOneSubject(EduSubjectService subjectService,String name) {
QueryWrapper<EduSubject> wrapper = new QueryWrapper<>();
wrapper.eq("title",name);
wrapper.eq("parent_id","0");
EduSubject oneSubject = subjectService.getOne(wrapper);
return oneSubject;
}
//判断二级分类不能重复添加
private EduSubject existTwoSubject(EduSubjectService subjectService,String name,String pid) {
QueryWrapper<EduSubject> wrapper = new QueryWrapper<>();
wrapper.eq("title",name);
wrapper.eq("parent_id",pid);
EduSubject twoSubject = subjectService.getOne(wrapper);
return twoSubject;
}
@Override
public void doAfterAllAnalysed(AnalysisContext analysisContext) {
}
}
添加课程分类 ----前端
(1)添加课程分类管理路由
{
path: '/subject',
component: Layout,
redirect: '/subject/list',
name: '课程分类管理',
meta: { title: '课程分类管理', icon: 'el-icon-s-help' },
children: [
{
path: 'list',
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)创建课程分类页面,修改路由对应的页面路径
(3)添加课程分类页面 实现效果
添加上传组件实现
// ref 组件唯一标识 auto-upload 自动上传
// disabled 按钮是否可以点,不可点第二次
// limit 目前可以上传的文件数量
// accept=“application/vnd.ms-excel” ms-excel目前只能上传微软excel文件
表单提交,固定写法
submitUpload() {
this.importBtnDisabled = true;
this.loading = true;
// 原生 js: document.getElementById("upload").submit()
this.$refs.upload.submit();
},
完整代码
<template>
<div class="app-container">
<el-form label-width="120px">
<el-form-item label="信息描述">
<el-tag type="info" style="margin-right: 8px">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/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"
>上传到服务器</el-button>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Save',
data() {
return {
BASE_API: process.env.VUE_APP_BASE_API, // 接口API地址
// OSS_PATH: process.env.OSS_PATH, // 阿里云OSS地址
// fileUploadBtnText: '上传到服务器', // 按钮文字
importBtnDisabled: false, // 按钮是否禁用,
loading: false
}
},
created() {
},
methods: {
// 点击按钮上传文件到接口里面
submitUpload() {
this.importBtnDisabled = true
this.loading = true
// js: document.getElementById("upload").submit()
this.$refs.upload.submit()
},
// 上传成功
fileUploadSuccess() {
// 提示信息
this.loading = false
this.$message({
type: 'success',
message: '添加课程分类成功!'
})
// 跳转课程分类列表
// 路由跳转
this.$router.push({ path: '/subject/list' })
},
// 上传失败
fileUploadError() {
// 提示信息
this.loading = false
this.$message({
type: 'error',
message: '添加课程分类失败!'
})
}
}
}
</script>
<style scoped>
</style>
课程分类列表(树形)
后端
1.参考tree模块,整合前端
创建一个接口,根据分类要求的格式返回数据
[
{
id: 1,
label: '一级分类名称1',
children: [{
id: 2,
label: '二级分类1-1'
}, {
id: 3,
label: '二级分类1-2'
}]
},{
id: 2,
label: '一级分类名称2',
children: [{
id: 4,
label: '二级分类2-1'
}, {
id: 5,
label: '二级分类2-2'
}]
}
]
2.返回这种数据格式
(1)针对返回数据创建对应的实体类
创建两个实体类,一级和二级分类
一级分类实体类
package com.atguigu.eduservice.entity.subject;
import lombok.Data;
@Data
public class OneSubject {
private String id;
private String title;
}
二级分类实体类
package com.atguigu.eduservice.entity.subject;
import lombok.Data;
@Data
public class TwoSubject {
private String id;
private String title;
}
(2)在两个实体类之间表示关系(一个一级分类有多个二级分类)
@Data
public class OneSubject {
private String id;
private String title;
//一个一级分类中有多个二级分类
private List<TwoSubject> children = new ArrayList<>();
}
controller层
//课程分类列表(树形)
@GetMapping("getAllSubject")
public R getAllSubject() {
//list集合中的泛型是一级分类
List<OneSubject> list = subjectService.getAllSubject();
return R.ok().data("list",list);
}
(3)编写具体封装代码serviceImpl
service
//课程分类列表(树形)
List<OneSubject> getAllSubject();
serviceImpl
//课程分类列表(树形)
@Override
public List<OneSubject> getAllSubject() {
//1查询出所有的一级分类 parent_id = 0
QueryWrapper<EduSubject> oneWrapper = new QueryWrapper<>();
oneWrapper.eq("parent_id","0");
//List<EduSubject> oneSubject = this.list(oneWrapper);
//继承了servceImpl里面注入了baseMapper,可以通过baseMapper去查询数据库,也可以自身用this查
List<EduSubject> oneSubjectList = baseMapper.selectList(oneWrapper);
//2查询出所有的二级分类 parent_id != 0
QueryWrapper<EduSubject> twoWrapper = new QueryWrapper<>();
twoWrapper.ne("parent_id","0");
List<EduSubject> twoSubjectList = baseMapper.selectList(twoWrapper);
//创建list集合用于存储最终数据
List<OneSubject> finalSubjectList = new ArrayList<>();
//3封装一级分类
//遍历查询一级分类,获取每一个一级对象的值,封装到要求的list集合
//在一级分类中遍历循环二级分类
for (int i = 0; i < oneSubjectList.size(); i++) { //遍历oneSubjectList集合
//得到oneSubjectList中的每一个对象
EduSubject eduSubject = oneSubjectList.get(i);
//把eduSubject里的值获取出来,放到oneSubject对象里面
OneSubject oneSubject = new OneSubject();
//oneSubject.setId(eduSubject.getId());
//oneSubject.setTitle(eduSubject.getTitle());
//可以用工具类来操作,更简单
BeanUtils.copyProperties(eduSubject,oneSubject);
//多个oneSubject放到finalSubjectList中
finalSubjectList.add(oneSubject);
//创建list集合封装每一个一级分类的二级分类
List<TwoSubject> twoFinalSubjectList = new ArrayList<>();
//4封装二级分类
//遍历查询二级分类,获取每一个二级对象的值,封装到一级分类的list集合
for (EduSubject tSubject: twoSubjectList) {
//把tSubject的值复制到twoSubject对象里面,然后放入twoFinalList里面
//判断这个二级分类属于哪个一级分类,如果在这个一级分类,就加入进去
if (tSubject.getParentId().equals(oneSubject.getId())){
TwoSubject twoSubject = new TwoSubject();
BeanUtils.copyProperties(tSubject,twoSubject);
twoFinalSubjectList.add(twoSubject);
}
}
//把一级下面所有二级分类放到一级分类里面
oneSubject.setChildren(twoFinalSubjectList);
}
return finalSubjectList;
}
前端
1.路由router/index.js
{
path: '/subject',
component: Layout,
redirect: '/subject/list',
name: '课程分类管理',
meta: { title: '课程分类管理', icon: 'el-icon-s-help' },
children: [
{
path: 'list',
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.创建api/edu/subject
import request from '@/utils/request'
export default {
// 课程分类列表
getSubjectList() {
return request({
url: `/eduservice/subject/getAllSubject`,
method: 'get'
})
}
}
2.views/subject/list.vue
注意:label要改成title,和后端保持一致label: 'title' // 数据分类名称的名字
,其他地方也改成title
<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.indexOf(value) !== -1
}
}
}
</script>
优化前端过滤功能
不区分大小写
增加toLowerCase() 变成小写比较
filterNode(value, data) {
if (!value) return true
return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
}