第九章 Thymeleaf 模板引擎
官网下载地址
能源节点springboot材料
视频观看地址
https://www.bilibili.com/vide...
Thymeleaf:是应用java开发的模板技术,在服务器端运行。把解决后的数据发送给浏览器。
模板是作视图层工作的。显示数据的。Thymeleaf是基于Html语言。Thymleaf语法是利用在html标签中。SpringBoot框架集成Thymealeaf, 应用Thymeleaf代替jsp。
Thymeleaf 的官方网站:http://www.thymeleaf.org
Thymeleaf 官网手册:
https://www.thymeleaf.org/doc...
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>
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>
3.链接表达式
语法: @{url}
作用: 示意链接, 能够
<script src="..."> , <link href="..."> <a href=".."> ,<form action="..."> <img src="...">
9.2 Thymeleaf属性
属性是放在html元素中的,就是html元素的属性,退出了th前缀。 属性的作用不变。 退出上th, 属性的值由模板引擎解决了。 在属性能够应用变量表达式
例如:
<form action="/loginServlet" method="post"></form><form th:action="/loginServlet" th:method="${methodAttr}"></form>
9.3 each
each循环, 能够循环List,Array
语法:
在一个html标签中,应用th:each
<div th:each="汇合循环成员,循环的状态变量:${key}"> <p th:text="${汇合循环成员}" ></p></div>
汇合循环成员,循环的状态变量:两个名称都是自定义的。 “循环的状态变量”这个名称能够不定义,默认是"汇合循环成员Stat"
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值
9.4 th:if
“th:if” : 判断语句, 当条件为true, 显示html标签体内, 反之不显示 没有else语句
语法:
<div th:if=" 10 > 0 "> 显示文本内容 </div>
还有一个 th:unless 和 th:if相同的行为
语法:
<div th:unless=" 10 < 0 "> 当条件为false显示标签体内容 </div>
例子: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>
例子: 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>
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>
9.6 th:inline
- 内联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>
- 内联javascript
例子:
<script type="text/javascript" th:inline="javascript"> var myname = [[${name}]]; var myage = [[${age}]]; //alert("获取的模板中数据 "+ myname + ","+myage) function fun(){ alert("单击事件,获取数据 "+ myname + ","+ [[${sex}]]) } </script>
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>
9.8 字符串连贯
连贯字符串有两种语法
1) 语法应用 单引号括起来字符串 , 应用 + 连贯其余的 字符串或者表达式
<p th:text="'我是'+${name}+',我所在的城市'+${city}">数据显示</p>
2)语法:应用双竖线, |字符串和表达式|
<p th:text="|我是${name},我所在城市${city|"> 显示数据</p>
例子:
<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>
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的后果
三元运算符能够嵌套
9.10 内置对象
文档地址:https://www.thymeleaf.org/doc...
request 示意 HttpServletRequest
session 示意 HttpSession对象
session 示意Map对象的, 是#session的简略示意形式, 用来获取session中指定的key的值
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>
9.11 内置工具类
内置工具类型: Thymeleaf本人的一些类,提供对string, date ,汇合的一些解决办法
dates: 解决日器的工具类
numbers:解决数字的
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>
9.12 自定义模板
模板是内容复用, 定义一次,在其余的模板文件中屡次应用。
模板应用:
1.定义模板
2.应用模板
模板定义语法:
th:fragment="模板自定义名称"
例如:
<div th:fragment="head"> <p> 能源节点-java开发 </p> <p> www.bjpowernode.com </p></div>
援用模板语法:
1) ~{templatename :: selector}
templatename: 文件名称
selector: 自定义模板名称
2)templatename :: selector
templatename: 文件名称
selector: 自定义模板名称
对于应用模板:有蕴含模板(th:include), 插入模板(th:insert)