Thymeleaf的相关知识

最新推荐文章于 2022-08-31 16:16:12 发布
瑾琳
最新推荐文章于 2022-08-31 16:16:12 发布
阅读量652
点赞数
分类专栏： spring
本文链接：https://blog.csdn.net/qq_39879632/article/details/81839995
版权
spring 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
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这个片段放到这里
&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="action=@{/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="action=@{/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">
&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">
&copy;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">
&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>
&copy;2018<a href="https://waylau.com">waylau.com</a>
<footer>
</div>

<footer>
&copy;2018<a href="https://waylau.com">waylau.com</a>
<footer>

<div>
&copy;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 &lt;b&gt; great！&lt;/b&gt;"</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
瑾琳
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf的相关知识

Thymeleaf 标准方言一、如何识别标准方言1.&lt;span th:text="..."&gt; 此种形式是比较常用的；不过需要在h5的标签里面引入p命名空间例如：&lt;html xmlns:th="http://www.thymeleaf.org"&gt;&lt;p th:text="#{home.welcome}"&gt;Welcome to our grocery s..
复制链接

扫一扫
专栏目录