zoukankan      html  css  js  c++  java
  • SpringBoot第十篇:thymeleaf详解

    作者:追梦1819
    原文:https://www.cnblogs.com/yanfei1819/p/10931435.html
    版权声明:本文为博主原创文章,转载请附上博文链接!

    引言

      SpringBoot 对 Web 的支持,官方推荐的是模板引擎 thymelaf。本章中,作者原意是直接讲解 SpringBoot 与 Thymelaf 的集成。但是在示例完成时,发现集成并不难。核心关注点应该是 Thymelaf 模板引擎本身的用法。故本章将其单独提出来讲解。集成部分待下一章详解。


    简介

      Thymeleaf 是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP,Velocity,FreeMaker等,它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比,Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用。在开发团队中实现更强大的协调作用。


    功能特性

    • 原型即页面;

    • 国际化支持;

    • 开箱即用;

    • 与 Spring 完美集成。


    标准表达式语法

    1、 ${...} 变量表达式,Variable Expressions

    变量表达式可使用 thymleaf 的内置对象和内置方法。例如:

    <p>Today is: <span th:text="${today}">13 february 2011</span>.</p>
    

    2、@{...} 链接表达式,Link URL Expressions

    用于静态资源的引用,form表单的请求等链接。例如:

    无参:@{/xxx}
    
    有参:@{/xxx(k1=v1,k2=v2)} 对应url结构:xxx?k1=v1&k2=v2
    
    引入本地资源:@{/项目本地的资源路径}
    
    引入外部资源:@{/webjars/资源在jar包中的路径}
    

    3、#{...} 消息表达式,Message Expressions

    信息表达式通常用于国际化。

    4、~{...} 代码块表达式,Fragment Expressions

      代码表达式主要用来页面布局的,支持两种语法结构:

    • 推荐:~{templatename::fragmentname}
    • 支持:~{templatename::#id}

    注意:

    1. templatename:模版名,Thymeleaf会根据模版名解析完整路径:/resources/templates/templatename.html,要注意文件的路径;
    2. fragmentname:片段名,Thymeleaf通过th:fragment声明定义代码块,即:th:fragment="fragmentname"
    3. id:HTML的id选择器,使用时要在前面加上#号,不支持class选择器;
    4. 代码块表达式需要配合th属性(th:insert,th:replace,th:include)一起使用:

       th:insert:将代码块片段整个插入到使用了th:insert的HTML标签中;

       th:replace:将代码块片段整个替换使用了th:replace的HTML标签中;

       th:include:将代码块片段包含的内容插入到使用了th:include的HTML标签中。

    5、*{...} 选择(星号)变量表达式,Selection Variable Expressions

      选择表达式很像变量表达式,不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行。

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


    内置对象和方法

    1、内置对象

    • ctx :上下文对象。
    • vars :上下文变量。
    • locale:上下文的语言环境。
    • request:(仅在web上下文)的 HttpServletRequest 对象。
    • response:(仅在web上下文)的 HttpServletResponse 对象。
    • session:(仅在web上下文)的 HttpSession 对象。
    • servletContext:(仅在web上下文)的 ServletContext 对象。

    2、内置方法

    • 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等;

    • listssets:集合方法,常用的方法有:toList,size,isEmpty,contains,containsAll,sort等;

    • maps:对象方法,常用的方法有:size,isEmpty,containsKey,containsValue等;

    • dates:日期方法,常用的方法有:format,year,month,hour,createNow等。


    表达式支持的语法

    字面(Literals)

    • 文本文字(Text literals): 'one text', 'Another one!',…
    • 数字文本(Number literals): 0, 34, 3.0, 12.3,…
    • 布尔文本(Boolean literals):true, false
    • 空(Null literal):null
    • 文字标记(Literal tokens):one, sometext, main,…

    文本操作(Text operations)

    • 字符串连接(String concatenation):+
    • 文本替换(Literal substitutions):|The name is ${name}|

    算术运算(Arithmetic operations)

    • 二元运算符(Binary operators):+, -, *, /, %
    • 减号(单目运算符)Minus sign (unary operator):-

    布尔操作(Boolean operations)

    • 二元运算符(Binary operators):and, or
    • 布尔否定(一元运算符)Boolean negation (unary operator):!, not

    比较和等价(Comparisons and equality)

    • 比较(Comparators):>, <, >=, <= (gt, lt, ge, le)
    • 等值运算符(Equality operators):==, != (eq, ne)

    条件运算符(Conditional operators)

    • If-then:(if) ? (then)
    • If-then-else:(if) ? (then) : (else)
    • Default: (value) ?:(defaultvalue)

    常用 th 属性

      html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个。其中th属性执行的优先级从1~8,数字越低优先级越高。

    • th:text :设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。优先级不高:order=7;
    • th:value:设置当前元素的value值,类似修改指定属性的还有th:srcth:href。优先级不高:order=6;
    • th:each:遍历循环元素,和th:text或th:value一起使用。注意该属性修饰的标签位置,详细往后看。优先级很高:order=2;
    • th:if:条件判断,类似的还有th:unlessth:switchth:case。优先级较高:order=3;
    • th:insert:代码块引入,类似的还有th:replaceth:include,三者的区别较大,若使用不恰当会破坏html结构,常用于公共代码块提取的场景。优先级最高:order=1;
    • th:fragment:定义代码块,方便被th:insert引用。优先级最低:order=8;
    • th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。优先级一般:order=4;
    • th:attr:修改任意属性,实际开发中用的较少,因为有丰富的其他th属性帮忙,类似的还有th:attrappend,th:attrprepend。优先级一般:order=5

    总结

      总体来说,thymelaf 的使用还是很简单的。

      这篇文章参照了 thymelaf 官方文档 ,所列举的都为常用的一些用法或者语法。当然,如果读者的英文阅读能力不错,推荐将 官方文档 通读一遍,细枝末节之处将更加清晰。另一方面,如果读者的基础比较强,作者建议去阅读 thymelaf 的源码。模板引擎,其实大体的原理都接近。此处篇幅所限,不做深入讲解。

      后续如果有时间,作者将跟大家一起学习、分享源码系列。
      源码:我的GitHub

    参考

       thymelaf 官方文档


    ![](https://img2018.cnblogs.com/blog/1183871/201905/1183871-20190527163006503-1962736544.png)
  • 相关阅读:
    题解【luogu1073 最优贸易】
    题解【luogu4145 上帝造题的七分钟2(花神游历各国)】
    题解【bzoj2427 [HAOI2010]软件安装】
    以后会经常用cnblogs啦!
    题解【luogu4168 [Violet]蒲公英】
    题解【bzoj1010 [HNOI2008]玩具装箱TOY】
    题解【bzoj4653 [NOI2016] 区间】
    animation渐进实现点点点等待效果
    纯css loading动效
    文字和背景渐变动效
  • 原文地址:https://www.cnblogs.com/yanfei1819/p/10931435.html
Copyright © 2011-2022 走看看