17.商品业务-首页

• 1 整合thymeleaf
• 2 整合dev-tools
• 3 渲染一级分类数据
• 4 渲染二级三级分类数据
• • 4.1 创建VO
  • 4.2 controller
  • 4.3 service
  • 4.4 修改catalogLoader.js
  • 4.5 测试

1、product依赖thymeleaf

    org.springframework.boot
    spring-boot-starter-thymeleaf

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

3、关闭thymeleaf缓存

4、创建web目录

5、修改controller包名为app

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

product依赖dev-tools

    org.springframework.boot
    spring-boot-devtools
    true

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 categoryEntityList =  categoryService.getLevel_1_Categorys();

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

2、实现getLevel_1_Categorys方法

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

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

4、展示一级分类

  家用电器

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

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

@NoArgsConstructor
@AllArgsConstructor
@Data
public class Catelog2Vo {
    private String catalog1Id; // 1级分类的id
    private List 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;
    }
}

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

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

实现getCatalogJson方法

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

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

        // 封装结果为Catelog2Vo的集合
        List 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 level_3_categorys = baseMapper.selectList(new QueryWrapper().eq("parent_cid", l2.getCatId()));

                // 将 level_3_categorys 封装为 catelog3Vos
                if (level_3_categorys != null) {
                    List 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;
}

路径：static/index/js/catalogLoader.js，修改请求地址

重启服务测试