8.Thymeleaf模板语法

zhanglei 2022年06月11日 329次浏览

​ 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 来测试一下数据,出现如下结果:

image-20220611133502180

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 结果如下:

image-20220611135219414

其余常用的 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中集成,用的多了就熟能生巧!