easymall----管理后端分类展示

目的效果

建表思路:categoryId是必须的 标识产品本身 因为是树形结构需要与父id联动 所以需要 pcategoryId 产品本身需要名字 所以需要 category_name

所以最基础的字段只需要这三个

表格展示:

sort字段为额外功能 可以通过前端拖动进行人为的排序 可加可不加

controller层:

复制代码
@RequestMapping("/loadCategory")
public ResponseVO loadCategory(){
    SysCategoryQuery sysCategoryQuery = new SysCategoryQuery();
    sysCategoryQuery.setOrderBy("s.sort asc");
    return getSuccessResponseVO(sysCategoryService.findListByParam(sysCategoryQuery));
}

实现层:

复制代码
@Override
public List<SysCategory> findListByParam(SysCategoryQuery param) {
    List<SysCategory> sysCategoryList = this.sysCategoryMapper.selectList(param);
 
    sysCategoryList = convertLine2Tree(sysCategoryList, Constants.ZERO_STR);
    
    return sysCategoryList;

}
private List<SysCategory> convertLine2Tree(List<SysCategory> dataList, String pid) {
    List<SysCategory> children = new ArrayList();
    for (SysCategory m : dataList) {
       if (m.getCategoryId() != null && m.getpCategoryId() != null && m.getpCategoryId().equals(pid)) {
          m.setChildren(convertLine2Tree(dataList, m.getCategoryId()));
          children.add(m);
       }
    }
    return children;
}

这部分需要细讲,要如图展示需要人为对类进行改造,要给sysCategory类加上List<sysCategory> children属性,便于树形展示 convertLine2Tree对查找到的所有数据进行递归 将子分类加入到children中

最后返回(小部分内容):

{

"status": "success",

"code": 200,

"info": "请求成功",

"data": [

{

"categoryId": "10001",

"categoryName": "数码家电",

"pCategoryId": "0",

"sort": 1,

"children": [

{

"categoryId": "20001",

"categoryName": "手机通讯",

"pCategoryId": "10001",

"sort": 1,

"children": []

},

{

"categoryId": "20002",

"categoryName": "电脑办公",

"pCategoryId": "10001",

"sort": 2,

"children": []

},

{

"categoryId": "20003",

"categoryName": "数码影音",

"pCategoryId": "10001",

"sort": 3,

"children": []

},

{

"categoryId": "20004",

"categoryName": "家用电器",

"pCategoryId": "10001",

"sort": 4,

"children": []

}

]

}

}

相关推荐
阿珊和她的猫2 天前
深入理解与使用 Cookie:Web 开发中的关键机制
前端·状态模式
阿珊和她的猫2 天前
实现网页锚点功能的技术指南
前端·javascript·vue.js·状态模式
驴儿响叮当20102 天前
设计模式之状态模式
设计模式·状态模式
小王不爱笑1323 天前
LangChain4j 项目实战--4:硅谷小智(实现流式输出)
状态模式
茶本无香3 天前
设计模式之十六:状态模式(State Pattern)详解 -优雅地管理对象状态,告别繁琐的条件判断
java·设计模式·状态模式
木斯佳4 天前
前端八股文面经大全:字节跳动前端一面(2025-10-09)·面经深度解析
前端·状态模式
山北雨夜漫步6 天前
点评Day06 剩下的卡拉米,我不都写,只写一些新奇的
状态模式
木斯佳7 天前
前端八股文面经大全:京东零售前端实习一面(2026-1-20)·面经深度解析
前端·状态模式·零售
木斯佳7 天前
前端八股文面经大全:字节前端一面(2026-2-1)·面经深度解析
前端·状态模式
前端不太难7 天前
Flutter 页面切换后为什么会“状态丢失”或“状态常驻”?
flutter·状态模式