第九章 Thymeleaf 模板引擎
- 官方下载地址
- 视频观看地址
https://www.bilibili.com/video/BV1XQ4y1m7ex
Thymeleaf： 是使用java开发的模板技术， 在服务器端运行。 把处理后的数据发送给浏览器。
模板是作视图层工作的。 显示数据的。 Thymeleaf是基于Html语言。 Thymleaf语法是应用在html标签中 。 SpringBoot框架集成Thymealeaf, 使用Thymeleaf代替jsp。
Thymeleaf 的官方网站：http://www.thymeleaf.org
Thymeleaf 官方手册：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
9.1 表达式
1. 标准变量表达式
语法： ${key}
作用： 获取key对于的文本数据， key 是request作用域中的key ， 使用request.setAttribute(), model.addAttribute()
在页面中的 html标签中， 使用 th:text="${key}"
<div style="margin-left: 400px">
<h3>标准变量表达式: ${key}</h3>
<p th:text="${site}">key不存在</p>
<br/>
<p>获取SysUser对象 属性值</p>
<p th:text="${myuser.id}">id</p>
<p th:text="${myuser.name}">姓名</p>
<p th:text="${myuser.sex}">姓名：m男</p>
<p th:text="${myuser.age}">年龄</p>
<p th:text="${myuser.getName()}">获取姓名使用getXXX</p>
</div>
image.gif
2. 选择变量表达式（ 星号变量表达式）
语法： *{key}
作用： 获取这个key对应的数据， *{key}需要和th:object 这个属性一起使用。
目的是简单获取对象的属性值。
<p>使用 *{} 获取SysUser的属性值</p>
<div th:object="${myuser}">
<p th:text="*{id}"></p>
<p th:text="*{name}"></p>
<p th:text="*{sex}"></p>
<p th:text="*{age}"></p>
</div>
<p>使用*{}完成的表示 对象的属性值</p>
<p th:text="*{myuser.name}" ></p>
image.gif
3. 链接表达式
语法： @{url}
作用： 表示链接， 可以
<script src="..."> , <link href="..."> <a href=".."> ,<form action="..."> <img src="...">
image.gif
9.2 Thymeleaf属性
属性是放在html元素中的，就是html元素的属性，加入了th前缀。 属性的作用不变。 加入上th， 属性的值由模板引擎处理了。 在属性可以使用变量表达式
例如：
<form action="/loginServlet" method="post"></form>
<form th:action="/loginServlet" th:method="${methodAttr}"></form>
image.gif
9.3 each
each循环， 可以循环List，Array
语法：
在一个html标签中，使用th:each
<div th:each="集合循环成员,循环的状态变量:${key}">
<p th:text="${集合循环成员}" ></p>
</div>
集合循环成员,循环的状态变量:两个名称都是自定义的。 “循环的状态变量”这个名称可以不定义，默认是"集合循环成员Stat"
image.gif
each循环Map
在一个html标签中，使用th:each
<div th:each="集合循环成员,循环的状态变量:${key}">
<p th:text="${集合循环成员.key}" ></p>
<p th:text="${集合循环成员.value}" ></p>
</div>
集合循环成员,循环的状态变量:两个名称都是自定义的。 “循环的状态变量”这个名称可以不定义，默认是"集合循环成员Stat"
key:map集合中的key
value：map集合key对应的value值
image.gif
9.4 th:if
“th:if” : 判断语句， 当条件为true， 显示html标签体内， 反之不显示 没有else语句
语法：
<div th:if=" 10 > 0 "> 显示文本内容 </div>
image.gif
还有一个 th:unless 和 th:if相反的行为
语法：
<div th:unless=" 10 < 0 "> 当条件为false显示标签体内容 </div>
image.gif
例子：if
<div style="margin-left: 400px">
<h3> if 使用</h3>
<p th:if="${sex=='m'}">性别是男</p>
<p th:if="${isLogin}">已经登录系统</p>
<p th:if="${age > 20}">年龄大于20</p>
<!--""空字符是true-->
<p th:if="${name}">name是“”</p>
<!--null是false-->
<p th:if="${isOld}"> isOld是null</p>
</div>
image.gif
例子： unless
<div style="margin-left: 400px">
<h3>unless: 判断条件为false，显示标签体内容</h3>
<p th:unless="${sex=='f'}">性别是男的</p>
<p th:unless="${isLogin}">登录系统</p>
<p th:unless="${isOld}"> isOld是null </p>
</div>
image.gif
9.5 th:switch
th:switch 和 java中的swith一样的
语法：
<div th:switch="要比对的值">
<p th:case="值1">
结果1
</p>
<p th:case="值2">
结果2
</p>
<p th:case="*">
默认结果
</p>
以上的case只有一个语句执行
</div>
image.gif
9.6 th:inline
1. 内联text： 在html标签外，获取表达式的值
语法：
<p>显示姓名是：[[${key}]]</p>
<div style="margin-left: 400px">
<h3>内联 text, 使用内联表达式显示变量的值</h3>
<div th:inline="text">
<p>我是[[${name}]]，年龄是[[${age}]]</p>
我是<span th:text="${name}"></span>,年龄是<span th:text="${age}"></span>
</div>
<div>
<p>使用内联text</p>
<p>我是[[${name}]],性别是[[${sex}]]</p>
</div>
</div>
image.gif
2. 内联javascript
例子：
<script type="text/javascript" th:inline="javascript">
var myname = [[${name}]];
var myage = [[${age}]];
//alert("获取的模板中数据 "+ myname + ","+myage)
function fun(){
alert("单击事件，获取数据 "+ myname + ","+ [[${sex}]])
}
</script>
image.gif
9.7 字面量
例子：
<div style="margin-left: 400px">
<h3>文本字面量: 使用单引号括起来的字符串</h3>
<p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>
<h3>数字字面量</h3>
<p th:if="${20>5}"> 20大于 5</p>
<h3>boolean字面量</h3>
<p th:if="${isLogin == true}">用户已经登录系统</p>
<h3>null字面量</h3>
<p th:if="${myuser != null}">有myuser数据</p>
</div>
image.gif
9.8 字符串连接
连接字符串有两种语法
1） 语法使用 单引号括起来字符串 ， 使用 + 连接其他的 字符串或者表达式
<p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>
image.gif
2）语法：使用双竖线， |字符串和表达式|
<p th:text="|我是${name},我所在城市${city|">
显示数据
</p>
image.gif
例子：
<div style="margin-left: 400px">
<h3>字符串连接方式1：使用单引号括起来的字符串</h3>
<p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>
<br/>
<br/>
<h3>字符串连接方式2：|字符串和表达式|</h3>
<p th:text="|我是${name},所在城市${city},其他人${myuser.name}|"></p>
</div>
image.gif
9.9 运算符
算术运 算： + , - - , * , / , %
关系比较 : > , < , >= , <= ( gt , lt , ge , le )
相等判断： == , != ( eq , ne )
<div style="margin-left: 400px">
<h3>使用运算符</h3>
<p th:text="${age > 10}">年龄大于 10 </p>
<p th:text="${ 20 + 30 }">显示运算结果</p>
<p th:if="${myuser == null}">myuser是null</p>
<p th:if="${myuser eq null}">myuser是null</p>
<p th:if="${myuser ne null}">myuser不是null</p>
<p th:text="${isLogin == true ? '用户已经登录' : '用户需要登录'}"></p>
<p th:text="${isLogin == true ? ( age > 10 ? '用户是大于10的' : '用户年龄比较小') : '用户需要登录'}"></p>
</div>
三元运算符：
表达式 ？ true的结果 : false的结果
三元运算符可以嵌套
image.gif
9.10 内置对象
1.#request 表示 HttpServletRequest
2.#session 表示 HttpSession对象
3.session 表示Map对象的， 是#session的简单表示方式， 用来获取session中指定的key的值
4.#session.getAttribute(“loginname”) == session.loginname
这些是内置对象，可以在模板文件中直接使用。
例子：
<div style="margin-left: 350px">
<h3>内置对象#request,#session，session的使用</h3>
<p>获取作用域中的数据</p>
<p th:text="${#request.getAttribute('requestData')}"></p>
<p th:text="${#session.getAttribute('sessionData')}"></p>
<p th:text="${session.loginname}"></p>
<br/>
<br/>
<h3>使用内置对象的方法</h3>
getRequestURL=<span th:text="${#request.getRequestURL()}"></span><br/>
getRequestURI=<span th:text="${#request.getRequestURI()}"></span><br/>
getQueryString=<span th:text="${#request.getQueryString()}"></span><br/>
getContextPath=<span th:text="${#request.getContextPath()}"></span><br/>
getServerName=<span th:text="${#request.getServerName()}"></span><br/>
getServerPort=<span th:text="${#request.getServerPort()}"></span><br/>
</div>
image.gif
9.11 内置工具类
内置工具类型： Thymeleaf自己的一些类，提供对string， date ，集合的一些处理方法
1.#dates: 处理日器的工具类
2.#numbers:处理数字的
3.#lists: 处理list集合的
<div style="margin-left: 350px">
<h3>日期类对象 #dates</h3>
<p th:text="${#dates.format(mydate )}"></p>
<p th:text="${#dates.format(mydate,'yyyy-MM-dd')}"></p>
<p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss')}"></p>
<p th:text="${#dates.year(mydate)}"></p>
<p th:text="${#dates.month(mydate)}"></p>
<p th:text="${#dates.monthName(mydate)}"></p>
<p th:text="${#dates.createNow()}"></p>
<br/>
<h3>内置工具类#numbers，操作数字的</h3>
<p th:text="${#numbers.formatCurrency(mynum)}"></p>
<p th:text="${#numbers.formatDecimal(mynum,5,2)}"></p>
<br/>
<h3>内置工具类#strings,操作字符串</h3>
<p th:text="${#strings.toUpperCase(mystr)}"></p>
<p th:text="${#strings.indexOf(mystr,'power')}"></p>
<p th:text="${#strings.substring(mystr,2,5)}"></p>
<p th:text="${#strings.substring(mystr,2)}"></p>
<p th:text="${#strings.concat(mystr,'---java开发的黄埔军校---')}"></p>
<p th:text="${#strings.length(mystr)}"></p>
<p th:text="${#strings.length('hello')}"></p>
<p th:unless="${#strings.isEmpty(mystr)}"> mystring 不是 空字符串 </p>
<br/>
<h3>内置工具类#lists,操作list集合</h3>
<p th:text="${#lists.size(mylist)}"></p>
<p th:if="${#lists.contains(mylist,'a')}">有成员a</p>
<p th:if="!${#lists.isEmpty(mylist)}"> list 集合有多个成员</p>
<br/>
<h3>处理null</h3>
<p th:text="${zoo?.dog?.name}"></p>
</div>
image.gif
9.12 自定义模板
模板是内容复用， 定义一次，在其他的模板文件中多次使用。
模板使用：
1.定义模板
2.使用模板
模板定义语法：
th:fragment="模板自定义名称"
例如：
<div th:fragment="head">
<p>
动力节点-java开发
</p>
<p>
www.bjpowernode.com
</p>
</div>
image.gif
引用模板语法：
1) ~{templatename :: selector}
templatename: 文件名称
selector： 自定义模板名称
2）templatename :: selector
templatename: 文件名称
selector： 自定义模板名称
对于使用模板：有包含模板（th:include）， 插入模板(th:insert)
image.gif
