thymeleaf是服务器端的java模板引擎,与传统的jsp不同,thymeleaf可以使用浏览器直接打开,因为可以忽略掉拓展属性,相当于打开html原生页面,给前端带来了便利。
什么意思呢?就是说在本地环境或者有网络的环境下,thymeleaf均可运行。由于thymeleaf支持html原型,也支持在html标签里增加额外的属性来达到“模板+数据”的展示方式。
因此即可以直接在浏览器查看页面效果,也可以在当服务器启动后,查看带数据的动态页面效果。
引入Thymeleaf
首先在pom.xml中引入
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
另外在 html 页面上如果要使用 thymeleaf 模板,需要在html页面标签中引入:
<html xmlns:th="http://www.thymeleaf.org">
Thymeleaf 相关配置
spring:
thymeleaf:
cache: false #关闭缓存
Thymeleaf 中处理对象
我们来看一下thymeleaf 模板中如何处理对象信息。假如我们在做个人博客的时候,需要给前端传博主相关信息来展示,那么我们会封装成一个博主对象,比如:
public class blogger {
private Integer id;
private String username;
private String password;
// 省去set和get
}
然后在 controller 层中初始化一下,并将其存在Model 中:
@RequestMapping("/getBlogger")
public String getBlogger(Model model) {
Blogger blogger = new Blogger(1, "张磊", "123456");
model.addAttribute("blogger", blogger);
return "blogger";
}
我们先初始化 blogger 对象,然后将该对象放到 Model 中,然后返回到 blogger.html页面去渲染。接下来我们再写一个 blogger.html来渲染blogger 的信息
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博主信息</title>
</head>
<body>
<form action="" th:object="${blogger}" >
用户编号:<input name="id" th:value="${blogger.id}"/><br>
用户名:<input type="text" name="username" th:value="${blogger.getUsername()}" /><br>
登陆密码:<input type="text" name="password" th:value="*{password}" />
</form>
</body>
</html>
可以看出来,在thymeleaf 模板中,使用 th:object=“${}” 来获取对象信息,然后在表单里面可以有3种方式获取对象属性。如下:
使用 th:value=“*{属性名}”
使用 th:value=“${对象.属性名}” ,对象是指上面使用 th:object 获取的对象
使用 th:value=“${对象.get方法}” , 对象是指上面使用 th:object 获取的对象
可以看出,在thymeleaf 种可以像 java 一样写代码,很方便。在浏览器里输入localhost:8080/getBlogger 来测试一下数据,出现如下结果:
Thymeleaf 中处理 List
处理 List 的话,和上面处理对象的方式差不多,但是需要在thymeleaf 中进行遍历。我们先在Controller 中定义一个list 集合,然后将两个博主的信息加入到list 集合中,再将集合放入到Model 中,最后将结果返回到 list.html 去渲染
@GetMapping("/getList")
public String getList(Model model) {
blogger blogger1 = new Blogger(1, "张磊", "123456");
blogger blogger2 = new Blogger(2, "陆婷婷", "234567");
List<Blogger> list = new ArrayList<>();
list.add(blogger1);
list.add(blogger2);
model.addAttribute("list", list);
return "list";
}
写一个list.html 来获取该list 的信息,然后在list.html 中遍历该集合,如下:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博主信息</title>
</head>
<body>
<form action="" th:each="blogger : ${list}" >
用户编号:<input name="id" th:value="${blogger.id}"/><br>
用户姓名:<input type="text" name="username" th:value="${blogger.username}"/><br>
登录密码:<input type="text" name="password" th:value="${blogger.getPassword()}"/>
</form>
</body>
</html>
可以看出其实处理list 集合和处理单个信息差不多,Thymeleaf 使用 th:each 进行遍历,${} 取 model 中传过来的参数,然后自定义list 中取出来的每个对象,这里定义为blogger。对于获取属性的值,以上的三种方法不能使用 *{属性名}的方法,thymeleaf 模板获取不到。但其余两种方法均可以用。
打开浏览器访问: localhost:8080/getList 结果如下:
其余常用的 Thymeleaf 语法
超链接:
<a th:href="@{/getBlogger}">Login</a> />
地址引入:
<img alt="张磊自拍" th:src="@{/img/zhanglei.png}" />
等等。
总结
Thymeleaf在 Spring Boot中使用非常广泛,这篇博客主要分析了thymeleaf 的优点,以及如何在Spring Boot中集成并使用thymeleaf模板,包括依赖、配置,相关数据的获取、以及一些注意事项等等。最后列举了一些 thymeleaf中常用的标签,在实际项目中多使用,多查阅就能熟练掌握,thymeleaf中的一些标签或者方法不用死记硬背,用到什么去查阅什么,关键是要会在Spring Boot中集成,用的多了就熟能生巧!