136-138、商城业务-首页-整合thymeleaf渲染首页、整合dev-tools渲染一级分类数据、渲染二级三级分类数据

136、商城业务-首页-整合thymeleaf渲染首页

项目在发布的时候，将静态资源放到nginx中，实现动静分离

1）在“gulimall-product”项目中导入前端代码

2）引入"thymeleaf"依赖：

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

• 将静态资源放入到static文件夹下，而将index.html放入到templates文件夹下
• 在“application.yml”文件中设置thymeleaf，关闭thymeleaf缓存，路径为：spring.thymeleaf

thymeleaf:
  cache: false

同时将“controller”修改为app，以后它都是被移动APP所访问的包
创建web文件夹

3）启动“gulimall-product”服务，根据路径就可以直接访问静态资源

http://localhost:10000/
在静态资源目录static下的资源，可以直接访问，如：http://localhost:10000/index/css/GL.css

137、商城业务-首页-整合dev-tools渲染一级分类数据

1）dev-tools实现不重启服务实时生效

1. pom添加devtools依赖

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

2. build页面
   执行“ctrl+shift+F9”重新编译页面或“ctrl+F9”重新编译整个项目。
3. 代码配置方面，还是建议重启服务

2）thymeleaf

官方文档


渲染页面index.html页面：
引入Thymeleaf，方便语法提示

xmlns:th="http://www.thymeleaf.org"

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

3）代码

• IndexController

    @GetMapping(value = {"/","index.html"})
    private String indexPage(Model model) {

        //1、查出所有的一级分类
        List<CategoryEntity> categoryEntities = categoryService.getLevel1Categorys();
        model.addAttribute("categories",categoryEntities);

        return "index";
    }

• CategoryServiceImpl

    @Cacheable(value = {"category"},key = "#root.method.name",sync = true)
    @Override
    public List<CategoryEntity> getLevel1Categorys() {
        System.out.println("getLevel1Categorys........");
        long l = System.currentTimeMillis();
        List<CategoryEntity> categoryEntities = this.baseMapper.selectList(
                new QueryWrapper<CategoryEntity>().eq("parent_cid", 0));
        System.out.println("消耗时间："+ (System.currentTimeMillis() - l));
        return categoryEntities;
    }

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

首页加载的数据默认来自于静态资源的“index/catalog.json”，现在需要让它从数据库实时读取

• IndexController

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

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

        return catalogJson;

    }

• CategoryServiceImpl

    @Override
    public Map<String, List<Catelog2Vo>> getCatalogJson() {
        System.out.println("查询了数据库");

        //将数据库的多次查询变为一次
        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;
    }