【Spring Boot 3】Thymeleaf 使用详解 向右看齐 2021-08-24 22:09 365阅读 0赞 在上篇文章[【Spring Boot 2】web应用开发,实现CRUD][Spring Boot 2_web_CRUD]中简单介绍了一下 Thymeleaf,这篇文章将更加全面详细的介绍 Thymeleaf 的使用。Thymeleaf 是新一代的模板引擎,在 Spring4.0 中推荐使用 Thymeleaf 来做前端模版引擎。 # **一、Thymeleaf介绍** # 1、Thymeleaf是一个跟JSP类似的模板引擎,它可以完全替代JSP。 相较于其他引擎,它有三个极吸引人的特点:1、Thymeleaf在有网络和无网络的情况下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持HTML模型,然后在HTML标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释和HTML时会忽略未定义的标签属性,所以Thymeleaf的模板可以静态的运行;当有数 据返回页面时,Thymeleaf标签会动态地替换掉静态内容,使页面动态显示。 2、Thymeleaf开箱即用的特性。它提供标准和Spring标准两种方言,可以直接套用模板数显JSTL、OGNL表达式效果,避免每天套模板、改JSTL、改标签的困扰。同时开发人员可以扩展和创建自定义的方言。 3、Thymeleaf提供spring标准方言和一个与springMVC完美集成的可选模板,可以快速的实现表单绑定、属性编辑器、国际化等功能。 # **二、标准表达式语法** # ## 1、变量表达式 ## 变量表达式即OGNL表达式或spring EL表达式(在spring中的术语叫model attributes)。 如下所示: ${session.user.name} 他们讲以HTML标签的一个属性来表示: <span th:text="${book.author.name}"> <li th:each="book : ${books}"> ## 2、选择(星号)表达式 ## 选择表达式很像变量表达式,不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行,如下: *{customer.name} 被指定的 object 由 th:object 属性定义: <div th:object="${book}"> ... <span th:text="*{title}">...</span> ... </div> ## 3、文字国际化表达式 ## 文化国际化表达式允许我们从一个外部文件获取区域文字信息(.properties),用key索引value,还可以提供一组参数(可选): #{main.title} #{message.entrycreated(${entryId})} 可以在模板文件中找到这样的表达式代码: <table> ... <th th:text="#{header.address.city}">...</th> <th th:text="#{header.address.country}">...</th> ... </table> ## 4、URL表达式 ## URL表达式指的是把一个有用的上下文或会话信息添加到URL,这个过程经常被叫做URL重写。 @{/order/list} URL还可以设置参数: @{/order/details(id=${orderId})} 相对路径: @{../documents/report} 让我们看这些表达式: <form th:action="@{/createOrder}"> <a href="main.html" th:href="@{/main}"> # **三、常用th标签简介** # <table> <tbody> <tr> <th>关键字</th> <th>功能介绍</th> <th>案例</th> </tr> </tbody> <tbody> <tr> <td>th:id</td> <td>替换id</td> <td><code><input th:id="'xxx' + ${collect.id}"/></code></td> </tr> <tr> <td>th:text</td> <td>文本替换</td> <td><code><p th:text="${collect.description}">description</p></code></td> </tr> <tr> <td>th:utext</td> <td>支持html的文本替换</td> <td><code><p th:utext="${htmlcontent}">conten</p></code></td> </tr> <tr> <td>th:object</td> <td>替换对象</td> <td><code><div th:object="${session.user}"> </code></td> </tr> <tr> <td>th:value</td> <td>属性赋值</td> <td><code><input th:value="${user.name}" /> </code></td> </tr> <tr> <td>th:with</td> <td>变量赋值运算</td> <td><code><div th:with="isEven=${prodStat.count}%2==0"></div> </code></td> </tr> <tr> <td>th:style</td> <td>设置样式</td> <td><code>th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" </code></td> </tr> <tr> <td>th:onclick</td> <td>点击事件</td> <td><code>th:onclick="'getCollect()'" </code></td> </tr> <tr> <td>th:each</td> <td>属性赋值</td> <td><code>tr th:each="user,userStat:${users}"> </code></td> </tr> <tr> <td>th:if</td> <td>判断条件</td> <td><code> <a th:if="${userId == collect.userId}" > </code></td> </tr> <tr> <td>th:unless</td> <td>和th:if判断相反</td> <td><code><a th:href="@{/login}" th:unless=${session.user != null}>Login</a> </code></td> </tr> <tr> <td>th:href</td> <td>链接地址</td> <td><code><a th:href="@{/login}" th:unless=${session.user != null}>Login</a> /> </code></td> </tr> <tr> <td>th:switch</td> <td>多路选择 配合th:case 使用</td> <td><code><div th:switch="${user.role}"> </code></td> </tr> <tr> <td>th:case</td> <td>th:switch的一个分支</td> <td><code><p th:case="'admin'">User is an administrator</p></code></td> </tr> <tr> <td>th:fragment</td> <td>布局标签,定义一个代码片段,方便其它地方引用</td> <td><code><div th:fragment="alert"></code></td> </tr> <tr> <td>th:include</td> <td>布局标签,替换内容到引入的文件</td> <td><code><head th:include="layout :: htmlhead" th:with="title='xx'"></head> /> </code></td> </tr> <tr> <td>th:replace</td> <td>布局标签,替换整个标签到引入的文件</td> <td><code><div th:replace="fragments/header :: title"></div> </code></td> </tr> <tr> <td>th:selected</td> <td>selected选择框 选中</td> <td><code>th:selected="(${xxx.id} == ${configObj.dd})"</code></td> </tr> <tr> <td>th:src</td> <td>图片类地址引入</td> <td><code><img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> </code></td> </tr> <tr> <td>th:inline</td> <td>定义js脚本可以使用变量</td> <td><code><script type="text/javascript" th:inline="javascript"></code></td> </tr> <tr> <td>th:action</td> <td>表单提交的地址</td> <td><code><form action="subscribe.html" th:action="@{/subscribe}"></code></td> </tr> <tr> <td>th:remove</td> <td>删除某个属性</td> <td><code><tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。</code></td> </tr> <tr> <td>th:attr</td> <td>设置标签属性,多个属性可以用逗号分隔</td> <td>比如<code>th:attr="src=@{/image/aa.jpg},title=#{logo}"</code>,此标签不太优雅,一般用的比较少。</td> </tr> </tbody> </table> 还有非常多的标签,这里只列出最常用的几个,由于一个标签内可以包含多个th:x属性,其生效的优先级顺序为: include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove。 # **四、几种常用的使用方法** # ## 1、赋值、字符串拼接 ## <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}!|"> ## 2、条件判断if/Unless ## Thymeleaf中使用th:if和th:unless属性进行条件判断,下面的例子中,`<a>`标签只有在`th:if`中条件成立时才显示: <a th:if="${myself=='yes'}" > </i> </a> <a th:unless=${session.user != null} th:href="@{/login}" >Login</a> `th:unless` 于 `th:if` 恰好相反,只有表达式中的条件不成立,才会显示其内容。 也可以使用 `(if) ? (then) : (else)`这种语法来判断显示的内容 ## 3、for循环 ## <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:布尔值,当前循环是否是最后一个 ## 4、URL ## 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})}">view</a> <!-- Will produce '/gtvg/order/3/details' (plus rewriting) --> <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a> 设置背景 <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> 几点说明: * 上例中 URL 最后的`(orderId=${o.id}) `表示将括号内的内容作为 URL 参数处理,该语法避免使用字符串拼接,大大提高了可读性 * `@{...}`表达式中可以通过`{orderId}`访问 Context 中的 orderId 变量 * `@{/order}`是 Context 相关的相对路径,在渲染时会自动添加上当前 Web 应用的 Context 名字,假设 context 名字为 app,那么结果应该是 `/app/order` ## 5、内联js ## 内联文本:\[\[…\]\] 内联文本的表示方式,使用时,必须先用`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'; /* -]*/ ## 6、内嵌变量 ## 为了模板更加易用,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)} # **五、使用Thymeleaf布局** # Spring Boot 2.0 将布局单独提取了出来,需要单独引入依赖:thymeleaf-layout-dialect。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> </dependency> 定义代码片段 <footer th:fragment="copy"> © 2019 </footer> 在页面任何地方引入: <body> <div th:insert="layout/copyright :: copyright"></div> <div th:replace="layout/copyright :: copyright"></div> </body> th:insert 和 th:replace 区别,insert 只是加载,replace 是替换。Thymeleaf 3.0 推荐使用 th:insert 替换 2.0 的 th:replace。 返回的 HTML 如下: <body> <div> © 2019 </div> <footer>© 2019 </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 是文件地址,如果有文件夹可以这样写`fileName/layout:htmlhead`,htmlhead 是指定义的代码片段 如 th:fragment="copy" [Spring Boot 2_web_CRUD]: https://blog.csdn.net/guorui_java/article/details/104181423
还没有评论,来说两句吧...