✅P138_商城业务-首页-渲染二级三级分类数据

开篇

当鼠标移动到一级类目上就要显示它的二级类目、三级类目

调用的是我们引入的首页资源中cfmall-product/src/main/resources/static/index/js文件夹下的catelogLoader.js

通过catelogLoader.js中$.getJSON("index/json/catalog.json",function (data) {...}这行代码可以发现数据是来自

cfmall-product/src/main/resources/static/index/json文件下的catalog.json

所以参考catelog.json封装二级三级分类数据VO

---

封装二级三级分类数据VO

Catelog2Vo.java代码如下：

cfmall-product/src/main/java/com/gyz/cfmall/product/vo/Catelog2Vo.java

package com.gyz.cfmall.product.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;


/**
* @Description
* @Author GongYuZhuo
* @Version 1.0.0
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Catelog2Vo {
    
    /**
    * 一级父分类的id
    */
    private String catalog1Id;
    
    /**
    * 三级子分类
    */
    private List<Category3Vo> catalog3List;
    private String id;
    private String name;
    
    
    /**
    * 三级分类vo
    */
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public static class Category3Vo {
        
        /**
        * 父分类、二级分类id
        */
        private String catalog2Id;
        private String id;
        private String name;
    }
    
}

---

代码实现

cfmall-product/src/main/java/com/gyz/cfmall/product/web/IndexController.java

    @Resource
    CategoryService categoryService;

	@GetMapping(value = "/index/catalog.json")
    @ResponseBody
    public Map<String, List<Catelog2Vo>> getCatalogJson() {

        Map<String, List<Catelog2Vo>> catalogJson = categoryService.getCatalogJson();
        return catalogJson;
    }

cfmall-product/src/main/java/com/gyz/cfmall/product/service/impl/CategoryServiceImpl.java

直接写优化后的逻辑，不按这一节讲的在stream里查询多次数据库

    @Override
    public Map<String, List<Catelog2Vo>> getCatalogJson() {
        //将数据库的多次查询变为一次
        List<CategoryEntity> selectList = this.baseMapper.selectList(null);

        //1、查出所有分类
        //1、1）查出所有一级分类
        List<CategoryEntity> level1Categorys = getParent_cid(selectList, 0L);

        //封装数据
        Map<String, List<Catelog2Vo>> parentCid = level1Categorys.stream().collect(Collectors.toMap(k -> k.getCatId().toString(), v -> {
            //1、每一个的一级分类,查到这个一级分类的二级分类
            List<CategoryEntity> categoryEntities = getParent_cid(selectList, v.getCatId());

            //2、封装上面的结果
            List<Catelog2Vo> catelog2Vos = null;
            if (categoryEntities != null) {
                catelog2Vos = categoryEntities.stream().map(l2 -> {
                    Catelog2Vo catelog2Vo = new Catelog2Vo(v.getCatId().toString(), null, l2.getCatId().toString(), l2.getName().toString());

                    //1、找当前二级分类的三级分类封装成vo
                    List<CategoryEntity> level3Catelog = getParent_cid(selectList, l2.getCatId());

                    if (level3Catelog != null) {
                        List<Catelog2Vo.Category3Vo> category3Vos = level3Catelog.stream().map(l3 -> {
                            //2、封装成指定格式
                            Catelog2Vo.Category3Vo category3Vo = new Catelog2Vo.Category3Vo(l2.getCatId().toString(), l3.getCatId().toString(), l3.getName());

                            return category3Vo;
                        }).collect(Collectors.toList());
                        catelog2Vo.setCatalog3List(category3Vos);
                    }

                    return catelog2Vo;
                }).collect(Collectors.toList());
            }

            return catelog2Vos;
        }));

        return parentCid;
    }

---

删除原catelog.json

1、将原catelog.json写死的分类数据删除

2、修改：cfmall-product/src/main/resources/static/index/js/catalogLoader.js 获取json数据的路径

---

测试

将数据表pms_category中的电子书修改为电子书111

页面显示如下，二级三级分类数据成功渲染