当前位置：网站首页>Thymeleaf的相关知识
Thymeleaf的相关知识
2022-06-27 11:56:00 【瑾琳】
Thymeleaf 标准方言
一、如何识别标准方言
1.<span th:text="..."> 此种形式是比较常用的；不过需要在h5的标签里面引入p命名空间
例如：<html xmlns:th="http://www.thymeleaf.org">
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
text中的内容 最终会覆盖p标签的内容
2.<span data-th-text="..."> 此种形式 是h5 标准的一种形式；不需要引入p命名空间
3.变量表达式 ${......}
例如：
<span th:text="${book.author.name}"> 变量表达式存储的是变量
4.消息表达式 #{........} 也称为 文本外部化、国际化或i18n
例如：<table>
.....
<th th:text="#{header.address.city}">.....</th>
<th th:text="#{header.address.country}">....</th>
......
</table>
5.选择表达式：*{...} 也成为*表达式；与变量表达式的区别：他们是在当前选择的对象而不是整个上下文变量映射上执行
例如：
<div th:object="${book}" //取出book这个变量作为一个对象
.......
<span th:text="*{title}">....</span> // 取得是 book 的属性值
.......
</div>
6.链接表达式: @{...}
链接表达式可以是相对的，在这种情况下，应用程序上下文将不会作为URL的前缀：
<a th:href="@{../documents/report}">...</a>
也可以是服务器相对(同样，没有应用程序上下文前缀)：
<a th:href="@{~/contents/main}">....</a>
和协议相对(就像绝对URL，但浏览器将使用在显示的页面中使用的相同的HTTP或HTTPS协议):
<a th:href="@{//static.myconpany.com/res/initial}">...</a>
当然，link表达式也可以是绝对的：
<a th:href="@{http://www.myconpany.com/main}">....</a>
7.分段表达式： th:insert 或 th:replace
例如：
<!DOCTPYE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copy"> fragment 是片段的意思；把copy这个片段放到这里
© 2018<a href="https://waylau.com"> waylau.com</a>
</div>
</body>
</html>
copy片段的内容：
<body>
.......
<div th:insert="~{foot::copy}"
.......
</body>
8.字面量(文字)
文本：
例如：
<p>
Now you are looking at a <span th:text="working web application"> template file </span>
</p>
数字：
例如：
<p>
The year is <span th:text="2018"></span>
</p>
<p>
In two years,it will be <span th:text="2018+2"></span>
</p>
布尔：
<div th:if="${user.isAdmin()}==false"> .....
null:
<div th:if="${variable.something}==null">..........
9.算数操作 ：+ - * %
<div th:with="isEven=(${prodSta.cout}%2==0)">
10.比较和等价
比较：> < >= <=(gt lt ge le)
例如：
<ul class="pagination" data-th-if="${page.totalPages le 7}">
等价：
== != (eq ne)
例如：
<option data-th-each="i:$(#arrays.toIntegerArray({5,10,40,100}))" data-th-value="${i}" data-th-selected="${i eq page.size}" data-th-text="${i}"></option>
10.条件运算符
<tr th:class="${row.even}? 'even':'odd'">
.......
</tr>
11. 无操作
<span th:text="$(user.name)?:_" no user authenticated </span>
二、设置属性值
1.设置任意属性值 th:attr
例如：
<form action="subscribe.html" th:attr="[email protected]{/subscribe}">
<fieldset>
<input type="text" name="email"/>
<input type="submit" value="Subscrible!" th:attr="value=#{subscribe.submit}"/>
</fieldset>
</form>
最终的结果：
<form action="/gtvg/subscribe">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscrible"/>
</fieldset>
</form>
2.设置值到制定的属性
例如：
<form action="subscribe.html" th:attr="[email protected]{/subscribe}">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscrible!" th:attr="value=#{subscribe.submit}"/>
</fieldset>
</form>
换种方式写：
<form action="subscribe.html" th:action=“@{/subscribe}">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscrible!" th:value=”#{subscribe.submit}"/>
</fieldset>
</form>
3.固定值布尔属性 (比较多；用的时候查)
<input type="checkbox" name=“active” th:checked="${user.active}"/>
三、迭代器
1.基本的迭代 th:each
<li th:each="book:${books}" th:text="${book.title}">En las Oriallas del Sar</li>
2.状态变量
index ：当前变量的索引从0开始
count：当前变量的索引从1开始
size：迭代器的总数
current：当前迭代的变量
even：奇数
odd：偶数
first:迭代器的第一个对象
last:迭代器的最后一个
例如：
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th> IN STOCK</th>
</tr>
<tr th:each="prod,iterStat:${prods}" th:class="${iterStat.odd}?'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}?#{true}:#{false}">yes</td>
</tr>
</table>
3.条件语句 th:if, th:unless ,switch
例如：
th:if
<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}"
th:if="${not #lists.isEmpty(prod.comments)}">view</a>
th:unless
<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}"
th:unless="${#lists.isEmpty(prod.comments)}">view</a>
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator </p>
<p th:case="'#{roles.manager}'">User is an manager </p>
<p th:case="'*'">User is some other things </p>
</div>
四、模板布局 ：公用的部分提取出来
1.定义和引用片段
定义片段：
<!DOCTPYE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copy">
© 2018<a href="https://waylau.com">waylau.com</a>
</div>
</body>
<html>
引用片段：
<body>
......
<div th:insert="~{footer::copy}"></div>
<body>
不使用 th:fragment
定义片段：
....
<div id="copy-section">
©2017 <a href="https://waylau.com">waylau.com</a>
</div>
引用片段：
<body>
......
<div th:insert="~{footer::#copy-section"></div>
<body>
2.th:insert,th:replace,th:include 三者区别
相同：三者都可以引用模板片段
不同：
th:insert 他将简单地插入制定的片段作为正文的主标签
th:replace 用制定实际片段来替换其主标签
th：include 类似于 th：insert，但不是插入片段，他只插入此片段的内容()
例如：
定义一个片段:
<footer th:fragment="copy">
©2018<a href="https://waylau.com">waylau.com</a>
<footer>
引用片段：
<body>
.....
<div th:insert="footer::copy"></div>
<div th:replace="footer::copy"></div>
<div th:include="footer::copy"></div>
</body>
最终的结果：
<body>
.....
<div>
<footer>
©2018<a href="https://waylau.com">waylau.com</a>
<footer>
</div>
<footer>
©2018<a href="https://waylau.com">waylau.com</a>
<footer>
<div>
©2018<a href="https://waylau.com">waylau.com</a>
</div>
</body>
五：属性优先级
当在同一个标签中写入多个th:* 属性时，会发生什么？
<ul>
<li th:each="item:${items} th:text=${item..description}"> Item description here....</li>
</ul>
结论：each的优先级高于text的优先级
六、注释
1.标准HTML/XML 注释
例如：
<!-- User info follows-->
<div th:text="${....}"
....
<div>
2.Thymeleaf解析器级别注释块
删除<!-- /*和*/-->之间的所有内容
<!-- /*-->
<div>
you can see me only before Thymeleaf processes me!
</div>
<!-- */-->
3.原型注释块：
当模板静态打开时(比如原型设计)，原型注释块所注释的代码将被注释，而在模板执行时，这些注释的代码，就能被显示出来
例如：
模板静态打开:
<span>hello!</span>
<!-- /*/-->
<div th:text="${...}">
....
</div>
<!-- /*/-->
<span>goodbye!</span>
模板执行时：
<span>hello!</span>
<div th:text="${...}">
....
</div>
<span>goodbye!</span>
七、内联
1.内联表达式：
[[...]]或[(...)]分别对应于th:text(会对特殊字符进行转义)和th:utext(不会对特殊字符进行转义)
定义：
<p> The message is "[(${msg})]"</p>
结果：
<p> The message is "This is <b> great！</b>"</p>
定义：
<p> The message is "[[${msg}]]"</p>
结果：
<p> The message is "This is <b> great！</b>"</p>
2.禁用内联
有时需要禁用这种机制，比如，想输出[[...]]或[(...)]文本内容 th:inline="none"
<p th:inline="none" >A double array looks like this:[[1,2,3]],[[4,5]]!</p>
这样就禁用了内联
3.javaScript内联
定义：
<script th:inline="javascript">
....
var username=/*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
...
</script>
结果：
<script th:inline="javascript">
....
var username= "Sebastian \"Fruit\" Applejuice";
...
</script>
4.css内联
定义：
classname='main elems'
align='center'
<style th:inline="css"
.[[${classname}]]{
text-align:[[${align}]];
}
结果：
<style th:inline="css"
.main\ elems{
text-align:cnter
}
八、表达式基本对象
Thymeleaf模板初始化的时候有些对象和变量的映射始终可以被访问，
换句话说，在Thymeleaf模板被初始化的时候这些变量和对象已经被初始化好了
1.#ctx:上下文对象。是org.thymeleaf.context.lContext或者org.thmeleaf.context.lWebContext的实现
2.#locale:直接访问与java.util.Locale关联的当前的请求
例如：
${#ctx.locale}
${#ctx.variableNames}
${#ctx.request}
${#ctx.response}
${#ctx.session}
${#ctx.servletContext}
${#locale}
3.request/session等属性
param：用于检索请求参数
session:用于检索session属性
application:用于检索application/servlet上下文属性
部分api:
${param.foo}
${param.size()}
${param.isEmpty()}
${param.containsKey('foo')}
${session.foo}
${session.size()}
${session.isEmpty()}
${session.containsKey('foo')}
${application.foo}
${application.size()}
${application.isEmpty()}
${application.containsKey('foo')}
4.Web上下文对象
#request:直接访问与当前请求关联的 javax.servlet.http.HttpServletRequest对象
#session:直接访问与当前请求关联的javax.servlet.http.HttpSession对象
#servletContext:直接访问与当前请求关联的javax.servlet.ServletContext对象
一些常见的api:
${#request.getAttribute('foo')}
${#request.getParameter('foo')}
${#request.getContextPath()}
${#request.getRequestName()}
...
${#session.getAttribute('foo')}
${#session.id}
${#session.lastAccessedTime()}
...
${#servletContext.getAttribute('foo')}
${#servletContext.contextPath}
...
九、Thymeleaf与Spring Boot集成
1.配置环境
Thymeleaf3.0.3.RELEASE
Thymeleaf Layout Dialect 2.2.0
2.修改build.gradle
边栏推荐
- Shell script learning notes
- R language uses the polR function of mass package to construct the ordered multi classification logistic regression model, and uses the vglm function of VGAM package to test the parallelism hypothesis
- C/s architecture
- 秒云荣获《2022爱分析 · IT运维厂商全景报告》智能运维AIOps市场代表厂商
- R language dplyr package arrange function sorts dataframe data, sorts dataframe data through multiple data columns, specifies the first field to be sorted in descending order, and does not specify the
- Interview shock 60: what will cause MySQL index invalidation?
- Microservice splitting
- 千万不要错过，新媒体运营15个宝藏公众号分享
- 关于枚举类的两种用法
- Minimum editing distance (linear DP writing method)
猜你喜欢
微服务拆分
面试突击60：什么情况会导致 MySQL 索引失效？
Safe landing practice of software supply chain under salesforce containerized ISV scenario
TiDB 6.0：让 TSO 更高效丨TiDB Book Rush
面试突击60：什么情况会导致 MySQL 索引失效？
Microservice splitting
想学好C语言，操作符也很重要
Shell script learning notes
2022CISCN华中 Web
How to find the movie and TV clips with the same lines? These 8 movies search for artifact, and find the corresponding segment in one line
随机推荐
On ticheck
R语言dplyr包arrange函数排序dataframe数据、通过多个数据列排序dataframe数据、指定第一个字段降序排序，第二字段不指定（默认升序排序）
How to adjust an integer that is entered in Excel but always displays decimals?
Drive to APasS！ Use Mingdao cloud to manage F1 events
hibernate操作oracle数据库 主键自增
MapReduce原理剖析（深入源码）
消息队列的使用
R language dplyr package arrange function sorts dataframe data, sorts dataframe data through multiple data columns, specifies the first field to be sorted in descending order, and does not specify the
Interview shock 60: what will cause MySQL index invalidation?
C＃ wpf 实现撤销重做功能
浅谈珂朵莉树
I.MX6ULL启动方式
Operators are also important if you want to learn the C language well
数学知识——博弈论（巴什博奕、尼姆博奕、威佐夫博奕）思路及例题
Nifi from introduction to practice (nanny level tutorial) - identity authentication
PyQt,PySide-槽函数被执行了两次
Building crud applications in golang
记一次 .NET 某物管后台服务 卡死分析
MIT6.031 软件构造 Reading7阅读笔记Designing Specifications（设计规范）
i.mx6ull（单片机） c语言环境搭建