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": \[\]

}

]

}

}

相关推荐
2501_9339232518 小时前
统一功能:统一返回格式+统一异常处理
spring·java-ee·状态模式·统一数据返回
小肥君1 天前
前端测试websocket
前端·websocket·状态模式
Wang's Blog1 天前
Java框架快速入门: Spring Security+OAuth2之前后端分离多模块工程配置
java·spring·状态模式
weixin_493503674 天前
Vue3 前端生成 PDF:会员证书与活动签到表的三种打印方案与踩坑记录
前端·pdf·状态模式
晴天164 天前
前端跨域方案解析:JSONP 的原理、实战与演进
前端·状态模式
晴天164 天前
HTML iframe 标签全面解析:原理、属性、实战场景与最佳实践
前端·html·状态模式
nvd115 天前
深入现代 Web 鉴权架构:网关统一代理 (Forward-Auth) vs 前端持有 JWT 的终极选型与边缘同域实践
前端·架构·状态模式
你别说话了5 天前
Vue3对接AI Agent: 封装流式对话组件
状态模式
陈驰_05045 天前
需求列表接口 422 Unprocessable Entity 排查与修复全记录
状态模式·fastapi·vue 3