版权声明:转载请注明出处 https://blog.csdn.net/fastlearn/article/details/83041651
原文地址:Spring Boot 集成 Thymeleaf 模板引擎
Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。
Thymeleaf 的主要目标是为开发带来优雅的模板 - Thymeleaf 模板对于浏览器来说这些非HTML标准属性在渲染的时候会被浏览器自动忽略,因此对于前端人员来说它就是一个静态页面;而后端通过 Thymeleaf 引擎渲染的时候这些标签就会被识别,因此对于后端人员来说它又是动态页面!。
快速开始
在 pom.xml 文件添加 Thymeleaf 依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
spring-boot-starter-thymeleaf
中包含了 spring-boot-starter-web
可以将其删除。
Thymeleaf 相关配置
Thymeleaf 的模板文件默认在 resources/templates 下,spring.thymeleaf.cache=false
开发时关闭缓存,要不然修改模板文件不能及时生效,需要重启,生产环境可以打开,
# thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.check-template-location=true
spring.thymeleaf.content-type=text/html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
以上都是默认配置,当然也可以自定义配置。
编写 controller
@Controller
public class ThymeleafController {
@GetMapping(value = {"", "/", "index"})
public String index(Model model, HttpSession session) {
// 网站标题
model.addAttribute("title", "dali`s Blogs");
// 登陆用户
User loginUser = new User(2L, "admin", "admin", LocalDateTime.now());
session.setAttribute("login_user", loginUser);
model.addAttribute("count", 20);
// 用户列表
List<User> users = new ArrayList<>();
users.add(new User(1L, "admin", "admin", LocalDateTime.now()));
users.add(new User(2L, "dali", "dali", LocalDateTime.now()));
model.addAttribute("users", users);
return "index";
}
}
编写 Thymeleaf 模板文件
在 resources/templates
目录新建 index.html
文件
<!DOCTYPE html>
<!-- 添加命名空间 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<!-- 变量表达式 ${...} -->
<!-- 使用th:text标签的值替换title标签里的值,title标签里的值只是为了给前端开发时做展示用的.这样很好的做到了前后端分离 -->
<!-- 获取session、request中的数据 -->
<title th:text="${title}">default title</title>
</head>
<body>
<!-- 消息表达式 #{...}, 也称为文本外部化、国际化或i18n -->
<span th:text="#{header.address.city}">...</span>
<!-- ${session.login_user} 获取session的数据-->
<div th:object="${session.login_user}">
<span th:text="*{userId}">...</span>
<span th:text="*{username}">...</span>
<span th:text="*{password}">...</span>
<span th:text="*{createTime}">...</span>
</div>
<!-- 链接表达式@{…},类似的标签有:th:href和th:src -->
<a th:href="@{https://rengangli.com}">绝对路径</a>
<a th:href="@{/}">相对路径</a>
<a th:href="@{css/bootstrap.min.css}">Content路径,默认访问resources/static下的css文件夹</a>
<!-- 字符串替换 -->
<label th:text="'Welcome, ' + ${session.login_user.username} + '!'"></label>
<!-- 运算符 +,-,*,/,% -->
<label th:with="isEven=(${count} % 2 == 0)"></label>
<!-- 条件 -->
<!-- 标签只有在th:if中条件成立时才显示, th:unless相反,不成立时才显示 -->
<a th:href="@{/login}" th:if="${session.login_user == null}">Login</a>
<!-- 条件语句 -->
<div th:switch="${session.login_user.username}">
<p th:case="'admin'">login_user is an <span th:text="${session.login_user.username}"></span></p>
<p th:case="'dali'">login_user is an <span th:text="${session.login_user.username}"></span></p>
<!-- 默认属性default可以用*表示 -->
<p th:case="*">login_user is null</p>
</div>
<!-- 遍历 -->
<table>
<tr th:each="user : ${users}">
<td th:text="${user.userId}">id</td>
<td th:text="${user.username}">name</td>
<td th:text="${user.password}">name</td>
<td th:text="${user.createTime}">name</td>
</tr>
</table>
<!-- Utility对象,内置于Context中,可以通过#直接访问,包含#dates、#calendars、#numbers、#strings... -->
<label th:text="${#dates.createNow()}">#dates</label>
<!-- js中的表达式 -->
<script th:inline="javascript">
var ctx = /*[[@{/}]]*/ '';
var loginUser = /*[[${session.login_user.username}]]*/ '';
alert(ctx);
alert(loginUser);
</script>
</body>
</html>
效果图
参考资料
https://docs.spring.io/spring-boot/docs/1.5.16.RELEASE/reference/htmlsingle/
https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html
本文所有代码放在 Github 上,地址:spring-boot-thymeleaf