谷粒商城高级篇-首页-整合thymeleaf渲染三级类目

目录

整合Thymeleaf渲染首页

整合dev-tools渲染一级分类数据

渲染二级三级分类数据

---

整合Thymeleaf渲染首页

谷粒商城前端的代码请自行下载

为了分担服务的压力，将服务的静态资源部署到nginx中从而实现动静分离

最终目的 ：

 整合thymeleaf

①product服务中导入thymeleaf依赖

<!--导入thymeleaf依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

② 配置thymeleaf，关闭缓存，为了在生产环境下可以实时看到数据

③ 创建一个web包用于编写页面跳转的controller，可以将之前的controller包更名为app

④将首页资源中的index文件夹复制到static文件夹下，将index.html复制到templates文件夹下

 Springboot中的static用于存放静态资源

 

 SpringBoot静态资源的访问

SpringBoot自动配置，将默认访问index.html

自动加载资源的原理如下： 

ctrl+n

 找到WelcomePageHandlerMapping中的getStaticPathPattern()方法，点击进去

 点击staticPathPattern

 

 

 

所有访问/**的路径都会去类路径下的 /META-INF/resources/ 、/resources/ 、/static/ 、/public/ 下查找

整合dev-tools渲染一级分类数据

配置访问localhost:10000/或者localhost:10000/index.html来到首页的映射

GetMapping中默认存放是一个数组，可以多路径映射

由于thymeleaf的默认前缀为：classpath:/tempaltes/ ,默认后缀为：.html

视图解析器会进行一个拼接：默认前缀+"返回值"+默认后缀

查出一级类目，使用Model对象封装

thymeleaf官方地址：Thymeleaf

将thymeleaf的使用文档pdf下载下来

thymeleaf的使用步骤： 

①加入名称空间

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

 取出使用thymeleaf取出一级分类，取值表达式在第四章

 

 重启服务查看

由于更新页面每次重启非常麻烦，因此，页面修改时不重启服务达到实时更新

①导入dev-tools依赖

  <!--导入dev-tools依赖-->
<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <optional>true</optional>
</dependency>

 细节：optional一定写true，这才把工具真正的导入进来了

加入了这个工具都会有如下标签：

②ctrl+F9 或 ctrl+shift+F9 重新自动编辑页面，前提：thymeleaf的缓存关闭否则无效；代码配置，推荐重启

index.html的类目是写死的，现在需要动态的取出一级类目，需要用到thymeleaf的遍历，遍历在使用文档的第六章 

出现问题：页面不显示数据

出现原因：没有遍历

解决方案如下：

将key改为categorys

自定义属性存放catId，thymeleaf的自定义属性赋值在pdf的第五章

渲染二级三级分类数据

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

调用的是js文件夹下的catelogLoader.js

请求的是json文件下的catalog.json数据 

使用json在线转化工具将json数据转化为对象 

第一级的对象是String，Object，其中String是一级类目的catId

 第二级对象以及第三级对象

 编写Vo

编写接口 

 

查看结果

复制数据将其转化为对象