SpringBoot - Thymeleaf 模版

绝地灬酷狼 2023-09-29 14:34 8阅读 0赞

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

作用： 表示链接

### 2、Thymeleaf属性 ###

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

如：

### 3、each ###

each循环， 可以循环List，Array

语法：

在一个html标签中，使用th:each

集合循环成员,循环的状态变量:两个名称都是自定义的。 “循环的状态变量”这个名称可以不定义，默认是"集合循环成员Stat"

each循环Map

在一个html标签中，使用th:each

集合循环成员,循环的状态变量:两个名称都是自定义的。 “循环的状态变量”这个名称可以不定义，默认是"集合循环成员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>
            
            <p th:if="${name}">name是“”</p>
            
            <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

### 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）语法使用 单引号括起来字符串 ， 使用 + 连接其他的 字符串或者表达式

（2）语法：使用双竖线， |字符串和表达式|

如：

<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][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)

[Tutorial_ Using Thymeleaf]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#web-context-namespaces-for-requestsession-attributes-etc