谷粒商城实战笔记-136-商城业务-首页-整合thymeleaf渲染首页

前面学习后台管理系统是前后端分类的模式，前端发出请求，后端接收请求并响应，前端接收响应后解析数据、渲染页面。

商城后续的前后端开发模式不再是前后端分类的模式了，而是使用Thymeleaf来完成页面的渲染。

前后端的请求都通过Controller，Controller中完成数据的封装，响应一个字符串，Thymeleaf将数据填充到html页面中，将html页面返回给浏览器进行渲染。前端代码和后端代码在同一个工程。

一，Thymeleaf 简介

想象一下，你正在做一个网站，需要向用户展示一些信息，比如用户的姓名或者一些产品列表。

通常情况下，除了编写 HTML 代码来构建网页的外观，但是还需要一些方式来把服务器上的数据放到这些 HTML 页面上。

这就是 Thymeleaf 发挥作用的地方。

Thymeleaf 是一种工具，它可以将数据动态地填入到 HTML 页面中。

下面是一个简单的例子来说明它是怎么工作的：

1. 编写 HTML 模板：

   • 首先写好一个 HTML 文件，就像平常一样，但是在这个文件中，用一些特殊的标签来告诉 Thymeleaf 在哪里放置数据。
   • 例如， <p th:text="${greeting}">Hello World!</p> 这样的代码，“th:text” 是 Thymeleaf 的特殊标签，它告诉 Thymeleaf 把变量 “greeting” 的值放在这个段落里。

2. 准备数据：

   • 在服务器端（也就是你的 Java 代码），你准备好了要显示的数据，比如 “greeting = 'Hello, John!'”。

3. 渲染页面：

   • 当用户访问你的网站时，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编译静态资源，之后浏览器请求的资源就是最新的了。