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脚本
