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

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

什么是三级分类?


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 端、内置全局数据回收站和字段级数据修改保护、自动注册路由、无限子级权限管理等,无需授权即可免费商用,希望能帮助大家实现快速开发。
723 0
|
容器
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
3211 0
|
6月前
|
人工智能 测试技术 API
智谱旗舰模型GLM-4.6开源发布,代码能力对齐Claude Sonnet 4
作为GLM系列的最新版本,GLM-4.6是系列最强的代码Coding模型(较GLM-4.5提升27%)
2059 14
|
监控 网络协议 Linux
状态监控与流量分析
本内容介绍了常用的网络状态信息显示与监控工具及其功能。包括`ifconfig`和`ip`用于配置和查看网络接口参数;`netstat`与`ss`用于显示网络连接和套接字信息;以及多种实时流量监控工具,如`iftop`、`nload`、`vnstat`和`bmon`,它们可分别用于带宽使用情况、历史流量统计及多窗口界面下的详细流量分析。这些工具为网络诊断和性能优化提供了重要支持。
339 3
|
JSON 测试技术 定位技术
【好用的个人工具】在Docker环境下部署Simple mind map思维导图工具
【5月更文挑战第16天】在Docker环境下部署Simple mind map思维导图工具
1040 2
【好用的个人工具】在Docker环境下部署Simple mind map思维导图工具
|
数据采集 机器学习/深度学习 人工智能
|
机器学习/深度学习 人工智能 自然语言处理
|
Devops 网络安全 Go
阿里云云效操作报错合集之遇到错误代码:SYSTEM_FORBIDDEN_ERROR,状态码为403,该怎么办
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
存储 缓存 运维
从Redis7.0发布看Redis的过去与未来
经历接近一年的开发、三个候选版本,Redis 7.0终于在2022年4月27日正式发布,这是Redis历史上改变最大的一个大版本。Redis 7.0包含50多个新命令及大量核心特性。不仅能够解决用户使用中的诸多问题也进一步拓展了Redis的使用场景。阿里云作为Redis开源社区的核心贡献者,参与了Redis 7.0的Roadmap制定并实现了Redis 7.0中的部分重要核心特性。本文将介绍Redis 7.0的核心特性及Redis开源社区的最新消息,然后让我们一起打开脑洞,探索Redis的未来。
2947 155
|
边缘计算 人工智能 运维
阿里云发布IoT数智底座3.0 提升物联网应用开发效率
IoT数智底座3.0,全面升级了云网边端安全一体化架构,更新了工业、城市、农业和消费四大行业的应用引擎。
1807 1
阿里云发布IoT数智底座3.0 提升物联网应用开发效率