thymeleaf模板手动渲染和表达式

最新推荐文章于 2024-04-02 02:08:28 发布

泠青沼~

最新推荐文章于 2024-04-02 02:08:28 发布

阅读量1.1k

点赞数

分类专栏： SpringBoot 文章标签： java intellij-idea 开发语言 spring boot spring

本文链接：https://blog.csdn.net/m0_46635265/article/details/122501676

版权

SpringBoot 专栏收录该内容

52 篇文章 2 订阅

订阅专栏

thymeleaf模板手动渲染

首先编写一个mail.html页面：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello,欢迎<span th:text="${username}"></span> 加入xxx公司！您的入职如下：</p>
<table border="1">
    <tr>
        <td>职位</td>
        <td th:text="${position}"></td>
    </tr>
    <tr>
        <td>薪水</td>
        <td th:text="${slaray}"></td>
    </tr>
</table>
</body>
</html>

然后我们编写测试类：

    @Autowired
    TemplateEngine templateEngine;
    @Test
    void contextLoads() {
        Context context = new Context();
        context.setVariable("username","LQZ_DJY");
        context.setVariable("position","java工程师");
        context.setVariable("slaray","30000");
        String mail = templateEngine.process("mail", context);
        System.out.println(mail);
    }

最后我们就可以得到自己渲染完成的页面并将它打印出来：
在这里插入图片描述

thymeleaf简单表达式

Case1：

//${变量名.属性}
<div th:text="${user.name}"></div>
<div th:text="${user.password}"></div>
//*{变量名.属性}
<div th:text="*{user.name}"></div>
<div th:text="*{user.password}"></div>

测试发现两个表达式作用都一样
在这里插入图片描述

Case2：

同样表达式*和$还有以下用法：

<div th:object="${user}">
    <div th:text="*{name}"></div>
    <div th:text="*{password}"></div>
</div>

结果就跟上面结果相同

Case3：

hello=hello           //messages.properties中配置
hello=你好            //messages_zh_CN.properties中配置
 
<div th:text="#{hello}"></div>  //#表示国际化

国际化配置，当浏览器切换到中文环境就会显示“你好”，切换到英文环境就会显示hello

Case4：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{http://localhost:8080/hello.js}"></script>
    //引用相对路径
    <script th:src="@{~/hello.js}"></script>
    <script th:src="@{//localhost:8080/hello.js}"></script>
    //加入参数
    <script th:src="@{http://localhost:8080/hello.js(name='dong',passwor=123)}"></script>
</head>

结果可以得到：
在这里插入图片描述

Case5：

加入引用上下文：

server.servlet.context-path=/dong

我们继续访问，发现js文件不能正确加载
在这里插入图片描述
加入下面的语句就可以解决：

<script th:src="@{/hello.js}"></script>

在这里插入图片描述

各种表达式

字面量

文本字面量：‘one text’, ‘Another one!’,…
数字字面量：0, 34, 3.0, 12.3,…
布尔字面量：true, false
Null字面量：null
字面量标记：one, sometext, main,…

<div th:text="'这是 文本字面量(有空格)'"></div>
<div th:text="dong"></div>
<div th:text="99"></div>
<div th:text="true"></div>

文本运算

文本可以使用 + 进行拼接

<div th:text="'hello '+'dong'"></div>
<div th:text="'hello '+${user.username}"></div>

如果字符串中包含变量，也可以使用另一种简单的方式，叫做字面量置换，用 | 代替 ‘…’ + ‘…’，如下：

<div th:text="|hello ${user.username}|"></div>
<div th:text="'hello '+${user.username}+' '+|hello ${user.address}|"></div>

算术运算

算术运算有：+, -, *, / 和 %

<div th:with="number=(99*99/99+99-1)">
    <div th:text="${number}"></div>
</div>

th:with 定义了一个局部变量 number，在其所在的 div 中可以使用该局部变量

布尔运算

二元运算符：and, or
布尔非（一元运算符）：!, not

<div th:with="number=(99*99/99+99-1)">
    <div th:text="9 eq 9 or 8 ne 8"></div>
    <div th:text="!(9 eq 9 or 8 ne 8)"></div>
    <div th:text="not(9 eq 9 or 8 ne 8)"></div>
</div>

比较和相等

表达式里的值可以使用 >, <, >= 和 <= 符号比较。== 和 != 运算符用于检查相等（或者不相等）。注意 XML规定 < 和 > 标签不能用于属性值，所以应当把它们转义为 &lt ；和 &gt ；

如果不想转义，也可以使用别名：gt (>)；lt (<)；ge (>=)；le (<=)；not (!)还有 eq (==), neq/ne (!=)

<div th:with="age=(99*99/99+99-1)">
    <div th:text="${age} eq 197"></div>
    <div th:text="${age} ne 197"></div>
    <div th:text="${age} ge 197"></div>
    <div th:text="${age} gt 197"></div>
    <div th:text="${age} le 197"></div>
    <div th:text="${age} lt 197"></div>
</div>

条件运算符

类似于我们 Java 中的三目运算符

<div th:with="age=(99*99/99+99-1)">
    <div th:text="(${age} ne 197)?'yes':'no'"></div>
</div>

其中，: 后面的部分可以省略，如果省略了，又同时计算结果为 false 时，将返回 null

内置对象

基本内置对象：

#ctx：上下文对象。
#vars: 上下文变量。
#locale：上下文区域设置。
#request：（仅在 Web 上下文中）HttpServletRequest 对象。
#response：（仅在 Web 上下文中）HttpServletResponse 对象。
#session：（仅在 Web 上下文中）HttpSession 对象。
#servletContext：（仅在 Web 上下文中）ServletContext 对象。

在页面可以访问到上面这些内置对象，举个简单例子：

<div th:text='${#session.getAttribute("name")}'></div>

实用内置对象：

#execInfo：有关正在处理的模板的信息。
#messages：在变量表达式中获取外部化消息的方法，与使用＃{…}语法获得的方式相同。
#uris：转义URL / URI部分的方法
#conversions：执行配置的转换服务（如果有）的方法。
#dates：java.util.Date对象的方法：格式化，组件提取等
#calendars：类似于#dates但是java.util.Calendar对象。
#numbers：用于格式化数字对象的方法。
#strings：String对象的方法：contains，startsWith，prepending / appending等
#objects：一般对象的方法。
#bools：布尔评估的方法。
#arrays：数组方法。
#lists：列表的方法。
#sets：集合的方法。
#maps：地图方法。
#aggregates：在数组或集合上创建聚合的方法。
#ids：处理可能重复的id属性的方法（例如，作为迭代的结果）。
这是一些内置对象以及工具方法，使用方式也都比较容易，如果使用的是 IntelliJ IDEA，都会自动提示对象中的方法，很方便

<div th:text="${#execInfo.getProcessedTemplateName()}"></div>
<div th:text="${#arrays.length(#request.getAttribute('names'))}"></div>

设置属性值

这个是给 HTML 元素设置属性值。可以一次设置多个，多个之间用 , 分隔开

例如：

<img th:attr="src=@{/1.png},title=${user.username},alt=${user.username}">

会被渲染成：

<img src="/myapp/1.png" title="dong" alt="dong">

Thymeleaf 还支持在每一个原生的 HTML 属性前加上 th: 前缀的方式来使用动态值，像下面这样：

<img th:src="@{/1.png}" th:alt="${user.username}" th:title="${user.username}">

上面案例中的 alt 和 title 则是两个特殊的属性，可以一次性设置，像下面这样：

<img th:src="@{/1.png}" th:alt-title="${user.username}">

遍历

数组/集合/Map/Enumeration/Iterator 等的遍历也算是一个非常常见的需求，Thymeleaf 中通过 th:each 来实现遍历，像下面这样：

<table border="1">
    <tr th:each="u : ${users}">
        <td th:text="${u.username}"></td>
        <td th:text="${u.address}"></td>
    </tr>
</table>

Thymeleaf 也对此提供了支持：

index：当前的遍历索引，从0开始。
count：当前的遍历索引，从1开始。
size：被遍历变量里的元素数量。
current：每次遍历的遍历变量。
even/odd：当前的遍历是偶数次还是奇数次。
first：当前是否为首次遍历。
last：当前是否为最后一次遍历。

<table border="1">
    <tr th:each="u,s:${users}">
        <td th:text="${u.name}"></td>
        <td th:text="${u.password}"></td>
        <td th:text="${s.index}"></td>
        <td th:text="${s.count}"></td>
        <td th:text="${s.current}"></td>
        <td th:text="${s.size}"></td>
        <td th:text="${s.odd}"></td>
        <td th:text="${s.even}"></td>
        <td th:text="${s.first}"></td>
        <td th:text="${s.last}"></td>
    </tr>
</table>

分支语句

只显示奇数次的遍历，可以使用 th:if，如下：

<table border="1">
    <tr th:each="u,s:${users}" th:if="${s.odd}">
        <td th:text="${u.name}"></td>
        <td th:text="${u.password}"></td>
        <td th:text="${s.index}"></td>
        <td th:text="${s.count}"></td>
        <td th:text="${s.current}"></td>
        <td th:text="${s.size}"></td>
        <td th:text="${s.odd}"></td>
        <td th:text="${s.even}"></td>
        <td th:text="${s.first}"></td>
        <td th:text="${s.last}"></td>
    </tr>
</table>

th:if 不仅仅只接受布尔值，也接受其他类型的值，例如如下值都会判定为 true：

值是布尔值，并且为 true
值是数字，并且不为 0
值是字符，并且不为 0
值是字符串，并且不为 “false”， “off” 或者 “no”
值不是布尔值，数字，字符或者字符串

但是值为 null，th:if 会求值为 false

th:unless 的判定条件则与 th:if 完全相反

当可能性比较多的时候，也可以使用 switch：

<table border="1">
    <tr th:each="u,s:${users}" th:if="${s.odd}">
        <td th:text="${u.name}"></td>
        <td th:text="${u.password}"></td>
        <td th:text="${s.index}"></td>
        <td th:text="${s.count}"></td>
        <td th:text="${s.current}"></td>
        <td th:text="${s.size}"></td>
        <td th:text="${s.odd}"></td>
        <td th:text="${s.even}"></td>
        <td th:text="${s.first}"></td>
        <td th:text="${s.last}"></td>
        <td th:switch="${s.odd}">
            <span th:case="true">odd</span>
            <span th:case="*">even</span>
        </td>
    </tr>
</table>

th:case="*" 则表示默认选项

本地变量

使用 th:with 可以定义一个本地变量

内联

我们可以使用属性将数据放入页面模版中，但是很多时候，内联的方式看起来更加直观一些，像下面这样：

<div>hello [[${user.username}]]</div>

用内联的方式去做拼接也显得更加自然。

[[…]] 对应于 th:text （结果会是转义的 HTML），[(…)]对应于 th:utext，它不会执行任何的 HTML 转义。

像下面这样：

<div th:with="str='hello <strong>dong</strong>'">
    <div>[[${str}]]</div>
    <div>[(${str})]</div>
</div>

最终的显示效果如下：
在这里插入图片描述
不过内联方式有一个问题。我们使用 Thymeleaf 的一大优势在于不用动态渲染就可以直接在浏览器中看到显示效果，当我们使用属性配置的时候确实是这样，但是如果我们使用内联的方式，各种表达式就会直接展示在静态网页中

也可以在 js 或者 css 中使用内联，以 js 为例，使用方式如下：

<script th:inline="javascript">
    var username=[[${user.username}]]
    console.log(username)
</script>

js 中需要通过 th:inline=“javascript” 开启内联

泠青沼~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
thymeleaf模板手动渲染和表达式

thymeleaf模板手动渲染首先编写一个mail.html页面：<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>Title</title></head><body><p>hello,欢迎<span th:t
复制链接

扫一扫