SpringBoot - Thymeleaf 模版

Posted MinggeQingchun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SpringBoot - Thymeleaf 模版相关的知识,希望对你有一定的参考价值。

Thymeleaf 简介

Thymeleaf 是一款用于渲染 XML/Xhtml/HTML5 内容的模板引擎。它与 JSP,Velocity,FreeMaker 等模板引擎类似,也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比,Thymeleaf 最大的特点是,即使不启动 Web 应用,也可以直接在浏览器中打开并正确显示模板页面 。

Thymeleaf 是新一代 Java 模板引擎,支持 HTML 原型,以直接被浏览器打开,此时浏览器会忽略未定义的 Thymeleaf 标签属性,展示 thymeleaf 模板的静态页面效果。当在应用程序中会动态地替换掉页面设置的标签属性。

Thymeleaf 特点

1、动静结合:Thymeleaf 既可以直接使用浏览器打开,查看页面的静态效果,也可以通过 Web 应用程序进行访问,查看动态页面效果。

2、开箱即用:Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块,可以快速地实现表单绑定、属性编辑器、国际化等功能。

3、多方言支持:它提供了 Thymeleaf 标准和 Spring 标准两种方言,可以直接套用模板实现 JSTL、 OGNL 表达式;必要时,开发人员也可以扩展和创建自定义的方言。

4、与 SpringBoot 完美整合:SpringBoot 为 Thymeleaf 提供了的默认配置,并且还为 Thymeleaf 设置了视图解析器,因此 Thymeleaf 可以与 Spring Boot 完美整合。

Spring Boot 集成了 Thymeleaf 模板技术,并且 Spring Boot 官方也推荐使用 Thymeleaf 来 替代 JSP 技术,Thymeleaf 是另外的一种模板技术,它本身并不属于 Spring Boot,Spring Boot只是很好地集成这种模板技术,作为前端页面的数据展示,在过去的 Java Web 开发中,我们往往会选择使用 Jsp 去完成页面的动态渲染,但是 jsp 需要翻译编译运行,效率低

Thymeleaf 的官方网站http://www.thymeleaf.org

Thymeleaf 官方手册https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

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>

1、选择变量表达式( 星号变量表达式) 

语法: *key

作用: 获取这个key对应的数据, *key需要和th:object 这个属性一起使用。

目的是简单获取对象的属性值。

2、链接表达式

语法: @url

作用: 表示链接

 <script src="..."> , <link href="..."> <a href=".."> ,<form action="..."> <img src="...">

2、Thymeleaf属性

属性是放在html元素中的,就是html元素的属性,加入了th前缀。 属性的作用不变。 加入上th, 属性的值由模板引擎处理了。 在属性可以使用变量表达式

如:

<form action="/loginServlet" method="post"></form>
​
<form th:action="/loginServlet" th:method="$methodAttr"></form>

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值 ​

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>

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>

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>

2、内联javascript

 <script type="text/javascript" th:inline="javascript">
         var myname = [[$name]];
         var myage = [[$age]];
​
         //alert("获取的模板中数据 "+ myname + ","+myage)
​
        function fun()
            alert("单击事件,获取数据 "+ myname + ","+ [[$sex]])
        
    </script>

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>

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、运算符

算术运 算: + , - - , * , / , %

关系比较 : > , < , >= , <= ( 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的结果 ​ 三元运算符可以嵌套

10、内置对象

文档地址:Tutorial: Using Thymeleaf.

#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>

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>

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)

以上是关于SpringBoot - Thymeleaf 模版的主要内容,如果未能解决你的问题,请参考以下文章

SpringBoot - Thymeleaf 模版

SpringBoot 2.2.5 整合Thymeleaf模版引擎,并实现简单的页面操作

SpringBoot :thymeleaf 使用详解

springboot-thymeleaf

springboot:thymeleaf使用详解

Thymeleaf3语法详解解解解解