谷粒商城实战笔记-136-商城业务-首页-整合thymeleaf渲染首页
文章目录
- 一，Thymeleaf 简介
- 二，Thymeleaf 的使用步骤
- 1，引入Thymeleaf依赖
- 2，关闭Thymeleaf缓存
- 3，将静态文件拷贝到resources的static文件夹下
- 4，将index.html拷贝到resources的templates文件夹下
- 三， 使用热加载工具spring-boot-devtools
- 1，引入devtools依赖
- 2，ctrl+shift+f9 编译静态资源
前面学习后台管理系统是前后端分类的模式，前端发出请求，后端接收请求并响应，前端接收响应后解析数据、渲染页面。
商城后续的前后端开发模式不再是前后端分类的模式了，而是使用Thymeleaf来完成页面的渲染。
前后端的请求都通过Controller，Controller中完成数据的封装，响应一个字符串，Thymeleaf将数据填充到html页面中，将html页面返回给浏览器进行渲染。前端代码和后端代码在同一个工程。
一，Thymeleaf 简介
想象一下，你正在做一个网站，需要向用户展示一些信息，比如用户的姓名或者一些产品列表。
通常情况下，除了编写 HTML 代码来构建网页的外观，但是还需要一些方式来把服务器上的数据放到这些 HTML 页面上。
这就是 Thymeleaf 发挥作用的地方。
Thymeleaf 是一种工具，它可以将数据动态地填入到 HTML 页面中。
下面是一个简单的例子来说明它是怎么工作的：
-
编写 HTML 模板：
- 首先写好一个 HTML 文件，就像平常一样，但是在这个文件中，用一些特殊的标签来告诉 Thymeleaf 在哪里放置数据。
- 例如，
<p th:text="${greeting}">Hello World!</p>这样的代码，“th:text” 是 Thymeleaf 的特殊标签，它告诉 Thymeleaf 把变量 “greeting” 的值放在这个段落里。
-
准备数据：
- 在服务器端（也就是你的 Java 代码），你准备好了要显示的数据，比如 “
greeting = 'Hello, John!'”。
- 在服务器端（也就是你的 Java 代码），你准备好了要显示的数据，比如 “
-
渲染页面：
- 当用户访问你的网站时，Thymeleaf 读取 HTML 模板，并用实际的数据替换掉那些特殊标签。
- 结果就是，用户看到的是
<p>Hello, John!</p>而不是<p th:text="${greeting}">Hello World!</p>。
这样，就有了一个动态的网页，它可以根据服务器上的数据变化而变化，但是仍然可以像平常一样编写 HTML 代码。
总结起来，Thymeleaf 就是用来把数据动态地填充到 HTML 页面中的工具。
二，Thymeleaf 的使用步骤
1，引入Thymeleaf依赖
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>
2，关闭Thymeleaf缓存
在配置文件中增加如下配置，关闭Thymeleaf缓存，关闭的原因是在开发的过程中，可能随时修改html页面，如果有缓存，就不能及时的看到最新的效果。
spring:thymeleaf:cache: false
3，将静态文件拷贝到resources的static文件夹下
课程已经提供了前端的基本代码，把静态文件如js和css拷贝到资源目录徐爱的static目录下。
4，将index.html拷贝到resources的templates文件夹下
三， 使用热加载工具spring-boot-devtools
因为我们采用的前后端一体的开发模式，前端页面会频繁修改，如果每次修改都要重启服务，效率就会受到很大影响。
可以引入spring-boot-devtools这个开发工具，避免每次修改都要重启服务。
1，引入devtools依赖
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency>
引入了devtools的服务，在Idea的Services模块下，服务名后会有标识。
2，ctrl+shift+f9 编译静态资源
修改静态资源后，使用ctrl+shift+f9编译静态资源，之后浏览器请求的资源就是最新的了。