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:
表示不显示