共计 3134 个字符，预计需要花费 8 分钟才能阅读完成。
4.2.2 基本使用
（1）Thymeleaf 模板基本配置
首先 在 Spring Boot 项目中使用 Thymeleaf 模板，首先必须保证引入 Thymeleaf 依赖，示例代码如下：
“`html
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
“`
其次，在全局配置文件中配置 Thymeleaf 模板的一些参数。一般 Web 项目都会使用下列配置，示例代码如：
“`properties
spring.thymeleaf.cache = true #启用模板缓存
spring.thymeleaf.encoding = UTF-8 #模板编码
spring.thymeleaf.mode = HTML5 #应用于模板的模板模式
spring.thymeleaf.prefix = classpath:/templates/ #指定模板页面存放路径
spring.thymeleaf.suffix = .html #指定模板页面名称的后缀
“`
上述配置中，spring.thymeleaf.cache 表示是否开启 Thymeleaf 模板缓存，默认为 true，在开发过程中通常会关闭缓存，保证项目调试过程中数据能够及时响应；spring.thymeleaf.prefix 指定了 Thymeleaf 模板页面的存放路径，默认为 classpath:/templates/；spring.thymeleaf.suffix 指定了 Thymeleaf 模板页面的名称后缀，默认为.html
（2）静态资源的访问
开发 Web 应用时，难免需要使用静态资源。Spring boot 默认设置了静态资源的访问路径。
使用 Spring Initializr 方式创建的 Spring Boot 项目，默认生成了一个 resources 目录，在 resources 目录中新建 public、resources、static 三个子目录下，Spring boot 默认会挨个从 public、resources、static 里面查找静态资源
##### 4.2.3 完成数据的页面展示
1. 创建 Spring Boot 项目，引入 Thymeleaf 依赖
<img src=”./images/image-20191230160651703.png” alt=”image-20191230160651703″ style=”zoom:67%;” />
2. 编写配置文件
打开 application.properties 全局配置文件，在该文件中对 Thymeleaf 模板页面的数据缓存进行设置
“`properties
# thymeleaf 页面缓存设置（默认为 true），开发中方便调试应设置为 false，上线稳定后应保持默认 true
spring.thymeleaf.cache=false
“`
使用“spring.thymeleaf.cache=false”将 Thymeleaf 默认开启的缓存设置为了 false，用来关闭模板页面缓存
3. 创建 web 控制类
在项目中创建名为 com.lagou.controller 的包，并在该包下创建一个用于前端模板页面动态数据替换效果测试的访问实体类 LoginController
“`java
@Controller
public class LoginController {
/**
* 获取并封装当前年份跳转到登录页 login.html
*/
@RequestMapping(“/toLoginPage”)
public String toLoginPage(Model model){
model.addAttribute(“currentYear”, Calendar.getInstance().get(Calendar.YEAR));
return “login”;
}
“`
toLoginPage() 方法用于向登录页面 login.html 跳转，同时携带了当前年份信息 currentYear。
4．创建模板页面并引入静态资源文件
在“classpath:/templates/”目录下引入一个用户登录的模板页面 login.html
“`html
<!DOCTYPE html>
<html lang=”en” xmlns:th=”http://www.thymeleaf.org”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1,shrink-to-fit=no”>
<title> 用户登录界面 </title>
<link th:href=”@{/login/css/bootstrap.min.css}” rel=”stylesheet”>
<link th:href=”@{/login/css/signin.css}” rel=”stylesheet”>
</head>
<body class=”text-center”>
<!– 用户登录 form 表单 –>
<form class=”form-signin”>
<img class=”mb-4″ th:src=”@{/login/img/login.jpg}” width=”72″ height=”72″>
<h1 class=”h3 mb-3 font-weight-normal”> 请登录 </h1>
<input type=”text” class=”form-control”
th:placeholder=” 用户名 ” required=”” autofocus=””>
<input type=”password” class=”form-control”
th:placeholder=” 密码 ” required=””>
<div class=”checkbox mb-3″>
<label>
<input type=”checkbox” value=”remember-me”> 记住我
</label>
</div>
<button class=”btn btn-lg btn-primary btn-block” type=”submit” > 登录 </button>
<p class=”mt-5 mb-3 text-muted”>© <span th:text=”${currentYear}”>2019</span>-<span th:text=”${currentYear}+1″>2020</span></p>
</form>
</body>
</html>
“`
通过“xmlns:th=”http://www.thymeleaf.org””引入了 Thymeleaf 模板标签；
使用“th:href”和“th:src”分别引入了两个外联的样式文件和一个图片；
使用“th:text”引入了后台动态传递过来的当前年份 currentYear
**5．效果测试 **
<img src=”./images/image-20200103103127625.png” alt=”image-20200103103127625″ style=”zoom:67%;” />
可以看出，登录页面 login.html 显示正常，在文件 4 - 3 中使用“th:*”相关属性引入的静态文件生效，并且在页面底部动态显示了当前日期 2019-2020，而不是文件中的静态数字 2019-2020。这进一步说明了 Spring Boot 与 Thymeleaf 整合成功，完成了静态资源的引入和动态数据的显示
