当前位置：网站首页>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
边栏推荐
- Private dry goods sharing: how to implement platform in Enterprise Architecture
- R语言使用epiDisplay包的followup.plot函数可视化多个ID（病例）监测指标的纵向随访图、使用stress.labels参数在可视化图像中为强调线添加标签信息
- threejs的环境光+点光源+平行光源+球面光 以及hepler理解+阴影()
- Dynamic programming [III] (interval DP) stone merging
- FileOutputStream
- In 2021, the global carbon graphite brush revenue is about US $2366million, and it is expected to reach US $2701.8 million in 2028
- hibernate操作oracle数据库 主键自增
- R语言使用glm函数构建泊松对数线性回归模型处理三维列联表数据构建饱和模型、使用step函数基于AIC指标实现逐步回归筛选最佳模型、解读分析模型
- Go Web 编程入门：验证器
- Wait, how do I use setmemorylimit?
猜你喜欢
动态规划【三】（区间dp）石子合并
AI for Science：科研范式、开源平台和产业形态
What is the TCP 3-time handshake process?
MapReduce principle analysis (in-depth source code)
How to adjust an integer that is entered in Excel but always displays decimals?
What's the matter with Amazon's evaluation dropping and failing to stay? How to deal with it?
AutoCAD - three pruning methods
Shell script learning notes
c/s 架构
Tidb 6.0: making Tso more efficient tidb Book rush
随机推荐
Histrix工作原理
动态规划【三】（区间dp）石子合并
C ＃ WPF realizes undo redo function
Xuri 3sdb, installing the original ROS
i.mx6ull（单片机） c语言环境搭建
Jwas: a Bayesian based GWAS and GS software developed by Julia
如何修改 node_modules 里的文件
R语言使用glm函数构建泊松对数线性回归模型处理三维列联表数据构建饱和模型、使用step函数基于AIC指标实现逐步回归筛选最佳模型、解读分析模型
How to modify a node_ Files in modules
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
MIT6.031 软件构造 Reading7阅读笔记Designing Specifications（设计规范）
esp32s3 IPERF例程测试 esp32s3吞吐量测试
$15.8 billion! 2021 the world's top15 most profitable hedge fund giant
R语言fpc包的dbscan函数对数据进行密度聚类分析、plot函数可视化聚类图
MySQL高阶语句（一）
Wechat applet payment password input
Interview shock 60: what will cause MySQL index invalidation?
居家办公被催之后才明白的时间管理
Usage of rxjs mergemap
在 Golang 中构建 CRUD 应用程序