Thymeleaf的语法规则

最新推荐文章于 2024-08-03 17:05:14 发布

Geek Li

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量1.3k

点赞数 3

分类专栏： Spring Boot 文章标签： java java-ee

本文链接：https://blog.csdn.net/weixin_43496491/article/details/124222754

版权

Spring Boot 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

标准变量表达式${}

介绍

语法：${…}
作用：显示数据
数据来源：Controller中model中的数据
标准变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和 EL 中的 ${} 相同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据。

案例：标准变量表达式显示实体对象中的属性

创建一个方法，将用户实体对象存放到 model 中，${}获取model中对象的属性值
定义实体类User

public class User {
private String username;
private String nickname;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}

定义控制器类UserController
将User存储到model中

@Controller
public class UserController {
@RequestMapping("/userlist")
public String userlist(Model model){
User user =new User();
user.setNickname("华夏");
user.setPassword("123456");
user.setUsername("admin");
model.addAttribute("user",user);
return "user";
}
}

定义界面user.html
在resources/template目录下创建user.html文件.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>标准变量表达式</title>
</head>
<body>
<h1>标准变量表达式</h1>
用户名称：<span th:text="${user.username}"></span><br />
用户昵称：<span th:text="${user.nickname}"></span><br />
用户密码：<span th:text="${user.password}"></span><br />
</body>
</html>

Thymeleaf模板${user.username}获取model中的user对象的username属性并显示，运行结果如下：
在这里插入图片描述

选择变量表达式*{}

介绍

语法：*{…}
作用：显示数据
数据来源：选择对象的属性
选择变量表达式，也叫星号变量表达式，使用 th:object 属性来绑定对象。选择表达式首先使用th:object 来绑定后台传来的对象，然后使用 * 来代表这个对象，后面 {} 中的值是此对象中的属性。
选择变量表达式 *{…} 是另一种类似于标准变量表达式 $ {…} 表示变量的方法，选择变量表达式数据;
来源是选择的对象，而${…}的数据来源是上下文的变量 Model。

案例：选择变量表达式显示实体对象中的属性

本案例基于“案例：标准变量表达式显示实体对象中的属性”
在user.html页面中添加代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>选择变量表达式</title>
</head>
<body>
<h1>标准变量表达式</h1>
用户名称：<span th:text="${user.username}"></span><br />
用户昵称：<span th:text="${user.nickname}"></span><br />
用户密码：<span th:text="${user.password}"></span><br />
<h1>选择变量表达式</h1>
<div th:object="${user}">
用户名称：<span th:text="*{username}"></span><br />
用户昵称：<span th:text="*{nickname}"></span><br />
用户密码：<span th:text="*{password}"></span><br />
</div>
</body>
</html>

解析：
（1） th:object 属性来绑定对象user
（2）*{username}中的 * 代表 $ {user}, *{username}表示获取对象user中的username属性，
（3） * {username}必须放在${user}所在的html标签的子标签中才有效。
运行结果
在这里插入图片描述

案例：选择变量表达式显示实体对象中的属性

本案例基于“案例：标准变量表达式显示实体对象中的属性”
在user.html页面中添加代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>选择变量表达式</title>
</head>
<body>
<h1>标准变量表达式</h1>
用户名称：<span th:text="${user.username}"></span><br />
用户昵称：<span th:text="${user.nickname}"></span><br />
用户密码：<span th:text="${user.password}"></span><br />
<h1>选择变量表达式</h1>
<div th:object="${user}">
用户名称：<span th:text="*{username}"></span><br />
用户昵称：<span th:text="*{nickname}"></span><br />
用户密码：<span th:text="*{password}"></span><br />
</div>
<h1>标准变量表达式与选择变量表达式混合写法</h1>
<div>
用户名称：<span th:text="*{user.username}"></span><br />
用户昵称：<span th:text="*{user.nickname}"></span><br />
用户密码：<span th:text="*{user.password}"></span><br />
</div>
</body>
</html>

解析：1. *{user.username}表示获取user对象的username属性，是标准变量表达式与选择变量表达式混合
写法
2. 混合写法 *{user.username} 与标准写法${user.password} 相似，区别是用星号替换了 $
3. 推荐使用标准变量表达式 $。

运行结果：
在这里插入图片描述

URL表达式（路径表达式）

介绍

语法：@{…}
说明：
主要用于链接、地址的展示，可用于
< script src="…">、
< link href="…">、
< a href="…">、
< form action="…">、
< img src="">等，
可以在 URL 路径中动态获取数据

案例：路径表达式绑定相对路径

UserController代码

@Controller
public class UserController {
//标准变量表达式和选择变量表达式方法
@RequestMapping("/userlist")
public String userlist(Model model){
User user =new User();
user.setNickname("华夏");
user.setPassword("123456");
user.setUsername("admin");
model.addAttribute("user",user);
return "user";
}
//路径表达式方法
@RequestMapping("/url")
public String url(Model model,User currentuser){
System.out.println(currentuser);
User user =new User();
user.setNickname("华夏");
user.setPassword("123456");
user.setUsername("admin");
model.addAttribute("user",user);
return "url";
}
//REST风格路径表达式方法
@RequestMapping("/rest/{username}/{nickname}")
public String url(Model model, @PathVariable("username") String
username,@PathVariable("nickname") String nickname){
System.out.println(username+":"+nickname);
User user =new User();
user.setNickname("华夏");
user.setPassword("123456");
user.setUsername("admin");
model.addAttribute("user",user);
return "url";
}
}

url.html代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>路径表达式</title>
</head>
<body>
<h1>URL 路径表达式：@{...}</h1>
<h2>绝对路径（没有参数）</h2>
<a th:href="@{http://localhost:8080/url}">查看：绝对路径</a>
<h2>绝对路径（路径中有参数）</h2>
<a th:href="@{'http://localhost:8080/url?username=' + ${user.username}}">查看
用户信息：绝对路径(带参数)</a>
<h2 style="color: red">实际开发推荐使用：相对路径（没有参数）</h2>
<a th:href="@{/url}">查看：相对路径</a>
<h2 style="color: red">实际开发推荐使用：相对路径（路径中有参数）</h2>
<a th:href="@{'/url?username=' + ${user.username}}">查看用户信息：相对路径（带参
数）</a><br />
<a th:href="@{/url(username=${user.username},nickname=${user.nickname})}">推
荐使用：优雅的带参数路径写法</a><br />
<a th:href="@{'/rest/'+${user.username}+'/'+${user.nickname}}">推荐使用：REST
的带参数路径写法</a><br />
</body>
</html>

解析：

@{}就是绑定url的
url.html第20行@{/url(username=$ {user.username},nickname=$ {user.nickname})}中的()用于将其中的数据转换为?k=v&k=v形式的参数

在这里插入图片描述

Thymeleaf常用th标签

大部分属性和 html 的一样，只不过前面加了一个 th 前缀
在这里插入图片描述

th:action

th:action 定义form标签action属性的路径，主要结合 URL 表达式获取动态变量

<form th:action="@{'/user/login?id='+${user.id}}"></form>

请求路径中需要动态获取变量数据时，必须添加 th 前缀
请求路径中不需要动态获取变量数据时，可以按照html写法

<form action="/user/login"></form>

以下两种方式获取不到用户 id

<form action="'/user/login?id='+${user.id}"></form>
<form action="/user/login"+${user.id}></form>

为什么后两个中$ {user.id} 获取不到数据？
因为我们 Thymeleaf 是以 html 为载体的，所以 html 不会认识${}语法。我们请求的流程是，发送请求给服务器，服务器接收请求后，处理请求，跳转到指定的静态 html 页面，在服务器端，Thymeleaf模板引擎会按照它的语法，对动态数据进行处理，所以如果要是 th 开头，模板引擎能够识别，会在服务器端进行处理，获取数据；如果没有以 th 开头，那么 Thymeleaf 模板引擎不会处理，直接返回给客户端了。

th:method

设置请求方法

<form th:action="@{'/login?username='+${user.username}}" th:method="post">
</form>

th:href

定义超链接，主要结合 URL 表达式,获取动态变量

<a th:href="'http://www.baidu.com?id=' + ${user.username}">th:href 链接</a>

th:src

用于外部资源引入，比如标签的 src 属性，标签的 src 属性，常与@{}表达式结
合使用，
在 SpringBoot 项目的静态资源都放到 resources 的 static 目录下。放到 static 路径下的内容，写路径时不需要写上 static。

提示：spring boot项目中引入图片或者js文件后，将项目clean一下，否则有可能无法识别图片和js。

在这里插入图片描述
以下方式无法引入 js
首先将jquery-3.6.0.js文件放到static目录下，然后在页面中引入jquery-3.6.0.js文件。

<!--以下方式无法引入 js 去掉static后可以 -->
<script src="/static/jquery-3.6.0.js"></script>
<script>
$(function () {
alert();
});
</script>

运行该程序，不会弹出对话框，去掉static后可以。
使用th:src引入js如下

<script type="text/javascript" th:src="@{/jquery-3.6.0.js}"></script>
<script>
$(function () {
alert("加载了js文件");
});
</script>

运行该程序，弹出对话框。
这种方式比传统方式的好处是，在 URL 表达式前加/，会自动加上下文路径，避免 404 找不到资源的情
况。

th:id

类似 html 标签中的 id 属性

<span th:id="${hello}">aaa</span>

th:name

设置名称

<input th:type="text" th:id="username" th:name="username">

th:value

类似 html 标签中的 value 属性，能对某元素的 value 属性进行赋值

<input th:type="text" th:id="userName" th:name="userName"
th:value="${user.username}">

th:attr

该属性也是用于给 HTML 中某元素的某属性赋值，类似于jQuery的attr属性。
好处是可以给 html 中没有定义的属性动态的赋值，以便于为我们存储业务需要的数据。

<span th:attr="myname=${user.username}"></span>

解析后的代码如下

<span myname="admin"></span>

span标签原本没有myname属性，我们为span标签动态添加了自定义属性myname，可通过myname属性读取出值admin。

th:text

用于文本的显示，该属性显示的文本在标签体中，如果是文本框，数据会在文本框外显示，要想显示在文本框内，使用 th:value

<input type="text" id="username" name="username" th:text="${user.username}"
th:value="${user.nickname}">

解析后的代码如下

<input type="text" id="username" name="username" value="admin">华夏</input>

th:object

用于数据对象绑定，通常用于
选择变量表达式
星号表达式

th:onclick

THYMELEAF 3.0.10版本对th:onclick进行了改进；
User Controller控制器

@RequestMapping("/login")
public String login(Model model){
User user =new User();
user.setUserid(1);
user.setNickname("华夏");
user.setPassword("123456");
user.setUsername("admin");
model.addAttribute("user",user);
return "form";
}

form.html 中的核心代码如下（3.0.10版本之前）

<button class="btn" th:onclick="'show(\''+${user.userid}+'\');'">获得编号
</button>
<script type="text/javascript">
function show(name) {
alert("数据为：" + name);
}
</script>

3.0.10版本之前onclick事件中只能传递Integer类型和boolean类型的参数，其他类型参数不允许传递。form.html 中的核心代码如下（3.0.10版本之后）

<button th:onclick="show([[${user.username}]]);">获得名字</button>
<script type="text/javascript">
function show(name) {
alert("数据为：" + name);
}
</script>

3.0.10版本之前onclick事件中只能传递Integer类型、boolean类型、string类型、JavaScript类型的参数

th:style

设置样式

<a th:style="'font-size:40px;color:red;'">显示红色</a>

th:each

这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与 JSTL 中的类似，此属性既可以循环遍历集合，也可以循环遍历数组及 Map.
遍历 List 集合
UserController代码

@RequestMapping("/selectList")
public String selectlist(Model model){
User user1 =new User();
user1.setNickname("华夏");
user1.setPassword("123456");
user1.setUsername("admin");
User user2 =new User();
user2.setNickname("华夏");
user2.setPassword("123456");
user2.setUsername("admin");
List<User> list = new ArrayList<>();
list.add(user1);
list.add(user2);
model.addAttribute("users",list);
return "selectList";
}

selectList.html代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>选择变量表达式</title>
</head>
<body>
<!--
1.user:迭代出来的对象名
2.userStat:当前对象的状态变量名
3.${users}:循环遍历的集合
-->
<div th:each="user,userState:${users}">
<span th:text="${userState.index}"></span>
<span th:text="${user.username}"></span>
<span th:text="${user.nickname}"></span>
<span th:text="${user.password}"></span>
</div>
</body>
</html>

运行结果
在这里插入图片描述

解析：th:each="user,userStat:${users}中的
${users} 是后台传过来的集合
user：自定义的变量，表示每次从${users}集合中迭代出来的对象
userState：是循环体的信息，可根据需要决定是否定义，通过该变量可以获取如下信息
index: 当前迭代对象的 index（从 0 开始计算）
count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）
first: 布尔值，当前循环是否是第一个
last: 布尔值，当前循环是否是最后一个

遍历Map集合
UserController代码

@RequestMapping("/selectMap")
public String selectMap(Model model){
User user1 =new User();
user1.setNickname("华夏");
user1.setPassword("123456");
user1.setUsername("admin");
User user2 =new User();
user2.setNickname("古城");
user2.setPassword("456678");
user2.setUsername("super");
Map<String,User> map = new HashMap<String,User>();
map.put(user1.getUsername(),user1);
map.put(user2.getUsername(),user2);
model.addAttribute("users",map);
return "selectMap";
}

userMap.html代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>选择变量表达式</title>
</head>
<body>
<!--
1.user:迭代出来的对象名
2.userStat:当前对象的状态变量名
3.${users}:循环遍历的集合
-->
<div th:each="user,userState:${users}">
<span th:text="${userState.index}"></span>
<span th:text="${user.key}"></span>
<span th:text="${user.value.username}"></span>
<span th:text="${user.value.nickname}"></span>
<span th:text="${user.value.password}"></span>
</div>
</body>
</html>

运行结果
在这里插入图片描述

解析：
th:each="user,userState:${users} ，用 user变量接收每次遍历的结果，封装 为一个键值对
userState：遍历状态
user.key：获取当前键值对中的 key
userMap.value：获取当前键值对中的 value

th:if

如果满足条件显示，反之亦然

<div th:if="${sex eq 1}">
男：<input type="radio" name="sex" th:value="1"/>
</div>
<div th:if="${sex eq 0}">
女：<input type="radio" name="sex" th:value="0"/>
</div>

th:unless

th:unless 用法：与 th:if 用法相反，即对条件判断条件取反

<div th:unless="${sex == 1}">
男：<input type="radio" name="sex" th:value="1"/>
</div>
<div th:unless="${sex eq 0}">
女：<input type="radio" name="sex" th:value="0"/>
</div>

th:switch/th:case

<div th:switch="${sex}">
<span th:case="1">性别：男</span><br/>
<span th:case="2">性别：女</span><br/>
<span th:case="*">性别：保密</span>
</div>

解析：
一旦某个 case 判断值为 true，剩余的 case 默认不执行，“*”表示默认的 case，前面的 case 都不匹配时候，执行默认的 case

th:inline

th:inline 有三个取值类型 (text, javascript 和 none)，值为 none 什么都不做
内敛文本（th:inline=”text”）
内敛文本表达式不依赖于 html 标签;
直接使用内敛表达式[[表达式]]即可获取动态数据
但必须要求在父级标签上加 th:inline = "text"属性

<div th:inline="text">
用户编号：[[${user.userid}]]<br/>
用户姓名：[[${user.username}]]<br/>
用户手机号：[[${user.nickname}]]<br/>
用户地址：[[${user.password}]]<br/>
</div>

内敛脚本（th:inline=”javascript”）
th:inline="javascript"可以在 js 代码中获取后台的动态数据

<script type="text/javascript" th:inline="javascript">
function showInlineJavaScript() {
alert("欢迎 " + [[${user.username}]] );//后台动态数据
}
</script>
<button th:onclick="showInlineJavaScript()">展示内容</button>

Thymeleaf 字面量

字面量：是指源程序中表示固定值的符号
Thymeleaf中的字面量可以在 html 页面直接使用，不需要后台传递。

文本字面量

用单引号’…'包围的字符串为文本字面量
文本字面量在路径中使用

<a th:href="'http://www.baidu.com?id=' + ${user.username}">th:href 链接</a>

其中的’http:// www .baidu.com?id=’ 就是表示路径的字面量

数字字面量

<span th:text="2021">当年</span>

其中的2021就是数字字面量

boolean 字面量

<div th:if="false">不显示</div>
<div th:if="true">显示</div>
<div th:if="${success}">不显示</div>

null 字面量

<span th:if="${user.username ne null}">用户不为空</span>
<span th:unless="${user eq null}">用户不为空</span>

Thymeleaf 字符串拼接

<span th:text="'共'+${totalRows}+'条'+${totalPage}+'页'"></span>

Thymeleaf 运算符

算术运算：+ , - , * , / , %

20*8=<span th:text="20 * 8"></span><br/>
20/8=<span th:text="20 / 8"></span><br/>
20+8=<span th:text="20 + 8"></span><br/>
20-8=<span th:text="20 - 8"></span><br/>

关系比较:：> , < , >= , <= ( gt , lt , ge , le )

<div th:if="5 > 2">5>2 是真的</div>
<div th:if="5 gt 2">5 gt 2 是真的</div>

三元运算：表达式?“正确结果”:“错误结果”
相等判断：== , != ( eq , ne )

<span th:text="${sex eq 1 ? '男':'女'}"></span><br/>
<span th:text="${sex == 1 ? '男':'女'}"></span><br/>

Thymaleaf 表达式基本对象

模板引擎提供了一组内置的对象，这些内置的对象可以直接在模板中使用，这些对象由 #号开始引用，常用的内置对象：

#request

#request 相当于 httpServletRequest 对象

#session

#session相当于 HttpSession 对象
控制器代码

@RequestMapping("/index")
public String index(HttpServletRequest request){
request.setAttribute("request_user","admin1");
request.getSession().setAttribute("session_user","admin2");
return "index";
}

index.html代码

<h1 th:text="${#request.getAttribute('request_user')}"></h1>
<h1 th:text="${#session.getAttribute('session_user')}"></h1>

Geek Li

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
2
评论
Thymeleaf的语法规则

目录标准变量表达式${}介绍案例：标准变量表达式显示实体对象中的属性选择变量表达式*{}介绍案例：选择变量表达式显示实体对象中的属性案例：选择变量表达式显示实体对象中的属性URL表达式（路径表达式）介绍案例：路径表达式绑定相对路径Thymeleaf常用th标签th:actionth:methodth:hrefth:srcth:idth:nameth:valueth:attrth:textth:objectth:onclickth:styleth:eachth:ifth:unlessth:switch/th:
复制链接

扫一扫