完成数据的页面展示
1. 创建 Spring Boot 项目，引入 Thymeleaf 依赖
<img src=”./images/image-20191230160651703.png” alt=”image-20191230160651703″ />
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″ />
可以看出，登录页面 login.html 显示正常，在文件 4 - 3 中使用“th:*”相关属性引入的静态文件生效，并且在页面底部动态显示了当前日期 2019-2020，而不是文件中的静态数字 2019-2020。这进一步说明了 Spring Boot 与 Thymeleaf 整合成功，完成了静态资源的引入和动态数据的显示
这些内容，是从拉勾教育的《Java 工程师高薪训练营》里学到的，课程内容非常全面，还有拉勾的内推大厂服务，推荐你也看看。