首页 IT程序员内容详情

Thymeleaf根本不需要看视频学习,看完这篇文章就够了

2021-07-24 23173 编程艺术家

Thymeleaf简介


Thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,基于Apache License 2.0许可,由Daniel Fernández创建,该作者还是Java加密库Jasypt的作者。


Thymeleaf提供了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP,或其他模板引擎,如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。


1、变量

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

1

意味着 标签中的内容会被表达式$ {today}的值所替代,无论模板中它的内容是什么,之所以在模板中“多此一举“地填充它的内容,完全是为了它能够作为原型在浏览器中直接显示出来。

假设today的值为2015年8月14日,那么渲染结果为:< p>Today is: 2015年8月14日.< /p>。可见Thymeleaf的基本变量和JSP一样,都使用 ${.} 表示获取变量的值。


2、URL

URL在Web应用模板中占据着十分重要的地位,需要特别注意的是Thymeleaf对于URL的处理是通过语法 @{…} 来处理的。Thymeleaf支持绝对路径URL


<a th:href="@{http://www.thymeleaf.org}">Thymeleaf</a>

1

同时也能够支持相对路径URL:


另外,如果需要Thymeleaf对URL进行渲染,那么务必使用th:href,th:src等属性,下面是一个例子


<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->

<a href="details.html" 

   th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>

<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->

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

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->

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

1

2

3

4

5

6

7

几点说明:


上例中URL最后的 (orderId=${o.id}) 表示将括号内的内容作为URL参数处理,该语法避免使用字符串拼接,大大提高了可读性 @{…} 表达式中可以通过 {orderId} 访问Context中的orderId变量 @{/order} 是Context相关的相对路径,在渲染时会自动添加上当前Web应用的Context名字,假设context名字为app,那么结果应该是/app/order


3、字符串替换

很多时候可能我们只需要对一大段文字中的某一处地方进行替换,可以通过字符串拼接操作完成:


<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

1

一种更简洁的方式是:


<span th:text="|Welcome to our application, ${user.name}!|">

1

当然这种形式限制比较多,|…|中只能包含变量表达式${…},不能包含其他常量、条件表达式等。


4、运算符

在表达式中可以使用各类算术运算符,例如+, -, *, /, %


th:with="isEven=(${prodStat.count} % 2 == 0)"

1

逻辑运算符>, <, <=,>=,==,!=都可以使用,唯一需要注意的是使用<,>时需要用它的HTML转义符:


th:if="${prodStat.count} &gt; 1"

th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

1

2

thymeleaf常用th标签

关键字 功能 案例

th:id 替换id <input th:id="'xxx' + ${collect.id}"/>

th:text 文本替换,包括html标签 若 home.welcome=Welcome to our <b>fantastic</b> grocery store!

若<p th:text="#{home.welcome}"></p>解析结果为:

<p>Welcome to our <b>fantastic</b> grocery store!</p>

th:utext 文本替换,html标签会显示出正确的样式 <p th:utext="#{home.welcome}"></p>即可

Welcome to our fantastic grocery store!

等效于html:<p>Welcome to our <b>fantastic</b> grocery store!</p>

th:object 替换对象 用于表单数据对象绑定,将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。

例如:

  public class LoginBean implements Serializable{

 @RequestMapping(value = "/login", method = RequestMethod.POST)

 public String login(@ModelAttribute(value = "loginBean") LoginBean loginBean,ModelMap model) {...} 

< form id=“login-form” th:action="@{/login}" th:object="${loginBean}">…< /form>

th:value 属性赋值 <input th:value = "${user.name}" />

th:with 定义局部变量   <div th:with="firstPer=${persons[0]}">

 <p>The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.</p>

 </div>

当th:with被处理,firstPer变量创建一个局部变量和变量添加到map自上下文,

以便它是用于评估和其他上下文中声明的变量从开始,但只有包含< div >标记的范围内。

如果定义多个局部变量

<div th:with="firstPer=${persons[0]},secondPer=${persons[1]}">

th:style 设置样式 <div th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"></div>

th:onclick 点击事件 <td th:onclick = "'getCollect()'"></td>

th:each 属性赋值 <tr th:each = "user,userStat:${users}">

th:if 判断条件 <a th:if = "${userId}"> 如果userId不为空就执行a标签

th:unless 和th:if判断相反 <a th:href="@{/login} th:unless=${session.user != null}">Login</a>

th:href 链接地址 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:switch 多路选择配合th:case使用 <div class="col-sm-9">

  <div th:switch="${channel.enable}">

    <p th:case="'1'">

      <input id="enable" name="enable" type="radio" class="ace" value="1" checked="checked" />

      <span class="lbl">启用</span>

      <input id="enable1" name="enable" type="radio" class="ace" value="0" />

      <span class="lbl">停用</span>

    </p>

    <p th:case="'0'">

      <input id="enable2" name="enable" type="radio" class="ace" value="1" />

      <span class="lbl">启用</span>

      <input id="enable3" name="enable" type="radio" class="ace" value="0" checked="checked" />

      <span class="lbl">停用</span>

    </p>

  </div>

</div>

th:fragment 自定义片段 定义fragment

所有的fragment可以写在一个文件里面,也可以单独存在,例如

 <footer th:fragment="copy">

 the content of footer

 </footer>

fragment的引用

 th:insert:保留自己的主标签,保留th:fragment的主标签。

  th:replace:不要自己的主标签,保留th:fragment的主标签。

  th:include:保留自己的主标签,不要th:fragment的主标签。(官方3.0后不推荐)

  导入片段:

 <div th:insert="footer :: copy"></div>

 <div th:replace="footer :: copy"></div>

<div th:include="footer :: copy"></div>

 结果为:

 <div> 

  <footer> 

   the content of footer

  </footer>

 </div>

  

  <footer> 

   the content of footer

  </footer>

 <div> 

   the content of footer

 </div>

th:replace=”thymeleaf的根目录+片段的html名+ :: +自定义的片段名”

th:include 布局标签,替换内容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"></head> />

th:replace 布局标签,替换整个标签到引入的文件 <div th:replace="fragments/header :: title"></div>

th:selectd selected选择框选中 th:selected="(${xxx.id} == ${configObj.dd})"

th:src 图片类地址引入 <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />

th:inline 定义js脚本可以使用变量 <script type="text/javascript" th:inline="javascript">

th:action 表单提交的地址 <form action="subscribe.html" th:action="@{/subscribe}">

th:remove 删除某个属性 <tr th:remove="all">

1.all:删除包含标签和所有的孩子。

2.body:不包含标记删除,但删除其所有的孩子。

3.tag:包含标记的删除,但不删除它的孩子。

4.all-but-first:删除所有包含标签的孩子,除了第一个。

5.none:什么也不做。这个值是有用的动态评估

th:attr 设置标签属性,多个属性可以用逗号分隔 比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。


————————————————

版权声明:本文为CSDN博主「程序猿小离」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_45641191/article/details/109551929


 暂无评论,快来抢沙发吧~

发布评论