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

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

什么是三级分类?


image.png


后端思路


提供接口


写接口就是写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.png

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

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

二、controller

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

三、测试

image.png


前端思路


关闭es6代码检查


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

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

image.png


为商品系统新增侧边导航


image.png


renren-fast-vue路由规范


image.png

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

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

引入ElementUI

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

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

实现效果如下图:

image.png



相关文章
|
JavaScript 数据可视化 PHP
想要快速开发一个系统?选 BuildAdmin 就对了!
Part1介绍 基于 Vue3.3 + ThinkPHP8 + TypeScript + Vite + Pinia + Element Plus 等流行技术栈的后台管理系统,自适应多端、可视化 CRUD 代码生成、自带 WEB 终端、同时提供 Web、WebNuxt、Server 端、内置全局数据回收站和字段级数据修改保护、自动注册路由、无限子级权限管理等,无需授权即可免费商用,希望能帮助大家实现快速开发。
416 0
|
自然语言处理 算法 Java
地址描述转换为坐标点不使用API,有什么转换的方法?
地址描述转换为坐标点不使用API,有什么转换的方法?
692 64
|
SQL 前端开发 Java
三级分类的数据表设计和构造API数据
三级分类的数据表设计和构造API数据
222 0
|
人工智能 开发者 Python
python读取word文档 | AI应用开发
在RAG系统中,构建知识库时需读取多种外部文档,其中Word文档较为常见。本文介绍如何使用`python-docx`库读取Word文档(.docx格式)中的标题、段落、表格和图片等内容。首先通过`pip install python-docx`安装库,然后利用提供的接口提取所需信息。尽管该库功能强大,但在识别标题样式时需自定义逻辑,并且仅提供图片的URI而非直接加载。示例代码展示了读取文本、识别标题、读取表格及获取图片URI的方法。【10月更文挑战第2天】
656 2
|
存储 关系型数据库 MySQL
Mysql行格式DYNAMIC和COMPACT区别
总之,选择哪种行格式取决于具体的应用场景,如数据类型分布、读写比例、存储与性能需求等。在处理大量文本或二进制数据且对存储空间敏感的应用中,DYNAMIC格式可能是更好的选择;而对于混合型数据且对读取性能有一定要求的场景,COMPACT格式可能更合适。在设计数据库时,评估这些因素并进行适当测试,可以帮助确定最适合的行格式。
713 0
|
数据采集 机器学习/深度学习 人工智能
|
JSON 测试技术 定位技术
【好用的个人工具】在Docker环境下部署Simple mind map思维导图工具
【5月更文挑战第16天】在Docker环境下部署Simple mind map思维导图工具
765 2
【好用的个人工具】在Docker环境下部署Simple mind map思维导图工具
|
监控 Java 调度
使用Java实现高性能的定时任务调度
使用Java实现高性能的定时任务调度
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
消息中间件 存储 缓存
一文快速掌握高性能内存队列Disruptor
`Disruptor`是LMAX公司开源的高性能内存消息队列,单线程处理能力可达600w订单/秒。本文从使用和设计角度探讨这款Java消息队列。作者sharkChili是Java开发者,CSDN博客专家,Java Guide项目维护者。文章介绍了Disruptor的基础使用,包括前置步骤、消息模型、消息处理器配置、生产者实现,并展示了效果。同时,文章详细解析了Disruptor的工作流程和高效原因,如无锁操作、分支预测和缓存填充。最后,作者提供相关资源链接并邀请读者加入交流群。
3051 0