Thymeleaf学习

一、Thymeleaf介绍

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP

二、Thymeleaf特点

动静结合

Thymeleaf 在有网络和无网络的环境下皆可运行

它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果

这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式

浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；

当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

开箱即用

它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果

，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

多方言支持

Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，

可以快速的实现表单绑定、属性编辑器、国际化等功能。

与SpringBoot完美整合

与SpringBoot完美整合，SpringBoot提供了Thymeleaf的默认配置，

并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。

三、添加maven依赖

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

四、创建模板文件夹

SpringBoot会自动为Thymeleaf注册一个视图解析器ThymeleafViewResolver

还配置了模板文件（html）的位置，与jsp类似的前缀+ 视图名 + 后缀风格：

与解析JSP的InternalViewResolver类似，Thymeleaf也会根据前缀和后缀来确定模板文件的位置：前缀：classpath:/templates/ 后缀：.html

在配置文件中配置缓存,编码

五、基本使用

引入名称空间

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

表达式

${}:变量表达式

*{} ：选择变量表达式

{...} : Message 表达式
URL
绝对网站
绝对URL用于创建到其他服务器的链接,它们需要指定一个协议名称(http://或https://)开头
<a th:href="@{https://www.campsis-tk.top/}"> 
上下文相关url
与Web应用程序根相关联URL
<a th:href="@{/hello}">跳转</a>
与服务器相关url
服务器相关的URL与上下文相关的URL非常相似
<a th:href="@{~/hello}">跳转</a>
携带参数
<a th:href="@{/hero/detail(id=3,action='show')}">aa</a>
字面值
有的时候，我们需要在指令中填写基本类型如：字符串、数值、布尔等，并不希望被Thymeleaf解析为变量，这个时候称为字面值。
字符串字面值
<p>
    内容：<span th:text="'Demo'+1">template</span>
</p>
数字字面值
<p>
    内容：<span th:text="2+1">template</span>
</p>
布尔字面值

布尔类型的字面值是true或false
拼接
普通字符串与表达式拼接的情况
<span th:text="'欢迎您：' + ${person.name} + '!'"></span>
字符串字面值需要用''，拼接起来非常麻烦，Thymeleaf对此进行了简化，使用一对|即可
<span th:text="|欢迎您：${person.name}!|"></span>
运算符
算术操作符

加(+)、减(-)、乘(*)、除(/)、取余(%)

比较运算

大于(>)、小于(<)、大于或等于(>=)、小于或等于(<=)

但是大于(>)、小于(<)不能直接使用，因为xml会解析为标签

大于(gt)、小于(lt)、大于或等于(ge)、小于或等于(le)
三元运算
<span th:text="${true}?'男':'女'"></span>
内联写法
<span>sapn标签([(${person.name})])</span>
<span>sapn标签[[${person.name}]]</span>
局部变量
<div th:with="person = ${allPerson[0]}">
    <h1 th:text="${person.name}"></h1>
    <h1 th:text="${person.age}"></h1>
    <h1 th:text="${person.sex}"></h1>
</div>
判断
th:if
<h1 th:if="${1 lt 2}">Hello</h1>
th:unless
<h1 th:unless="1 gt 2">Hello</h1>
th:switch
<div th:switch="1">
    <p th:case="1">Tk</p>
    <p th:case="*">*</p>
</div>
迭代
<table>
    <tr th:each="person:${allPerson[0]}">
        <td th:text="${person.name}"></td>
    </tr>
</table>
<table>
    <tr th:each="person,stat:${allPerson[0]}">
        <td th:text="${stat.index}"></td>
        <td th:text="${person.name}"></td>
    </tr>
</table>
stat对象包含以下属性

index，从0开始的角标

count，元素的个数，从1开始

size，总元素个数

current，当前遍历到的元素

even/odd，返回是否为奇偶，boolean值

first/last，返回是否为第一或最后，boolean值
内置对象
环境相关对象

${#ctx} 上下文对象，可用于获取其它内置对象。

${#vars}: 上下文变量。

${#locale}：上下文区域设置。

${#request}: HttpServletRequest对象。

${#response}: HttpServletResponse对象。

${#session}: HttpSession对象。

${#servletContext}: ServletContext对象。

全局对象功能

strings：字符串工具类

lists：List 工具类

arrays：数组工具类

sets：Set 工具类

maps：常用Map方法。

objects：一般对象类，通常用来判断非空

bools：常用的布尔方法。

execInfo：获取页面模板的处理信息。

messages：在变量表达式中获取外部消息的方法，与使用＃{...}语法获取的方法相同。

uris：转义部分URL / URI的方法。

conversions：用于执行已配置的转换服务的方法。

dates：时间操作和时间格式化等。

calendars：用于更复杂时间的格式化。

numbers：格式化数字对象的方法。

aggregates：在数组或集合上创建聚合的方法。

ids：处理可能重复的id属性的方法。
示例
${#strings.abbreviate(str,10)} str截取0-10位，后面的全部用…这个点代替，注意，最小是3位

${#strings.toUpperCase(name)}
判断是不是为空:null: 

<span th:if="${name} != null">不为空</span> 

<span th:if="${name1} == null">为空</span> 

判断是不是为空字符串: “” 

<span th:if="${#strings.isEmpty(name1)}">空的</span>

判断是否相同： 

<span th:if="${name} eq 'jack'">相同于jack,</span> 

<span th:if="${name} eq 'ywj'">相同于ywj,</span> 

<span th:if="${name} ne 'jack'">不相同于jack,</span>

 

不存在设置默认值： 

<span th:text="${name2} ?: '默认值'"></span> 

是否包含(分大小写): 

<span th:if="${#strings.contains(name,'ez')}">包ez</span> 

<span th:if="${#strings.contains(name,'y')}">包j</span> 

是否包含（不分大小写） 

<spanth:if="${#strings.containsIgnoreCase(name,'y')}">包</span> 

${#strings.startsWith(name,'o')} 

${#strings.endsWith(name, 'o')} 

${#strings.indexOf(name,frag)}// 下标 

${#strings.substring(name,3,5)}// 截取 

${#strings.substringAfter(name,prefix)}// 从 prefix之后的一位开始截取到最后,比如 (ywj,y) = wj, 如果是(abccdefg,c) = cdefg//里面有2个c,取的是第一个c 

${#strings.substringBefore(name,suffix)}// 同上，不过是往前截取 

${#strings.replace(name,'las','ler')}// 替换 

${#strings.prepend(str,prefix)}// 拼字字符串在str前面 

${#strings.append(str,suffix)}// 和上面相反，接在后面 

${#strings.toUpperCase(name)} 

${#strings.toLowerCase(name)} 

${#strings.trim(str)} 

${#strings.length(str)} 

${#strings.abbreviate(str,10)}//  str截取0-10位，后面的全部用…这个点代替，注意，最小是3位
布局
方式1
<nav th:fragment="header">
  <h1>网页头部</h1>
</nav>
<div th:include="common/base::header"></div>
方式2
  * ~~~html
    <nav th:fragment="footer">
      <h1>网页尾部</h1>
    </nav>
    ~~~

  * ~~~html
    <div th:insert="~{common/base::#footer}"></div>
    ~~~

* 引入方式

  > 1. th:insert
  >    + 将公共的标签及内容插入到指定标签当中
  > 2. th:replace
  >    + 将公共的标签替换指定的标签
  > 3. th:include
  >    + 将公共标签的内容包含到指定标签当中

* 传值

  * ~~~html
    <div th:include="common/base::header(active='header')"></div>
    <h1 class="active"></h1>
    <div th:include="common/base::#header(active='footer')"></div>
    ~~~

  * ~~~html
    <nav th:fragment="header">
      <h1 th:class="${active=="header"?'active':''}">头部</h1>
    </nav>
    ~~~
js模板
<script th:inline="javascript">
 var name = /*[[${person.name}]]*/;
    console.log(name);
</script>
模板引擎不仅可以渲染html，也可以对JS中的进行预处理。而且为了在纯静态环境下可以运行

在script标签中通过th:inline="javascript"来声明这是要特殊处理的js脚本

Thymeleaf学习

Thymeleaf学习

一、Thymeleaf介绍

二、Thymeleaf特点

三、添加maven依赖

四、创建模板文件夹

五、基本使用

{...} : Message 表达式

strings：字符串工具类

lists：List 工具类

arrays：数组工具类

sets：Set 工具类

maps：常用Map方法。

objects：一般对象类，通常用来判断非空

bools：常用的布尔方法。

execInfo：获取页面模板的处理信息。

messages：在变量表达式中获取外部消息的方法，与使用＃{...}语法获取的方法相同。

uris：转义部分URL / URI的方法。

conversions：用于执行已配置的转换服务的方法。

dates：时间操作和时间格式化等。

calendars：用于更复杂时间的格式化。

numbers：格式化数字对象的方法。

aggregates：在数组或集合上创建聚合的方法。

ids：处理可能重复的id属性的方法。

推荐阅读更多精彩内容