后台管理系统中的三级分类制作

158 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情

什么是三级分类?

image-20220729172400791

后端思路

提供接口

写接口就是写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()方法是对流进行一个转换的操作,可以将流在转化为集合的形式!

image-20220730174826563 通过这种方式很容易完成一个分类的操作,其中关键点是stream的操作和迭代的操作

迭代如果看不懂的话,通过debug不断调式即可!

二、controller

@RequestMapping("/list")
public R list(){
    List<CategoryEntity> categoryEntityList = categoryService.listWithTree();
    return R.ok().put("data", categoryEntityList);
}

三、测试

image-20220729193937106

前端思路

关闭es6代码检查

不关闭的话,vscode控制台会一直报错

这个谷粒学院项目有讲到过!

image-20220731204741821

为商品系统新增侧边导航

image-20220731105506586

renren-fast-vue路由规范

image-20220731105738477

可以看出,不同的功能在不通的文件夹下不同的页面写不同的vue页面

那么我们写product模块,所以建product文件,然后子菜单就写对应的vue文件即可

引入ElementUI

树形控件考到前端页面,按需求更改

element.eleme.cn/#/zh-CN 寻找树型组件,拷贝修改即可...

实现效果如下图: image.png