《Spring Boot框架入门到实践》(16)spring boot使用Thymeleaf的常用标签

Thymeleaf的标准表达式

标准变量表达式（${ }）

语法：${ }
变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和JSTL中的${}相同；
Thymeleaf中的变量表达式使用${变量名}的方式和获取其中的数据
比如SpringMVC的Controller 中使用的model.addAttribute向前端传输数据，代码如下：

创建controller类

@Controller
public class UserController {
	@RequestMapping("/user")
	public String user(Model model) {
		//先创建一个实体类，用于存放数据
		User user = new User();
		user.setId(1);
		user.setName("张三");
		user.setAge(14);
		model.addAttribute("user", user);
		return "user";
	}
}

创建html页面前端接收代码
记得要在html标签中加入属性：xmlns:th="http://www.thymeleaf.org"

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<span th:text="${user.id}"></span>
	<span th:text="${user.name}"></span>
	<span th:text="${user.age}"></span>
</body>
</html>

其中，th:text=" "是Thymeleaf的一个属性，用于文本的显示；
3. 运行
在这里插入图片描述

选择变量表达式（*{ }）

语法：*{ }
选择变量表达式，也叫星号表达式，使用th:object属性来绑定对象，比如：

和上面的Controller类一样

@Controller
public class UserController {
	@RequestMapping("/user")
	public String user(Model model) {
		//先创建一个实体类，用于存放数据
		User user = new User();
		user.setId(1);
		user.setName("张三");
		user.setAge(14);
		model.addAttribute("user", user);
		return "user";
	}
}

前端接收代码

	<div th:object="${user}">
		<p><span th:text="*{id}"></span></p>
		<p><span th:text="*{name}"></span></p>
		<p><span th:text="*{age}"></span></p>
	</div>

选择表达式首先使用th:object来邦定后台传来的User对象,然后使用 * 来代表这个对象，后面{}中的值是此对象中的属性;
选择变量表达式*{ }是另一种类似于变量表达式${}表示变量的方法;
选择变量表达式在执行时是在选择的对象上求解,而${}是在上下文的变量Model上求解;
通过th:object属性指明选择变量表达式的求解对象;
上面的代码等价于

	<span th:text="${user.id}"></span>
	<span th:text="${user.name}"></span>
	<span th:text="${user.age}"></span>

标准变量表达式和选择变量表达式可以混合使用

	<div th:object="${user}"> 
		<p><span th:text="${user.id}"></span></p>
		<p><span th:text="*{name}"></span></p>
		<p><span th:text="*{age}"></span></p>
	</div>

也可以不适用th:object进行对象的选择，而直接使用*{ } 获取数据，比如；

	<div> 
		<p><span th:text="*{user.id}"></span></p>
		<p><span th:text="*{user.name}"></span></p>
		<p><span th:text="*{user.age}"></span></p>
	</div>

URL表达式

如果有动态变量的话就需要使用URL表达式，否则变量取不出来。
静态的直接用HTML就可以了。
语法：@{ }
URL表达式可用于JS:<script src=" ">、CSS:<link hef=" ">、 HTML:<a href=" ">等
1、绝对URL,比如:
<a href="info.html" th:href="@{'http://localhost:8080/boot/user/info?id=' + ${user.id}}">查看</a>
这里的href的作用就是，运行时被th:href标签替换掉。
运行后是这样的<a href="http://localhost:8080/boot/user/info?id=1">查看</a>
使用' '表示路径是静态的已经被写死，不能改变了，+号是拼接符。
如果需要添加多个变量的话有两种方式：
和上边一样的方式用' '连接，但是需要添加连接符比较麻烦。
<a href="info.html" th:href="@{'http://localhost:8080/boot/user/info?id=' + ${user.id} + '&age=' + ${user.age}}">查看</a>
这个方式比较简单用|，这个方式不用添加连接符就可以使用，较简洁，推荐使用
<a href="info.html" th:href="@{|http://localhost:8080/boot/user/info?id=${user.id}&age=${user.age}|}">查看</a>

2、相对URL,相对于页面,比如:
<a href="info.html" th:href="@{'user/info?id=' + ${user.id}}">查看</a>
运行后
<a href="user/info?id=1">查看</a>
3、相对URL,相对于项目上下文,比如: .
<a href="info.html" th:href="@{'/user/info?id=' + ${user.id}}">查看</a>（项目的上下文会被自动添加）
运行后
<a href="/springboot-thymeleaf/user/info?id=1">查看</a>

Thymeleaf的常见属性

th:action

定义后台控制器的路径，类似标签的action属性，比如：
<form id="login" th:action="@{boot/index}"></form>
如果不需要获取动态变量的话，可以使用HTML格式的。比如：
<form id="login" action="boot/index"></form>

th:each

这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，他于JSTL中的<C:forEach>类似，此属性既可以循环遍历集合，也可以循环遍历数组及Map,比如

列表List类型的循环:

	<p th:each="user : ${userlist}">
		<span th:text="${userStat.count}"></span>
		<span th:text="${user.id}"></span>
		<span th:text="${user.name}"></span>
		<span th:text="${user.age}"></span>
	</p>

以上代码解读如下：
th:each="user,interStat : ${userlist}"中的${userlist}是后台传来的Key,user是${userlist}循环的迭代变量用于点出属性，${interStat.count}是${userlist}循环体的信息，其中user及interStat自己可以随便写。

userStat.count是循环体的信息,通过该变量可以获取如下信息:
userStat中的user是循环的迭代变量，使用是要修改。
index、size、 count、 even、odd、 first、 last 、其含义如下:
index:当前迭代对象的index (从0开始计算)
count:当前迭代对象的个数(从1开始计算)
size:被迭代对象的大小
current:当前迭代变量
even/odp:布尔值,当前循环是否是偶数/奇数(从0开始计算)
first:布尔值,当前循环是否是第一个
last:布尔值,当前循环是否是最后一个
注意:循环体信息interStat也可以不定义,则默认采用迭代变量加上Stat后缀,即userStat。
Map类型的循环：

	<p th:each=" usermap: ${usermap}">
		<span th:text="${usermap.key}"></span>
		<span th:text="${usermap.value.id}"></span>
		<span th:text="${usermap.value.name}"></span>
		<span th:text="${usermap.value.age}"></span>
	</p>

${usermap.key}是获取mao的Key，${usermap.value.id}中的.value是获取map中的value，.id是获取value中的值。
数组类型的循环:

	<p th:each=" userarr: ${userarr}">
		<span th:text="${userarr.id}"></span>
		<span th:text="${userarr.name}"></span>
		<span th:text="${userarr.age}"></span>
	</p>

这个和List比较类似。

th:href

定义超链接，比如：
<a class="login" th:href="@{/login}">登录</a>
需要配和@{ }使用

th:id

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

th:name

设置表单名称，比如：

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

th:if

条件判断，比如后台传来一个变量，判断该变量的值，1为男，2为女
后台加入一个model

model.addAttribute("sex", "1");

页面加入一个判断

	<span th:if="${sex=='1'}">
		男
	</span>
	<span th:if="${sex=='2'}">
		女
	</span>

这个的判断符号也可以使用英文eq

th:unless

th:unless是th:if的一个相反的操作，上面的例子可以写为:

	<span th:unless="${sex =='1'}">
		男
	</span>
	<span th:unless="${sex =='2'}">
		女
	</span>

这样的话显示输出的就是女了。

th:switch/th:case

switch,case 判断语句，比如

	<div th:switch="${sex}">
		<p th:case="1">男</p>
		<p th:case="2">女</p>
		<p th:case="*">未知</p>
	</div>

一旦某个case判断值为true ,剩余的case则都当做false，“ * ” 表示默认的case ,前面的case都不匹配时候,执行默认的case。

th:object

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

th:src

用于外部资源引入，比如

<script th:src="@{/js/jquery-2.4.min.js}">js</script>
<img th:src="@{/image/img.jpg}">

目录
在这里插入图片描述
static是存放一些前端配置文件的如CSS、js、图片等的根目录，所以写路径是时候不用写static。

th:text

用于文本的显示，比如：

	<p th:text="${user.name}"></p>
	<input type="text" th:text="${user.name}">

在这里插入图片描述
th:text是显示在文本框的外面的

th:value

类似于HTML标签中的Value属性，能对某元素的Value属性进行赋值，比如：

姓名：<input type="text" th:value="${user.name}" >

在这里插入图片描述

th:attr

该属性用于给HTML中的某属性进行赋值，但该方法写法不够优雅，比如上面的例子可以写成如下形式：

姓名：<input type="text" th:attr="value=李四">

在这里插入图片描述

th:onclick

点击事件：th:onclick="'getCollect()'"
注意：要加单引号' '

th:style

	<div th:style="'display:none'">
		wxw1
	</div>
	<div th:style="'display:block'">
		wxw2
	</div>

注意：需要加单引号
none为不显示，block为显示
前端页面
在这里插入图片描述
源码

th:method

设置请求方法，比如:

<form id="login" th:action="@{/lonin}" th:method="post">
。。。。。
</form>

th:inline

内联文本，内联脚本
th:inline有三个取值类型{text,javascript,none}
该属性使用内联表达式[[ ]]展示数据
内联文本：

	<span th:inline="text" >
		hello,[[${user.name}]]
	</span>

等价于

	<span>hello,<span th:text="${user.name}"></span></span>

th:inline="text"也可以省略，效果是一样的

<span> hello,[[${user.name}]] </span>

在这里插入图片描述
th:inline写在任何父标签都可以，比如以下：

	<table th:inline="text">
		<tr>hello,[[${user.name}]]</tr>
	</table>

内联脚本：
是写javascript的。
none：
表示不显示

A.夕阳

发布了50 篇原创文章 · 获赞 13 · 访问量 1872

私信关注