Thymeleaf 基本用法总结(12月1日更新)

最新推荐文章于 2024-03-26 22:00:53 发布

$Mr.zheng

最新推荐文章于 2024-03-26 22:00:53 发布

阅读量704

点赞数 3

分类专栏： Thymeleaf 文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_43729418/article/details/110309689

版权

Thymeleaf 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Thymeleaf 基本用法总结

1. 引用命名空间

<html xmlns:th="http://www.thymeleaf.org">

在html中引入此命名空间，可避免编辑器出现html验证错误，虽然加不加命名空间对Thymeleaf的功能没有任何影
响。

2. 输出内容

说明：

th:text 用来将内容输出到所在标签的body中。
#{home.welcome} 用来引入数据home对象中的 welcome属性。
可以用th:utext 用来显示“unescaped ” 的html内容。

<p>Today is: 
<span th:text="${today}">13 February 2011</span>
</p>

说明：${today} 用来引用 today 变量

3. 访问对象

${param.x} 返回名为x 的 request参数。（可能有多个值）
${session.x} 返回名为x的Session参数。
${application.x} 返回名为 servlet context 的参数。

4. 基本语法

4.1. 访问数据

#｛home.welcome｝

4.2. 格式化数据

#{home.welcome(${session.user.name})}

当 home.welcome 为 “abcdegf{0}” 类似这种内容时。（多个参数以逗句分隔）

4.3. 访问变量

${today}

4.4. 访问基本对象

#ctx: the context object. 
#vars: the context variables. 
#locale: the context locale. 
#request: (only in Web Contexts) the HttpServletRequest object. 
#response: (only in Web Contexts) the HttpServletResponse object. 
#session: (only in Web Contexts) the HttpSession object. 
#servletContext: (only in Web Contexts) the ServletContext object.

4.5. 日期的输出

<span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span>

4.6. 星号语法

<div th:object="${session.user}"> <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p> <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p> <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p> </div>

4.7. 输出URL

<a href="product/list.html" th:href="@{/product/list}">Product List</a> <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

4.8. 使用代码段

<div th:insert="~{commons :: main}">...</div>

4.9. 直接输出内容

<span th:text="'working web application'"> -- 输出字符 
<span th:text="2013 + 2"> --输出数据表达式 
<div th:if="${user.isAdmin()} == false">  --输出布尔表达式 
<span th:text="'Welcome to our application, ' + ${user.name} + '!'"> -- 带变量的

4.10. 条件表达式

<tr th:class="${row.even}? 'even' : 'odd'"> ...
</tr> 
<tr th:class="${row.even}? 'alt'">
 ...省略 false 结果的表达方式 
 </tr>
  <div th:object="${session.user}"> 
  ...省略 true 结果的表达方式 
  <p>Age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p>
   </div> 
   <span th:text="${user.name} ?: _">no user authenticated</span> --不做任何处理时用下划 线 _ 表示

4.11. 格式化

<td th:text="${{user.lastAccessDate}}">...</td> --${{.}} 调用默认的格式化器来输出结果

4.12. 预处理

<p th:text="${__#{article.text('textVar')}__}">Some text here...</p>

说明：thymeleaf 的处理模板内容的顺序与书写顺序无关，只能通过 ${expression} ，来将需要先一步计算出来后面要用的变量指定为优化处理。

5. 设置 Attribute 值

5.1. 设置任何Attribute 的方法

<!-- 设置单个 --> 
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/> 
<!-- 一次设置多个 --> 
<img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=# {logo},alt=#{logo}" />

5.2.设置一些内置的Attribute的方法

<li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li> 
<form action="subscribe.html" th:action="@{/subscribe}"> 
  <input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/> 
  <img src="../../images/gtvglogo.png" th:src="@{/images/gtvglogo.png}" th:alt- 
  title="#{logo}" /> 
 </form>

5.3. 设置html里没有指的任何属性的语法

<!-- whatever 可以换成任何你想设的属性 --> <span th:whatever="${user.name}">...</span>

6. 循环输出的语法

6.1. 基本循环

<tr th:each="prod : ${prods}"> 
<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>

6.2. 循环状态的使用

<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>

7. 条件判断

7.1. if 和 unless

<a href="comments.html" th:href="@{/comments(prodId=${prod.id})}" 
th:unless="${#lists.isEmpty(prod.comments)}">view</a> 

<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" 
th:if="${not #lists.isEmpty(prod.comments)}">view</a>

7.2. switch 语句

<div th:switch="${user.role}"> 
  <p th:case="'admin'">User is an administrator</p> 
  <p th:case="#{roles.manager}">User is a manager</p> 
  <p th:case="*">User is some other thing</p> 
</div>

8. 模板 include

8.1. 定义和引用代码块

<!-- 定义代码块 --> 
~~~html 
<div th:fragment="copy"> &copy; 2011 The Good Thymes Virtual Grocery 
</div> 
~~~ 

引用代码块 
~~~html 
<div th:insert="~{footer :: copy}">
</div> 
~~~

<!-- 引用未使用fragment 标注的代码块 --> ~~~html 
<div id="copy-section"> &copy; 
2011 The Good Thymes Virtual Grocery </div> ~~~ 

~~~html 
<div th:insert="~{footer :: #copy-section}">
</div>
 ~~~

8.2. th:insert th:replace th:include 之间的区别

th:insert — 插入代码块
th:replace – 替换代码块会替换掉容器标签
th:include ----和insert相似但只会插入fragment标注body内的内容

8.3 带参数的代码段

<div th:fragment="frag (onevar,twovar)"> 
<p th:text="${onevar} + ' - ' + ${twovar}">...</p> 
</div>

<div th:replace="::frag (${value1},${value2})">...</div> 
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...
</div>

9. 局部变量的使用示例

<div th:with="firstPer=${persons[0]}">
 <p> 
    The name is <span th:text="${firstPer.name}">Julius Caesar</span>. 
 </p> 
 </div> 

<div th:with="firstPer=${persons[0]},secondPer=${persons[1]}"> 
 <p> 
   The name is <span th:text="${firstPer.name}">Julius Caesar</span>. </p> 
 <p> But the name of the second person is <span th:text="${secondPer.name}">Marcus Antonius</span>. </p> 
</div>

10. 注释

<!-- 注释 -->

11. 复选框回显

在这里插入图片描述

12. 获取应用项目路径

ctxPath = [[@{/}]];

$Mr.zheng

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
Thymeleaf 基本用法总结(12月1日更新)

Thymeleaf 基本用法总结1. 引用命名空间<html xmlns:th="http://www.thymeleaf.org">在html中引入此命名空间，可避免编辑器出现html验证错误，虽然加不加命名空间对Thymeleaf的功能没有任何影响。2. 输出内容说明：th:text 用来将内容输出到所在标签的body中。#{home.welcome} 用来引入数据home对象中的 welcome属性。可以用th:utext 用来显示“unescaped ” 的html
复制链接

扫一扫