【thymeleaf文档精华版】springboot thymeleaf常用语法中文教程

作者: ʘᴗʘ发布时间:2021-09-14 22:10 浏览量:2143 点赞:1769 售价:0

前言

现在虽然Vue、React等前端框架盛行,但是部分需要SEO的页面,还是得用thymeleaf之类的模板引擎来渲染。thymeleaf的官方文档,写的太过详细,显得比较啰嗦。本文主要是把thymeleaf官方的英文文档,结合作者自己的使用经验,整理成了一篇可以用来速查的中文教程,方便大家。其中,一些使用起来不方便或使用频率低的语法,本文直接跳过不写了。

一、thymeleaf赋值

th:text

th:text是最常用的语法,用来将一个字符串赋值到对应的标签内。比如:<a th:text="${car.color}"></a>,意思就是把car这个对象的color填入到a标签内。不过要注意,这里的字符串,不能包含HTML标签,会被转义或过滤。

th:utext

th:utext类似上面的th:text,区别是th:utext输出的字符串,是可以包含HTML标签、字符的。比如你要把一段HTML字符串填入一个div中,那就必须使用th:utext了。

属性赋值

例如:th:srcth:classth:style等等,和th:text类似的用法,只不过赋值到了对应HTML标签的属性上。PS:thymeleaf支持的属性赋值太多了,有很多使用频率很低。所以记忆常用的就可以,遇到生僻的属性需要赋值,可以先用th:属性试试,如果不支持或报错,就用下面的自定义属性赋值来解决。

自定义属性赋值

th:attr主要用来给HTML标签上,我们自定义的属性赋值。比如<div th:attr="data-id=${id}"></div>

字符串拼接

<a th:text="'hello world' + ${car.color}">123</a>或者<a th:text="${'hello world' + car.color}">123</a>,或者两个变量拼接<a th:text="${a} + ${b}"></a>

格式化日期

<h1 th:text="${#dates.format(time,'yyyy-MM-dd HH:mm:ss')}"></h1>,其中time是后端的变量,类型是Java的Date。

内置对象

可以理解为,springboot中的很多基础对象,无需通过model赋值,即可在thymeleaf模板中使用。

  • #ctx 上下文对象
  • #vars 同 #ctx,表示上下文变量
  • #locale 上下文本地化(特定的地理区域)变量,可参考 java.util.Locale
  • #request HttpServletRequest 对象,可参考 javax.servlet.http.HttpServletRequest
  • #response HttpServletResponse 对象,可参考 javax.servlet.http.HttpServletResponse
  • #session HttpSession 对象,可参考 javax.servlet.http.HttpSession
  • #servletContext ServletContext 对象,可参考 javax.servlet.ServletContext

以request举例,用法:

<!-- HTTP/1.1 -->
<p th:text="${#request.protocol}"></p>
<!-- http -->
<p th:text="${#request.scheme}"></p>
<!-- localhost -->
<p th:text="${#request.serverName}"></p>
<!-- 8080 -->
<p th:text="${#request.serverPort}"></p>
<!-- GET -->
<p th:text="${#request.method}"></p>
<!-- /standard-expression-syntax/variables -->
<p th:text="${#request.requestURI}"></p>
<!-- http://localhost:8080/standard-expression-syntax/variables -->
<p th:text="${#request.requestURL}"></p>
<!-- /standard-expression-syntax/variables -->
<p th:text="${#request.servletPath}"></p>
<!-- java.util.Collections$3@203646fe -->
<p th:text="${#request.parameterNames}"></p>
<!-- {q=[Ljava.lang.String;@3308c69f} -->
<p th:text="${#request.parameterMap}"></p>
<!-- q=expression -->
<p th:text="${#request.queryString}"></p>

二、thymeleaf逻辑控制

th:if

<p th:if="${a} ne null">hello world</p>意思是:当变量a不等于null时,显示这个p标签。最新版的thymeleaf和Springboot中,th:if里面的大于、小于、等于、不等于已经不需要再使用eq、ne、gt、lt等符号了,直接用java代码里的>!=之类的就可以了。

三元表达式

例如<div th:text="${car}=='BMW'?'豪车':'买菜车'"></div>,和Java中的三元表达式类似。部分情况下,三元表达式能很好的弥补thymeleaf只有if没有else的尴尬局面。

th:switch

直接看代码就理解了

<div th:switch="${car.color}">
      <p th:case="'yellow'">汽车是黄色的</p>
      <p th:case="'red'">汽车是红色的</p>
</div>

th:each

循环,使用频率非常高。用来将后端传过来的List等,遍历输出。重点提示:th:each所在的标签本身,也会循环。比如你要实现一个ul标签里,循环li标签。那么th:each应该写在li标签上。

<li th:each="articleData,k:${hotArticle}">
    <span th:text="${k.index}+${articleData.title}">基于java jsp+mysql+Spring+mybatis的SSM二手交易网站设计和实现【建议收藏】</span>
</li>

上面的代码中,后端传过来的List是hotArticle,articleData相当于hotArticle这个List里的一项。需要特别注意的是th:each里面那个k,这个变量里包含了很多常用的东西index,count,size,current,even,odd,first,last,比如k.index就是循环的index,从0开始。有点像Java代码里for循环for(int i=0;i<100;i++)里面的i。

三、thymeleaf在JavaScript、CSS中赋值(内联)

赋值给JavaScript变量

一定要在JavaScript的<script>标签里添加th:inline="javascript",然后用[[]]来包围后端变量赋值即可。例如:<script th:inline="javascript"> var a = [[${msg}]] </script>

赋值给css style

类似赋值给JavaScript,也一定要在<style>标签里添加th:inline="css",然后就可以使用[[]]包围的变量,在css任意地方使用了。可以是css的class,也可以是具体的css属性值。例如:

<style th:inline="css">
    .[[${classname}]] {
        text-align: [[${align}]];
    }
</style>

四、模板操作

模板操作逐渐被淘汰了,主要作用是一些公共页面HTML代码片段的提取,比如header、footer之类的。随着现在webpack等前端工作流的兴起,使用这些工具就可以达到HTML公共代码片段的随处引用。所以,模板操作这里就不讲了。

五、预定义处理函数

就是thymeleaf内置的各种函数,比如日期格式化、数字四舍五入、字符串截取、查找、拼接等等。这块根据实际经验,建议也不要大规模应用。有需要数据处理的场景,尽量让后端完成。因为HTML模板中,各种单引号、双引号互相包含,各种标签缩进嵌套等等,很容易造成一些书写上的错误,并且不一定会报错被发现。在HTML代码中大量使用逻辑控制,是一个风险很高的操作。

所以本文尽量只介绍影响数据展示,但不改变数据值的常用预处理:

数字前方补零

${#numbers.formatInteger('123',4)}结果是0123

千分位处理

${#numbers.formatInteger('1000',2,'COMMA')}" 效果1,000COMMA替换为WHITESPACE,就可以使用空格分隔。

生成数组-常用于循环输出一些相似数据

<div th:each="num : ${#numbers.sequence(0,4)}" >
    <p th:text="${num}"></p>
</div>

效果如下:

<div><p>0</p></div>
<div><p>1</p></div> 
<div><p>2</p></div>
<div><p>3</p></div>
<div><p>4</p></div>

字符串判空(null或长度=0)

${#strings.isEmpty(name)},返回值是Boolean

默认值设置

${#strings.defaultString(text,'该值为null')},当text为null时,使用默认值。

大小写转换

${#strings.toLowerCase('ABC')}${#strings.toUpperCase('abc')}

获取字符串长度

${#strings.length('abc')}

还有很多thymeleaf函数可以用来处理后端赋值的变量,但是实际很少使用。主要原因就是上面提到的风险和记忆起来实在困难。thymeleaf的很多语法和java类似,有些又不太一样,所以记忆起来很费劲。

判断list是否为空

  • List不为空:th:if="${not #lists.isEmpty(relationData)}"
  • List为空:th:if="${#lists.isEmpty(relationData)}"
  • 获取List的size:${#lists.size(data)}
  • 判断list是否包含某个元素:${#lists.contains(item)},返回值是boolean

其中,relationData是java传递过来的List数组。

thymeleaf map相关操作

  • map不为空:${#maps.isEmpty(map)},返回值是boolean
  • 获取map的size:${#maps.size(map)},返回值是int
  • 判断map是否包含某个key:${#maps.containsKey(map,key)},返回值是boolean
  • 判断map是否包含某个value:${#maps.containsValue(map,value)},返回值是boolean

六、预定义函数查询方法

预定义处理函数还有很多很多,这里就不一一列举了。下面给大家提供可以查询这些函数的链接以及使用方法。thymeleaf函数文档,使用方法如下图所示:

【thymeleaf文档精华版】springboot thymeleaf常用语法中文教程

版权声明:《【thymeleaf文档精华版】springboot thymeleaf常用语法中文教程》为CoderBBB作者「ʘᴗʘ」的原创文章,转载请附上原文出处链接及本声明。

原文链接:https://www.coderbbb.com/articles/6

其它推荐: