当前位置：首页 > 资讯 > 技术文档

spring boot(四)之thymeleaf使用详解

时间：2022-08-28 10:49 编辑：来源：阅读：
扫一扫，手机访问

摘要：spring boot(四)之thymeleaf使用详解

在上篇文章src=@{/image/aa.jpg},title=}"，此标签不太优雅，一般用的比较少。还有非常多的标签，这里只列出最常用的几个,由于一个标签内可以包含多个th:x属性，其生效的优先级顺序为: include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove。 [b]几种常用的使用方法[/b] [b]1、赋值、字符串拼接[/b]

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

字符串拼接还有另外一种简洁的写法

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

[b]2、条件判断 If/Unless[/b] Thymeleaf中使用th:if和th:unless属性进行条件判断，下面的例子中，<a>标签只有在th:if中条件成立时才显示：

<a th:if="${myself=='yes'}" > </i> </a>
<a th:unless=${session.user != null} th:href="@{/login}" rel="external nofollow" >Login</a>

th:unless于th:if恰好相反，只有表达式中的条件不成立，才会显示其内容。也可以使用 (if) ? (then) : (else) 这种语法来判断显示的内容 [b]3、for 循环[/b]

<tr th:each="collect,iterStat : ${collects}"> 
 <th scope="row" th:text="${collect.id}">1</th>
 <td >
 <img th:src="${collect.webLogo}"/>
 </td>
 <td th:text="${collect.url}">Mark</td>
 <td th:text="${collect.title}">Otto</td>
 <td th:text="${collect.description}">@mdo</td>
 <td th:text="${terStat.index}">index</td>
 </tr>

iterStat称作状态变量，属性有： index:当前迭代对象的index（从0开始计算） count: 当前迭代对象的index(从1开始计算) size:被迭代对象的大小 current:当前迭代变量 even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算） first:布尔值，当前循环是否是第一个 last:布尔值，当前循环是否是最后一个 [b]4、URL[/b] URL在Web应用模板中占据着十分重要的地位，需要特别注意的是Thymeleaf对于URL的处理是通过语法@{...}来处理的。如果需要Thymeleaf对URL进行渲染，那么务必使用th:href，th:src等属性，下面是一个例子

<!-- Will produce 'http://localhost:8080/standard/unread' (plus rewriting) -->
 <a th:href="@{/standard/{type}(type=${type})}" rel="external nofollow" >view</a>
<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" rel="external nofollow" th:href="@{/order/{orderId}/details(orderId=${o.id})}" rel="external nofollow" >view</a>

[b]设置背景[/b]

<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>

根据属性值改变背景

 <div class="media-object resource-card-image" th:style="'background:url(' + @{(${collect.webLogo}=='' ? 'img/favicon.png' : ${collect.webLogo})} + ')'" ></div>

几点说明： [list] [*]上例中URL最后的(orderId=${o.id}) 表示将括号内的内容作为URL参数处理，该语法避免使用字符串拼接，大大提高了可读性[/*] [*]@{...}表达式中可以通过{orderId}访问Context中的orderId变量[/*] [*]@{/order}是Context相关的相对路径，在渲染时会自动添加上当前Web应用的Context名字，假设context名字为app，那么结果应该是/app/order[/*] [/list] [b]5、内联js[/b] 内联文本：[[...]]内联文本的表示方式，使用时，必须先用th:inline="text/javascript/none"激活，th:inline可以在父级标签内使用，甚至作为body的标签。内联文本尽管比th:text的代码少，不利于原型显示。

<script th:inline="javascript">
/*<![CDATA[*/
...
var username = /*[[${sesion.user.name}]]*/ 'Sebastian';
var size = /*[[${size}]]*/ 0;
...
/*]]>*/
</script>

js附加代码：

/*[+
var msg = 'This is a working application';
+]*/

js移除代码： /*[- */ var msg = 'This is a non-working template'; /* -]*/ [b]6、内嵌变量[/b] 为了模板更加易用，Thymeleaf还提供了一系列Utility对象（内置于Context中），可以通过#直接访问： dates ： java.util.Date的功能方法类。 calendars : 类似#dates，面向java.util.Calendar numbers : 格式化数字的功能方法类 strings : 字符串对象的功能类，contains,startWiths,prepending/appending等等。 objects: 对objects的功能类操作。 bools: 对布尔值求值的功能方法。 arrays：对数组的功能类方法。 lists: 对lists功能类方法 sets maps ... 下面用一段代码来举例一些常用的方法：

dates
/*
 * Format date with the specified pattern
 * Also works with arrays, lists or sets
 */
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
/*
 * Create a date (java.util.Date) object for the current date and time
 */
${#dates.createNow()}
/*
 * Create a date (java.util.Date) object for the current date (time set to 00:00)
 */
${#dates.createToday()}
strings
/*
 * Check whether a String is empty (or null). Performs a trim() operation before check
 * Also works with arrays, lists or sets
 */
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}
/*
 * Check whether a String starts or ends with a fragment
 * Also works with arrays, lists or sets
 */
${#strings.startsWith(name,'Don')}   // also array*, list* and set*
${#strings.endsWith(name,endingFragment)}  // also array*, list* and set*
/*
 * Compute length
 * Also works with arrays, lists or sets
 */
${#strings.length(str)}
/*
 * Null-safe comparison and concatenation
 */
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}
/*
 * Random
 */
${#strings.randomAlphanumeric(count)}

[b]使用thymeleaf布局[/b] 使用thymeleaf布局非常的方便定义代码片段

<footer th:fragment="copy"> 
© 2016
</footer>

在页面任何地方引入：

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

th:include 和 th:replace区别，include只是加载，replace是替换返回的HTML如下：

<body> 
 <div> © 2016 </div> 
 <footer>© 2016 </footer> 
</body>

下面是一个常用的后台页面布局，将整个页面分为头部，尾部、菜单栏、隐藏栏，点击菜单只改变content区域的页面

<body class="layout-fixed">
 <div th:fragment="navbar" class="wrapper" role="navigation">
 <div th:replace="fragments/header :: header">Header</div>
 <div th:replace="fragments/left :: left">left</div>
 <div th:replace="fragments/sidebar :: sidebar">sidebar</div>
 <div layout:fragment="content" id="content" ></div>
 <div th:replace="fragments/footer :: footer">footer</div>
 </div>
</body>

任何页面想使用这样的布局值只需要替换中见的 content模块即可

<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
 <body>
 <section layout:fragment="content">
 ...

也可以在引用模版的时候传参

<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>

layout 是文件地址，如果有文件夹可以这样写 [code]fileName/layout:htmlhead[/code] htmlhead 是指定义的代码片段如[code] th:fragment="copy"[/code] 源码案例这里有一个开源项目几乎使用了这里介绍的所有标签和布局，大家可以参考： [url=https://github.com/cloudfavorites/favorites-web]cloudfavorites[/url] 以上所述是小编给大家介绍的spring boot(四)之thymeleaf使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：java实现大文件分割与合并的实例代码
下一篇：Java 数组详解及示例代码

资讯排行榜
更多>>