thymeleaf 使用详解

川长思鸟来 2022-05-22 23:56 200阅读 0赞

*  thymeleaf介绍
 *  变量表达式
 *  选择(星号)表达式
 *  文字国际化表达式
 *  URL表达式
 *  几种常用的使用方法
 *  引用js的坑

# thymeleaf介绍 #

简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

1.  Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
2.  Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
3.  Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

\#标准表达式语法 它们分为四类： 1.变量表达式 2.选择或星号表达式 3.文字国际化表达式 4.URL表达式

# 变量表达式 #

变量表达式即OGNL表达式或Spring EL表达式(在Spring术语中也叫model attributes)。如下所示： `${session.user.name}`  
它们将以HTML标签的一个属性来表示：

# 选择(星号)表达式 #

选择表达式很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行，如下：  
`*{customer.name}`

被指定的object由`th:object`属性定义：

# 文字国际化表达式 #

很多情况下我们并不希望在代码里硬编码进文字，我们希望把文字提取成统一的代号，这样方便管理，也方便更改语言。  
我们要做的首先是创建一个语言文件，比如`message_chinese.properties`:

title=这是标题
    message1=这是消息2
    message2=这是消息2
    ....

然后我们在application.properties里加上下面这行注册这个语言文件:

spring.messages.basename=message_chinese

这样，我们在模板里就可以通过`#{消息名}`来获取这个消息对应的真正的文字:

# URL表达式 #

URL表达式指的是把一个有用的上下文或回话信息添加到URL，这个过程经常被叫做URL重写。例如 `@{/order/list}`  
URL还可以设置参数： `@{/order/details(id=${orderId})}`  
相对路径： `@{../documents/report}`

让我们看这些表达式：

常用th标签都有那些？  
![这里写图片描述][3e00f82f15165f2512ca2a7578b8bf59.png]  
![这里写图片描述][3689edaf0407acbf9f7f073ba36052e6.png]  
![这里写图片描述][d609da37e66dd2eb82f01838828f59d5.png]

# 几种常用的使用方法 #

1、赋值、字符串拼接

<p th:text="${collect.description}">description</p>
    <span th:text="'Welcome to our application, ' + ${user.name} + '!'">

字符串拼接还有另外一种简洁的写法

2、条件判断 If/Unless

Thymeleaf中使用`th:if和th:unless`属性进行条件判断，下面的例子中，`<a>`标签只有在th:if中条件成立时才显示：

<a th:if="${myself=='yes'}" > </i> </a>
    <a th:unless=${session.user != null} th:href="@{/login}" >Login</a>

`th:unless于th:if`恰好相反，只有表达式中的条件不成立，才会显示其内容。

也可以使用 `(if) ? (then) : (else)` 这种语法来判断显示的内容

3、for 循环

<tr th:each="collect,iterStat : ${collects}"> 
        <th scope="row" th:text="${collect.id}">1</th>
        <td >
           <img th:src="${collect.webLogo}"/>
        </td>
        <td th:text="${collect.url}">Mark</td>
        <td th:text="${collect.title}">Otto</td>
        <td th:text="${collect.description}">@mdo</td>
        <td th:text="${terStat.index}">index</td>
    </tr>

iterStat称作状态变量，属性有：  
1. index:当前迭代对象的index（从0开始计算）  
2. count: 当前迭代对象的index(从1开始计算)  
3. size:被迭代对象的大小  
4. current:当前迭代变量  
5. even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）  
6. first:布尔值，当前循环是否是第一个  
7. last:布尔值，当前循环是否是最后一个  
4、URL  
URL在Web应用模板中占据着十分重要的地位，需要特别注意的是Thymeleaf对于URL的处理是通过语法@\{…\}来处理的。 如果需要Thymeleaf对URL进行渲染，那么务必使用`th:href，th:src`等属性，下面是一个例子

<a th:href="@{/standard/{type}(type=${type})}">view</a>
    
    
    <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

设置背景

根据属性值改变背景

几点说明：  
上例中URL最后的`(orderId=${o.id})` 表示将括号内的内容作为URL参数处理，该语法避免使用字符串拼接，大大提高了可读性  
`@{…}`表达式中可以通过\{orderId\}访问Context中的orderId变量  
`@{/order}`是Context相关的相对路径，在渲染时会自动添加上当前Web应用的Context名字，假设context名字为app，那么结果应该是/app/order

# 引用js的坑 #

有时候我们想用js变量来保存模板传递的参数，我们可以这样来引用:

注意，这是官方推荐的写法，注意以下几点。

我们要用`inline`来指定这个`script`标签;

我们需要注释`<![CDATA[,]]>`对，否则就会无法在js中使用比较符号;

我们要用`[[${value}]]`来引用模板变量;

我们要在变量外面也套上注释`\**\`，并在后面添加上默认的值，这是为了前端开发人员能在没有后台的情况下正常渲染。

[3e00f82f15165f2512ca2a7578b8bf59.png]: /images/20220523/f4de9ecdea454c208c4b0c6aaa96336c.png
[3689edaf0407acbf9f7f073ba36052e6.png]: /images/20220523/764fabe200e8454e8d3d7ee20a43f611.png
[d609da37e66dd2eb82f01838828f59d5.png]: /images/20220523/8777424ec9c144fb9253e08da10816b6.png