携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情
什么是三级分类?
后端思路
提供接口
写接口就是写mapper、service、controller的过程
一、service
service
List<CategoryEntity> listWithTree();
实现类
@Override
public List<CategoryEntity> listWithTree() {
List<CategoryEntity> categoryEntityList = baseMapper.selectList(null);
List<CategoryEntity> level1Menus = categoryEntityList.stream().filter(categoryEntity ->
categoryEntity.getParentCid() == 0
).map(menu -> {
menu.setChildren(getChildrens(menu, categoryEntityList));
return menu;
}).sorted((menu1, menu2) -> {
return menu1.getSort() - menu2.getSort();
}).collect(Collectors.toList());
return level1Menus;
}
private List<CategoryEntity> getChildrens(CategoryEntity root, List<CategoryEntity> allList) {
List<CategoryEntity> collect = allList.stream().filter(categoryEntity -> {
return categoryEntity.getParentCid() == root.getCatId();
}).map(categoryEntity -> {
categoryEntity.setChildren(getChildrens(categoryEntity, allList));
return categoryEntity;
}).sorted((menu1, menu2) -> {
return (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
}).collect(Collectors.toList());
return collect;
}
这里的查询用到了Stream流的特性,流程如图
这里查询的关键点是用到了Java1.8中的新特性Stream流的特性,新特性能够将资源转化为流的形式进行操控,用来处理集合数组十分方便!
其中.filter()方法是对流进行过滤一般写筛选条件,被筛选过的流在继续进行其他操作 比如.map()这个方法是对被筛选过后的流进行映射,一般是对属性进行赋值。
.sorted()方法是对流进行一个简单的排序格式固定,返回的结果如果是大于0就是升序排列,大于0就是降序排列!
.collection()方法是对流进行一个转换的操作,可以将流在转化为集合的形式!
通过这种方式很容易完成一个分类的操作,其中关键点是stream的操作和迭代的操作
迭代如果看不懂的话,通过debug不断调式即可!
二、controller
@RequestMapping("/list")
public R list(){
List<CategoryEntity> categoryEntityList = categoryService.listWithTree();
return R.ok().put("data", categoryEntityList);
}
三、测试
前端思路
关闭es6代码检查
不关闭的话,vscode控制台会一直报错
这个谷粒学院项目有讲到过!
为商品系统新增侧边导航
renren-fast-vue路由规范
可以看出,不同的功能在不通的文件夹下,不同的页面写不同的vue页面
那么我们写product模块,所以建product文件,然后子菜单就写对应的vue文件即可
引入ElementUI
树形控件考到前端页面,按需求更改
element.eleme.cn/#/zh-CN 寻找树型组件,拷贝修改即可...
实现效果如下图: