第九章 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

  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>
  1. 内联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)