17.商品业务-首页_catelogloader.js-CSDN博客

本文链接：https://blog.csdn.net/xjhqre/article/details/124587632

文章目录

1 整合thymeleaf
2 整合dev-tools
3 渲染一级分类数据
4 渲染二级三级分类数据

1 整合thymeleaf

1、product依赖thymeleaf

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2、把文档里的index文件夹复制到product模块的static目录下，复制index.html到templates目录下，文档可以到尚硅谷微信公众号获取

3、关闭thymeleaf缓存

4、创建web目录

5、修改controller包名为app

6、重启product服务，访问http://localhost:10001/index/css/GL.css

2 整合dev-tools

product依赖dev-tools

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <optional>true</optional>
</dependency>

3 渲染一级分类数据

1、创建IndexController，路径：com/atguigu/gulimall/product/web/IndexController.java

@Controller
public class IndexController {

    @Autowired
    CategoryService categoryService;

    @GetMapping({"/", "/index.html"})
    public String indexPage(Model model) {
        // TODO 查出所有的1级分类
        List<CategoryEntity> categoryEntityList =  categoryService.getLevel_1_Categorys();

        model.addAttribute("categorys", categoryEntityList);
        return "index";
    }
}

2、实现getLevel_1_Categorys方法

@Override
public List<CategoryEntity> getLevel_1_Categorys() {
    List<CategoryEntity> categoryEntityList = baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", 0));
    return categoryEntityList;
}

3、index.html页面引入thymeleaf的命名空间

<html lang="en" xmlns:th="http://www.thymeleaf.org">

4、展示一级分类

<li th:each="category : ${categorys}">
  <a href="#" class="header_main_left_a" th:attr="ctg-data=${category.catId}" ><b th:text="${category.name}">家用电器</b></a>
</li>

5、查看http://localhost:10001/

4 渲染二级三级分类数据

4.1 创建VO

路径：com/atguigu/gulimall/product/vo/Catelog2Vo.java

@NoArgsConstructor
@AllArgsConstructor
@Data
public class Catelog2Vo {
    private String catalog1Id; // 1级分类的id
    private List<Catelog3Vo> catalog3List; //三级子分类
    private String id;
    private String name;

    @NoArgsConstructor
    @AllArgsConstructor
    @Data
    public static class Catelog3Vo{
        private String catalog2Id; // 2级分类的id
        private String id;
        private String name;
    }
}

4.2 controller

在IndexController，创建方法getCatalogJson，路径：com/atguigu/gulimall/product/web/IndexController.java

@ResponseBody
@GetMapping("/index/catalog.json")
public Map<String, List<Catelog2Vo>> getCatalogJson(){
    Map<String, List<Catelog2Vo>> catalogJson =  categoryService.getCatalogJson();
    return catalogJson;
}

4.3 service

实现getCatalogJson方法

@Override
public Map<String, List<Catelog2Vo>> getCatalogJson() {
    // 查出所有的一次分类
    List<CategoryEntity> level_1_categorys = getLevel_1_Categorys();

    // 封装数据，构造一个以1级id为键，2级分类列表为值的map
    Map<String, List<Catelog2Vo>> collect = level_1_categorys.stream().collect(Collectors.toMap(k -> k.getCatId().toString(), l1 -> {
        // 根据一级分类id查找二级分类
        List<CategoryEntity> level_2_categorys = baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", l1.getCatId()));

        // 封装结果为Catelog2Vo的集合
        List<Catelog2Vo> catelog2Vos = null;

        if (level_2_categorys != null) {

            // 把 level_2_categorys 封装为 catelog2Vos
            catelog2Vos = level_2_categorys.stream().map(l2 -> {
                Catelog2Vo catelog2Vo = new Catelog2Vo(l1.getCatId().toString(), null, l2.getCatId().toString(), l2.getName());

                // 根据二级分类id查找三级分类
                List<CategoryEntity> level_3_categorys = baseMapper.selectList(new QueryWrapper<CategoryEntity>().eq("parent_cid", l2.getCatId()));

                // 将 level_3_categorys 封装为 catelog3Vos
                if (level_3_categorys != null) {
                    List<Catelog2Vo.Catelog3Vo> catelog3Vos = level_3_categorys.stream().map(l3 -> {
                        Catelog2Vo.Catelog3Vo catelog3Vo = new Catelog2Vo.Catelog3Vo(l2.getCatId().toString(), l3.getCatId().toString(), l3.getName());
                        return catelog3Vo;
                    }).collect(Collectors.toList());

                    catelog2Vo.setCatalog3List(catelog3Vos);
                }

                return catelog2Vo;

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

        }

        return catelog2Vos;
    }));

    return collect;
}