Thymeleaf模板

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

进步ing

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

阅读量979

点赞数

分类专栏：前端学习篇

本文链接：https://blog.csdn.net/qq_46334333/article/details/108616355

版权

前端学习篇专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.Thymeleaf模板如何使用？

<html xmlns:th="http://www.thymeleaf.org">
注意： Springboot 使 用 thymeleaf 作 为 视 图 展 示 ， 约 定 将 模 板 文 件 放 置 在
src/main/resource/templates 目录下，静态资源放置在 src/main/resource/static 目录下

二.Thymeleaf的表达式：

1.标准变量表达式：

th:text="${变量名}"

2.选择变量表达式，也叫星号变量表达式：

<h2>展示 User 用户信息（星号表达式,仅在 div 范围内有效）：</h2>
<div th:object="${user}">
 用户编号：<span th:text="*{id}"></span><br/>
 用户姓名：<span th:text="*{name}"></span><br/>
 用户手机号：<span th:text="*{phone}"></span><br/>
 用户地址：<span th:text="*{address}"></span><br/>
</div>

3.URL 表达式：

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

三.Thymeleaf的常见属性：

1. th:action ：

index.html 页面上添加以下内容：
<h1>th:action 属性的使用</h1>
<h2>请求路径中需要动态获取变量数据时，必须添加 th 前缀</h2>
<form th:action="@{'/user/login?id='+${user.id}}"></form>
<h2>以下两种方式获取不到用户 id</h2>
<form action="'/user/login?id='+${user.id}"></form>
<form action="/user/login"+${user.id}></form>

2. th:method ：

<h1>th:method 属性的使用</h1>
<form th:action="@{/user/login}" th:method="post"></form>

3. th:href ：

定义超链接，主要结合 URL 表达式,获取动态变量
<h1>th:href 使用</h1>
<a href="http://www.baidu.com">超链接百度</a><br/>
<a th:href="'http://www.baidu.com?id=' + ${user.id}">th:href 链接</a>

4. th:src ：

用于外部资源引入，比如<script>标签的src属性，<img>标签的src属性，常与@{}表达式结合使用，在SpringBoot项目的静态资源都放到resources的static目录下。放到static路径下的内容，写路径时不需要写上static
<h1>th:src 属性的使用</h1>
<!--以下方式无法引入 js-->
<script src="/static/js/jquery-1.7.2.min.js"></script>
<!--该方法是常用方法-->
<script type="text/javascript" 
th:src="@{/jquery-1.7.2.min.js}"></script>
<script>
 $(function () {
 alert("引入 js 文件");
 });
</script>
这种方式比传统方式的好处是，在 URL 表达式前加/，会自动加上上下文根，避免 404 找不
到资源的情况

5.th:id ：

类似 html 标签中的 id 属性
<span th:id="${hello}">aaa</span>

6.th:name :

设置名称
<input th:type="text" th:id="userName" th:name="userName">

7.th:value :

类似 html 标签中的 value 属性，能对某元素的 value 属性进行赋值
<input type="hidden" id="userId" name="userId" th:value="${userId}">

8.th:attr :

该属性也是用于给 HTML 中某元素的某属性赋值，好处是可以给 html 中没有定义的属性动
态的赋值。
<h1>th:attr 属性的使用</h1>
<span zhangsan="${user.name}"></span>
<!--通过 th:attr 对自定义的属性赋值-->
<span th:attr="zhangsan=${user.name}"></span>

9.th:onclick :

<h1>th:onclick 的使用</h1>
<!--目前 thymeleaf 版本要求只能传递数字和布尔值-->
<a th:onclick="'show('+${user.id}+')'">点击：显示学生编号</a>
<script type="text/javascript">
 function show(id) {
 alert("用户编号为：" + id);
 }
</script>

10.th:style :

设置样式
<a th:onclick="'show('+${user.id}+')'" 
th:style="'font-size:40px;color:red;'">点击：显示学生编号</a>

11.*th:each :

这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与
JSTL 中的<c: forEach>类似，此属性既可以循环遍历集合，也可以循环遍历数组及 Map
A.遍历List集合:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>循环遍历 List 集合</title>
</head>
<body>
<h1>th:each 循环遍历 List 集合</h1>
<div style="color: red">
 1.user:当前对象的变量名<br/>
 2.userStat:当前对象的状态变量名<br/>
 3.${userList}:循环遍历的集合<br/>
 4.变量名自定义
</div>
<div th:each="user,userStat:${userList}">
 <span th:text="${userStat.index}"></span>
 <span th:text="${user.id}"></span>
 <span th:text="${user.name}"></span>
 <span th:text="${user.phone}"></span>
 <span th:text="${user.address}"></span>
</div>
</body>
</html>
代码说明
th:each="user, iterStat : ${userlist}"中的 ${userList} 是后台传过来的集合
◼ user
定义变量，去接收遍历${userList}集合中的一个数据
◼ iterStat 
${userList} 循环体的信息
◼ 其中 user 及 iterStat 自己可以随便取名
◼ interStat 是循环体的信息，通过该变量可以获取如下信息
index: 当前迭代对象的 index（从 0 开始计算）
count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）
first: 布尔值，当前循环是否是第一个
last: 布尔值，当前循环是否是最后一个
注意：循环体信息 interStat 也可以不定义，则默认采用迭代变量加上 Stat 后缀，即 userStat
B.遍历Map集合:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>循环遍历 Map 集合</title>
</head>
<body>
<h1>th:each 循环遍历 Map 集合</h1>
<div th:each="userMap,userMapStat:${userMaps}">
 <span th:text="${userMapStat.count}"></span>
 <span th:text="${userMap.key}"></span>
 <span th:text="${userMap.value}"></span>
 <span th:text="${userMap.value.id}"></span>
 <span th:text="${userMap.value.name}"></span>
 <span th:text="${userMap.value.phone}"></span>
 <span th:text="${userMap.value.address}"></span>
</div>
</body>
</html>
代码说明
th:each="userMap,userMapStat:${userMaps}" ，用 userMap 变量接收每次遍历的结果，封装
为一个键值对，userMapStat 状态
userMap.key：获取当前键值对中的 key
userMap.value：获取当前键值对中的 value

12.th:if和th:unless

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <title>条件判断</title>
</head>
<body>
<h1>th:if 用法:如果满足条件显示，否则相反</h1>
<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>
<h1>th:unless 用法：与 th:if 用法相反，即对条件判断条件取反</h1>
<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>
<div th:if="${user1 eq null}">
 <h3 style="color: red">用户未登录</h3>
</div>
<div th:unless="${user2 == null}">
 用户姓名：<span th:text="${user2.name}"></span>
</div>
<h1>从 session 中获取值</h1>
<div th:if="${user3 != null}">
 <span th:text="${user3.name}"></span>
</div>
</body>
</html>

13.th:switch/th:case :

<h1>th:switch/th:case 用法</h1>
<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

14.th:inline :

（1）内敛文本（th:inline=”text”）:

内敛文本表达式不依赖于 html 标签，直接使用内敛表达式[[表达式]]即可获取动态数据，但
必须要求在父级标签上加 th:inline = “text”属性
<!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.id}"></span><br/>
北京动力节点 www.bjpowernode.com
187
用户姓名：<span th:text="${user.name}"></span><br/>
用户手机号：<span th:text="${user.phone}"></span><br/>
用户地址：<span th:text="${user.address}"></span><br/>
<h1>内敛文本 th:inline="text"</h1>
<div th:inline="text">
 用户编号：<div>[[${user.id}]]</div><br/>
 用户姓名：[[${user.name}]]<br/>
 用户手机号：[[${user.phone}]]<br/>
 用户地址：[[${user.address}]]<br/>
</div>
</body>
</html>

（2）内敛脚本（th:inline=”javascript”）:

<script type="text/javascript" th:inline="javascript">
 function showInlineJavaScript() {
 alert("欢迎 " + [[${user.name}]] + " 到我院指导工作！联系方式： " + 
[[${user.phone}]]);
 }
</script>
<button th:onclick="showInlineJavaScript()">展示内容</button>

四.Thymeleaf 字面量:

1.文本字面量:

<h1>文本字面量：用单引号'...'包围的字符串</h1>
<a th:href="@{'/user/info?id=' + ${user.id}}">查看用户：文本字面的路径使用</a><br/>
<span th:text="您好"></span>

2.数字字面量:

<h1>数字字面量</h1>
今年是<span th:text="2019">1949</span>年<br/>
20 年后，将是<span th:text="2019 + 20">1969</span>年<br/>

3.boolean 字面量:

<h1>boolean 字面量</h1>
<div th:if="${success}">执行成功</div>
<div th:unless="${flag}">执行不成功</div>

4.null 字面量:

<h1>null 字面量</h1>
<span th:if="${user ne null}">用户不为空</span><br/>
<span th:unless="${user eq null}">用户不为空（使用 th:unless 取反）</span><br/>

五.Thymeleaf 字符串拼接:

文本字面量使用"+"拼接字符串

另一种更优雅的方式：使用"|要拼接的内容|"减少字符串拼接的加号

### 六.Thymeleaf 运算符 ### 七.Thymaleaf 表达式基本对象 ### 八.Thymeleaf 表达式功能对象（了解）

进步ing

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf模板

一.Thymeleaf模板如何使用？<html xmlns:th="http://www.thymeleaf.org">注意： Springboot 使用 thymeleaf 作为视图展示，约定将模板文件放置在src/main/resource/templates 目录下，静态资源放置在 src/main/resource/static 目录下二.Thymeleaf的表达式：1.标准变量表达式：th:text="${变量名}"2.选择变量表达式
复制链接

扫一扫