Thymeleaf——语法篇

·  阅读 732
Thymeleaf——语法篇

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文系作者 不太自律的程序猿原创,转载请私信并在文章开头附带作者和原文地址链接。

唠家常

之前有简单介绍了一下Thymeleaf,以及为什么推荐使用它,以及在springboot中集成使用。本次就对于Thymeleaf的一些语法,做一些介绍。
Thymeleaf官方文档里面有很多概念性的东西,同时也有Thymeleaf语法的使用教程,感兴趣的小伙伴自行查看。

th语法

我们想要使用Thymeleaf的语法,首先需要在html页面中引入thymeleaf命名空间,即,此时在html模板文件中动态的属性使用th:命名空间修饰 。

<html lang="en" xmlns:th="http://www.thymeleaf.org">
</html>
复制代码

变量表达式(获取变量值)

th:text :设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。优先级不高:order=7 image.png

<!--同EL表达式有些相似的效果,如果有数据,被替换-->
<div th:text="'不太自律的程序猿,'+${hello}+'!!'">
   
</div>
复制代码

这个地方${hello}使用的就是后端传递过来的"你好"

访问Request作用域中的值

<div th:text="${#httpServletRequest.getAttribute('key')}"></div> 或者:<span th:text="${key}"></div>
复制代码

访问Session会话作用域中的值

<div th:text="${session.key}"></div>
复制代码

访问Application全局作用域中的值

<div th:text="${application.key}"></div>
复制代码

设置属性值

th:value:设置当前元素的value值,类似修改指定属性的还有th:src,th:href。优先级不高:order=6

<!--同EL表达式有些相似的效果,如果有数据,被替换-->
<input  th:value="${hello}">
复制代码

执行效果就是input赋值为传递过来的"你好" image.png

URL表达式(引入URL)

th:src 和 th:href

  • 引用静态资源文件(CSS使用th:href,js使用使用th:src) image.png
  • href链接URL(使用th:href) image.png
1.URL最后的(name=${name})表示将括号内的内容作为URL参数处理,该语法避免使用字符串拼接,大大提高了可读性
2.@{/usethymeleaf}是Context相关的相对路径,在渲染时会自动添加上当前Web应用的Context名字,假设context名字为seconddemo,那么结果应该是/seconddemo/usethymeleaf,即URL中以”/“开头的路径(比如/usethymeleaf将会加上服务器地址和域名和应用cotextpath,形成完整的URL。
3.th:href属性修饰符:它将计算并替换使用href链接URL 值,并放入的href属性中。
4.th:href中可以直接使用静态地址
复制代码

遍历循环元素

th:each:遍历循环元素,和th:text或th:value一起使用。注意该属性修饰的标签位置,详细往后看。优先级很高:order=2

  • 第一个参数:user定义变量,接收集合中的一个元素
<div th:each="user:${userList}"> 
<span th:text="${user.id}"></span> 
<span th:text="${user.name}"></span>
</div>
复制代码

条件判断

th:if:条件判断,类似的还有th:unless,th:switch,th:case。优先级较高:order=3
th:if是条件满足则执行,th:unless相反,条件不满足时执行

<div th:if="${flag eq 0}"> 不太自律的程序猿 </div>
复制代码

th:switch/th:case
一旦某个 case 判断值为 true,剩余的 case 默认不执行,"*"表示默认的 case,前面的 case 都不匹配时候,执行默认的 case

<div th:switch="${flag}"> 
<span th:case="1">不太自律的程序猿1</span><br/> 
<span th:case="2">不太自律的程序猿2</span><br/> 
<span th:case="*">不太自律的程序猿3</span> 
</div>
复制代码

定义代码块

th:fragment:定义代码块,方便被th:insert引用。优先级最低:order=8

<div th:fragment="pageHead"> 
一些代码,比如说同一个网站每个页面的头和尾都相同,将公共的代码抽取出来写在这里 
</div>
复制代码

th:replace 和 th:include 都是加载代码块内容,但是还是有所不同

  • th:include:加载模板的内容: 读取加载节点的内容(不含节点名称),替换div内容
  • th:replace:替换当前标签为模板中的标签,加载的节点会整个替换掉加载它的div
  • 例如:
    <!-- th:fragment 定义用于加载的块 -->
    <div th:fragment="view"> 
    这是公共部分
    </div>
    复制代码
  • 引用时如下:
    include:
    <div th:include="pagination::view">不太自律的程序猿1</div>
    replace:
    <div th:replace="pagination::view">不太自律的程序猿2</div>
    复制代码
  • 结果如下:
    include:
    <div>这是公共部分</div>
    replace:
    <div>这是公共部分</div>
    复制代码

代码块引入

th:insert:代码块引入,类似的还有th:replace,th:include,三者的区别较大,若使用不恰当会破坏html结构,常用于公共代码块提取的场景。优先级最高:order=1

<div th:if="${flag eq 0}"> 不太自律的程序猿 </div>
复制代码

在页面中引入 th:fragment 定义的代码片段,主要有下面三种形式:

  • th:inclued="view::selector":"::"前面是模板文件名,后面是选择器
  • ::selector:只写选择器,这里指fragment名称,则加载本页面对应的fragment
  • view或者"view::html":只写模板文件名或者使用 html 标签,则加载整个页面
<div th:include="common/view1::pageHead"></div>
复制代码

声明变量

th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。优先级一般:order=4

修改属性

th:attr:修改任意属性,实际开发中用的较少,因为有丰富的其他th属性帮忙,类似的还有th:attrappend,th:attrprepend。优先级一般:order=5

感谢诸君的观看,文中如有纰漏,欢迎在评论区来交流。如果这篇文章帮助到了你,欢迎点赞👍关注。

分类:
后端
标签:
收藏成功!
已添加到「」, 点击更改