什么是三级分类?
后端思路
提供接口
写接口就是写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寻找树型组件,拷贝修改即可...
实现效果如下图:






