Thymeleaf语法

官方文档(基于3.0版本),基于springboot项目的,建议直接从第三章Using Texts开始查阅https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

Thymeleaf是spring boot推荐使用的模板语法,除此之外常见的模板语法还有Freemarker和jsp。jsp应该是java程序员最早接触的模板引擎,而Freemarker也很常见。

一.th属性

常用th属性解读

html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个。
1.th:text : 设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。
2.th:value : 设置当前元素的value值,类似修改指定html标签属性的还有th:src,th:href
3.th:each : 遍历循环元素,和th:textth:value一起使用。注意该属性修饰的标签位置,详细看后文。
4.th:if : 条件判断,类似的还有th:unless,th:switch,th:case
5.th:insert : 代码块引入,类似的还有th:replace,th:include,三者区别很大,若使用不恰当会破坏html结构,常用于公共代码块的提取复用。
6.th:fragment : 定义代码块,方便被th:insert引用。
7.th:object : 声明变量,一般和*{}一起配合使用,达到偷懒的效果。

  1. th:attr : 修改任意属性,实际开发中用的较少,因为有丰富的其他th属性帮忙。

常用th属性使用

使用Thymeleaf属性需要注意一下五点:
一.若要使用Thymeleaf语法,首先要声明名称空间

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

二.设置文本内容th:text ,设置input的值th:value ,循环输出th:each ,条件判断th:if,插入代码块th:insert,定义代码块th:fragment,声明变量th:object
三.th:each 的用法需要格外注意,打个比方:如果你要循环一个div中的p标签,则th:each属性必须放在p标签上。若你将th:each放在div上,则循环的将是整个div。
四.变量表达式中提供了很多内置方法,该内置方法是用#开头,请不要与#{}消息表达式弄混。
五.th:insert,th:replace,th:include三种插入代码块的效果相似,但区别很大。

举个栗子,后续会详细说明:

别忘了引入maven依赖,本文用的是springboot环境:

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

项目结构:


捕获.PNG
<!DOCTYPE html>
<!--名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf 语法</title>
</head>
<body>
    <h2>hymeleaf 语法</h2>
    <!--th:text 设置当前元素的文本内容,常用,优先级不高-->
    <p th:text="${thText}" />
    <p th:utext="${thUText}"/>

    <!--th:value 设置当前元素的value值,常用,优先级仅比th:text高-->
    <input type="text" th:value="${thValue}" />

     <!--th:object 声明变量,和*{} 一起使用-->
    <div th:object="${thObject}">
        <p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->
        <p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}-->
        <p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}-->
    </div>

    <!--th:each 遍历列表,常用,优先级很高,仅此于代码块的插入-->
    <!--th:each 修饰在div上,则div层重复出现,若只想p标签遍历,则修饰在p标签上-->
    <div th:each="message : ${thEach}"> <!-- 遍历整个div-p,不推荐-->
        <p th:text="${message}" />
    </div>
   <!--只遍历p,推荐使用-->
  <div>
    <p th:each="user : ${ulist}" th:object="${user}">
        <span th:text="*{id}"></span>
        <span th:text="*{name}"></span>
        <span th:text="*{phone}"></span>
    </p>
</div>

    <!--th:if 条件判断,类似的有th:switch,th:case,优先级仅次于th:each, 其中#strings是变量表达式的内置方法-->
    <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>

    <!--th:insert 把代码块插入当前div中,优先级最高,类似的有th:replace,th:include,~{} :代码块表达式 -->
   <div th:insert="~{template/footer :: copy}"></div>
   <div th:replace="~{template/footer :: copy}"></div>
   <div th:include="~{template/footer :: copy}"></div>

   
</body>
</html>

后台给负责给变量赋值,和跳转页面。


   @RequestMapping("/admin")
    public String toAdmin(Model model){
        PageHelper.startPage(1,10);
        PageHelper.orderBy("id desc");
        List<InterUser> ulist = interUserService.selectInterUserList();
        model.addAttribute("ulist",ulist);
        model.addAttribute("thText","thText1");
        model.addAttribute("thUText","thUText1");
        model.addAttribute("thValue","thValue1");
        model.addAttribute("thEach", Arrays.asList("th:each", "遍历列表"));
        model.addAttribute("thIf", "msg is not null");
        model.addAttribute("thObject", new ThObject(1L, "th:object", "用来偷懒的th属性"));
        return "/admin/admin";
    }

二.标准表达式语法

变量表达式:

${...}

链接表达式:

@{...}

消息表达式:

#{...}

代码块表达式:

~{...}

选择变量表达式

*{...}

变量表达式使用频率最高,其功能也是非常的丰富。所以我们先从简单的代码块表达式开始,然后是消息表达式,再是链接表达式,最后是变量表达式,随带介绍选择变量表达式。

~{...}代码块表达式

支持两种语法

推荐:

~{templatename :: fragmentname}

支持:

~{templatename :: #id}

templatename : 模板名,Thymeleaf会根据模板名解析完整路径:/resources/templates/templatename.html,要注意文件的路径。

   <div th:insert="~{template/footer :: copy}"></div>
   <div th:replace="~{template/footer :: copy}"></div>
   <div th:include="~{template/footer :: copy}"></div>
捕获.PNG

fragment : 片段名,Thymeleaf通过th:fragment声明定义代码块,即th:fragment="fragmentname"

id : HTML的id选择器,使用时要在前面加上#号,不支持class选择器

代码块的声明:

此项目中所有需要复用的html代码块为了统一都放入了/resources/templates/template/文件夹下

footer.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<footer th:fragment="copy">
    &copy; 2011 The Good Thymes Virtual Grocery
</footer>

</body>
</html>
代码块表达式的使用

代码块表达式需要配合th属性(th:insert,th:replace,th:include)一起使用。
th:insert:将代码块片段整个插入到使用了th:insert的HTML标签中,
th:replace:将代码块片段整个替换使用了th:replace的HTML标签中,
th:include:将代码块片段包含的内容插入到使用了th:include的HTML标签中,

用一个官方例子来区分三者的不同。

<!--三种不同的引入方式-->
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

生成的html如下:

<!--th:insert是在div中插入代码块,即多了一层div-->
<div>
    <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
</div>
<!--th:replace是将代码块代替当前div,其html结构和之前一致-->
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
<!--th:include是将代码块footer的内容插入到div中,即少了一层footer-->
<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

#{...}消息表达式

消息表达式一般用于国际化的场景。结构:th:text="#{msg}"

@{...}链接表达式

链接表达式好处

不管是静态资源的引用,form表单的请求,凡是链接都可以用@{...} 。这样可以动态获取项目路径,即便项目名变了,依然可以正常访问

#修改项目名,链接表达式会自动修改路径,避免资源文件找不到
server.context-path=/emp
链接表达式结构

无参:

@{/xxxx}

有参:

@{/xxxx(k1=v1,k2=v2)}
//对应的url结构如下
xxxx?k1=v1&k2=v2

引入本地资源

@{/项目本地的资源路径}

引入外部资源:

@{/webjars/资源在jar包中的路径}

举例:

<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
<link th:href="@{/main/css/itdragon.css}" rel="stylesheet">
<form class="form-login" th:action="@{/user/login}" th:method="post" >
<a class="btn btn-sm" th:href="@{/login.html(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/login.html(l='en_US')}">English</a>

${...}变量表达式

变量表达式有丰富的内置方法,使其更强大,更方便。

变量表达式功能

一、可以获取对象的属性和方法
二、可以使用ctx,vars,locale,request,response,session,servletContext内置对象
三、可以使用dates,numbers,strings,objects,arrays,lists,sets,maps等内置方法(重点介绍)

常用的内置对象

一、ctx :上下文对象。
二、vars :上下文变量。
三、locale:上下文的语言环境。
四、request:(仅在web上下文)的 HttpServletRequest 对象。
五、response:(仅在web上下文)的 HttpServletResponse 对象。
六、session:(仅在web上下文)的 HttpSession 对象。
七、servletContext:(仅在web上下文)的 ServletContext 对象

这里以常用的Session举例,用户刊登成功后,会把用户信息放在Session中,Thymeleaf通过内置对象将值从session中获取。

// java 代码将用户名放在session中
session.setAttribute("userinfo",username);
// Thymeleaf通过内置对象直接获取
th:text="${session.userinfo}"
常用的内置方法

一、strings:字符串格式化方法,常用的Java方法它都有。比如:equals,equalsIgnoreCase,length,trim,toUpperCase,toLowerCase,indexOf,substring,replace,startsWith,endsWith,contains,containsIgnoreCase等
二、numbers:数值格式化方法,常用的方法有:formatDecimal等
三、bools:布尔方法,常用的方法有:isTrue,isFalse等
四、arrays:数组方法,常用的方法有:toArray,length,isEmpty,contains,containsAll等
五、lists,sets:集合方法,常用的方法有:toList,size,isEmpty,contains,containsAll,sort等
六、maps:对象方法,常用的方法有:size,isEmpty,containsKey,containsValue等
七、dates:日期方法,常用的方法有:format,year,month,hour,createNow等

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>Thymeleaf 内置方法</h2>
<h3>#strings</h3>

<div th:if="${not #strings.isEmpty(itdragonStr)}">
    <p>Old Str : <span th:text="${itdragonStr}"></span></p>
    <p>toUpperCase : <span th:text="${#strings.toUpperCase(itdragonStr)}"></span></p>
    <p>toLowerCase : <span th:text="${#strings.toLowerCase(itdragonStr)}"></span></p>
    <p>equals : <span th:text="${#strings.equals(itdragonStr,'itdragonblog')}"></span></p>
    <p>equalsIgnoreCase : <span th:text="${#strings.equalsIgnoreCase(itdragonStr,'itdragonblog')}"></span></p>
    <p>indexOf : <span th:text="${#strings.indexOf(itdragonStr,'r')}"></span></p>
    <p>substring : <span th:text="${#strings.substring(itdragonStr,2,8)}"></span></p>
    <p>replace : <span th:text="${#strings.replace(itdragonStr,'it','IT')}"></span></p>
    <p>startsWith : <span th:text="${#strings.startsWith(itdragonStr,'it')}"></span></p>
    <p>contains : <span th:text="${#strings.contains(itdragonStr,'IT')}"></span></p>

</div>

<h3>#numbers</h3>
<div>
    <p>formatDecimal 整数部分随意,小数点后保留两位,四舍五入:<span th:text="${#numbers.formatDecimal(itdragonNum,0,2)}"></span></p>
    <p>formatDecimal 整数部分保留五位数,小数点保留两位,四舍五入:<span th:text="${#numbers.formatDecimal(itdragonNum,4,2)}"></span></p>
</div>

<h3>#bools </h3>
<div th:if="${#bools.isTrue(itdragonBool)}">
    <p th:text="${itdragonBool}"></p>
</div>

<h2>#arrays </h2>
<div th:if="${not #arrays.isEmpty(itdragonArray)}">
    <p>length : <span th:text="${#arrays.length(itdragonArray)}"></span></p>
    <p>contains : <span th:text="${#arrays.contains(itdragonArray,5)}"></span></p>
    <p>containsAll : <span th:text="${#arrays.containsAll(itdragonArray,itdragonArray)}"></span></p>
</div>

<h3>#lists </h3>
<div th:if="${not #lists.isEmpty(itdragonList)}">
    <p>size : <span th:text="${#lists.size(itdragonList)}"></span></p>
    <p>contains : <span th:text="${#lists.contains(itdragonList,0)}"></span></p>
    <p>sort : <span th:text="${#lists.sort(itdragonList)}"></span></p>
</div>

<h3>#maps </h3>
<div th:if="${not #maps.isEmpty(itdragonMap)}">
    <p>size : <span th:text="${#maps.size(itdragonMap)}"></span></p>
    <p>containKey : <span th:text="${#maps.containsKey(itdragonMap,'thName')}"></span></p>
    <p>containValue : <span th:text="${#maps.containsValue(itdragonMap,'#maps')}"></span></p>
    <p><span th:text="${itdragonMap.thName}"></span></p>
</div>

<h3>#dates </h3>
<div>
    <p>format : <span th:text="${#dates.format(itdragonDate)}"></span></p>
    <p>custom format : <span th:text="${#dates.format(itdragonDate,'yyyy-MM-dd HH:mm:ss')}"></span></p>
    <p>day : <span th:text="${#dates.day(itdragonDate)}"></span></p>
    <p>month : <span th:text="${#dates.month(itdragonDate)}"></span></p>
    <p>monthName : <span th:text="${#dates.monthName(itdragonDate)}"></span></p>
    <p>year : <span th:text="${#dates.year(itdragonDate)}"></span></p>
    <p>dayOfWeek : <span th:text="${#dates.dayOfWeek(itdragonDate)}"></span></p>
    <p>dayOfWeekName : <span th:text="${#dates.dayOfWeekName(itdragonDate)}"></span></p>
    <p>hour : <span th:text="${#dates.hour(itdragonDate)}"></span></p>
    <p>minute : <span th:text="${#dates.minute(itdragonDate)}"></span></p>
    <p>second : <span th:text="${#dates.second(itdragonDate)}"></span></p>
    <p>createNow : <span th:text="${#dates.createNow()}"></span></p>

</div>
</body>
</html>

后台负责给变量赋值,和跳转页面。

@RequestMapping("/tofunc")
    public String toFunc(ModelMap map){
        map.put("itdragonStr","itdragonBlog");
        map.put("itdragonBool",true);
        map.put("itdragonArray",new Integer[]{1,2,3,4});
        map.put("itdragonList", Arrays.asList(1,3,2,4,0));
        Map itdragonMap = new HashMap();
        itdragonMap.put("thName","${#...}");
        itdragonMap.put("desc","变量表达式内置方法");
        map.put("itdragonMap",itdragonMap);
        map.put("itdragonDate",new Date());
        map.put("itdragonNum",888.888D);

        return  "admin/func";
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容