AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Thymeleaf

2022-09-20 277
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Thymeleaf

✈️Thymeleaf介绍

首先，先贴一个官网地址，Thymeleaf官网：https://www.thymeleaf.org/

image.png


Thymeleaf 是什么？

官网：Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

翻译：Thymeleaf 是一个现代的服务器端Java模板引擎，适用于web和独立环境。


HTML templates written in Thymeleaf still look and work like HTML, letting the actual templates that are run in yourapplication keep working as useful design artifacts.

用Thymeleaf编写的HTML模板的外观和工作方式仍然类似HTML，让运行在您的应用程序中的实际模板继续作为有用的设计工件工作。


Thymeleaf 是一个 XML/XHTML/HTML5 模板引擎，可用于 Web 与非 Web 环境中的应用开发。它是一个开源的 Java 库，基于 Apache License 2.0 许可，由 Daniel Fernández 创建。


Thymeleaf 提供了一个用于整合 Spring MVC 的可选模块，在应用开发中，你可以使用 Thymeleaf 来完全代替 JSP，或其他模板引擎，如 Velocity、FreeMarker 等。Thymeleaf 的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的 XML 与 HTML 模板。相对于编写逻辑或代码，开发者只需将标签属性添加到模板中即可。


✈️为什么选择thymeleaf

静态html嵌入标签属性，浏览器可以直接打开模板文件

非常适合前后端的独立开发

SpringBoot官方推荐的模板

💬举个栗子

th:text="${msg}"是一个动态标签，当传递了msg这个数据，页面就会渲染这个标签，如果没有传递这个参数，就会显示原本的网页结构。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="${msg}"></p>
</body>
</html>

✈️Thymeleaf简单表达式

变量表达式:：${…}

选择变量表达式：*{…}

消息表达式：#{…}

链接表达式：@{…}

片段表达式：~{…}

✈️Thymeleaf的常用属性

image.png

💬准备

创建一个springboot项目，然后添加依赖文件

pom.xml

<dependency>
   <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

在使用 Thymeleaf 之前，首先要在页面的 html 标签中声明名称空间。

xmlns:th="http://www.thymeleaf.org"

💬th:text、th:utext

th:text

创建一个控制器方法，将信息传输给页面

@Controller
public class ThymeleafController {
    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("msg","Hello Thymeleaf!!!");
        return "index";
    }
}

创建一个html页面用来接收显示信息

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p th:text="${msg}"></p>
</body>
</html>

image.png

当然我们也可以通过右击鼠标或Ctrl+U查看一下网页源码，可以看到这里是把表达式的值直接放在了标签里面！

image.png


如果你想把传输到页面的数据通过html标签的方式加粗或着其他操作，就需要使用th:utext来显示文本！！！

格式如下：

model.addAttribute("msg","<b>欢迎访问Thymeleaf</b>");

th:utext

<p th:utext="${msg}"></p>

扩展：拼接字符串

<!--方式一：-->
<p th:text="${msg}+官网"></p>
<!--方式二：-->
<p th:text="|${msg}官网|"></p>

💬th:object

创建一个对象

@Data
public class People {
    private String name;
    private Integer age;
    private Integer sex;
    private Boolean isVip;
    private Date createTime;
    private List<String> tags;
}

新建一个方法，将people对象传给页面

@Controller
public class ThymeleafController {
    @GetMapping("/index")
    public String index(Model model){
        People people = new People();
        people.setName("Thymeleaf");
        people.setAge(20);
        people.setSex(1); // 1表示男  2表示女
        people.setIsVip(true);
        people.setCreateTime(new Date());
        people.setTags(Arrays.asList("Java","Go","Vue"));
        model.addAttribute("people",people);
        return "index";
    }
}

现在，如果让你把people对象的所有信息显示到页面上你会怎么做？

我们刚才学习了th:text，所以你可能会像下面这样的方式来显示！


<p th:text="${people.name}"></p>
<p th:text="${people.age}"></p>
<p th:text="${people.sex}"></p>
<p th:text="${people.isVip}"></p>
<p th:text="${people.createTime}"></p>
<p th:text="${people.tags}"></p>

这么写有问题吗？No problem！但这不是最好的方式，下面再来看一种新的方式，它的格式是这样的：

th:object

<div th:object="${people}">
    <p th:text="*{name}"></p>
    <p th:text="*{age}"></p>
    <p th:text="*{sex}"></p>
    <p th:text="*{isVip}"></p>
    <p th:text="*{createTime}"></p>
    <p th:text="*{tags}"></p>
</div>

这种方式用到了thymeleaf为我们提供的th:object属性以及变量表达式*{...}


💬th:value

比如设置文本框的内容为people的name

<input type="text" th:value="${people.name}">

💬th:if、th:unless

th:if：控制标签是否显示，if表达式的值为 true 则显示，否则不显示；

th:unless：与th:if相反，表达式为fakse时显示，反之，不显示。

th:if

<div th:if="${true}">显示</div>
<!--th:if="${false}" 此时就不会生成这个div标签-->

举个栗子： 判断people是否为会员，是，就在页面显示VIP，不是则不显示。

<div th:if="${people.isVip}">VIP</div>

我们在这里传参时people.setIsVip(true);传的参数为true，下面看效果：

image.png

th:unless

<div th:unless="${true}">不显示</div>

image.png

💬th:switch、th:case

people的sex为1则显示男，2 则显示女，*则显示保密。使用方式如下：

<div th:switch="${people.sex}">
    <p th:case="1">男</p>
    <p th:case="2">女</p>
    <p th:case="*">保密</p>
</div>

注意：* 要放在最后，切记！切记！切记！


💬th:each

th:each

通过循环迭代显示people的tags信息

<ul>
    <li th:each="tag:${people.tags}" th:text="${tag}"></li>
</ul>

image.png


将当前迭代的最后一个颜色设置为红色

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li th:each="tag,iterStat:${people.tags}"
        th:text="${tag}"
        th:classappend="${iterStat.last}?active">
    </li>
</ul>
</body>
</html>

image.png

th:each属性状态变量iterStat


状态变量iterStat包含以下数据:


index属性，当前迭代索引，从0开始

count属性，当前迭代索引，从1开始

size属性，迭代变量中的元素总数

current属性，每次迭代的iter变量。

even/odd布尔属性，当前迭代是偶数还是奇数

first属性，当前迭代是否是第一个，布尔值。

last布尔属性，当前迭代是否是最后一个，布尔值。

💬th:href

index.css
.app{
    height: 100px;
    width:100px;
    background-color: aqua;
}

通过外链的方式连接index.css文件

<link rel="stylesheet" th:href="@{index.css}">
<a th:href="@{https://www.baidu.com/}">百度一下</a>

image.png


✈️内联表达式

[[…]]相当于th:text，即会将HTML代码转义

[(…)]相当于th:utext，不会转义HTML代码

<div>[[${people.age}]]</div>
<div>[(${msg})]</div>

在JavaScript中使用内联表达式

<script th:inline="javascript">
    const people= /*[[${people}]]*/{};
    console.log(people)
</script>

image.png

✈️基本对象

💬#ctx：上下文对象

${#ctx.request}
${#ctx.response}
${#ctx.session}
${#ctx.servletContext}

💬请求/会话属性

${session.xxx}                 
${application.xxx}          
${#request.getAttribute('xxx')}
文章标签：
Java
前端开发
索引
Apache
Spring
HTML5
移动开发
数据格式
开发者
XML
Binaire-沐辰
目录
相关文章
程序三两行
|
6月前
|
XML Java 数据格式
freemarker
freemarker
程序三两行
59 0
程序三两行
|
6月前
|
XML Java 数据格式
freemarker使用总结
freemarker使用总结
程序三两行
50 0
极客李华
|
6月前
|
前端开发 JavaScript Java
Thymeleaf一篇文章学会使用
Thymeleaf一篇文章学会使用
极客李华
65 0
SuperProgMan.SYJ
|
前端开发 Java 应用服务中间件
Thymeleaf
模板引擎 前端交给我们的页面，是html页面。如果是我们以前开发，我们需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示，及交互等。
SuperProgMan.SYJ
121 0
Thymeleaf
zkkmywfwk7jnc
|
前端开发 JavaScript Java
Spring Boot整合Thymeleaf模板引擎
Spring Boot整合Thymeleaf模板引擎
zkkmywfwk7jnc
205 0
Spring Boot整合Thymeleaf模板引擎
游客at5iuxxf3n33o
|
XML 前端开发 JavaScript
Thymeleaf的使用
最近听说thymeleaf好像也挺流行的，还说是spring官方推荐使用，那thymeleaf究竟是什么呢？spring为什么推荐用它呢？怎么用呢？本文将为你揭秘！
游客at5iuxxf3n33o
237 0
Thymeleaf的使用
BUG弄潮儿
|
存储 移动开发 缓存
26、模板引擎thymeleaf
模板引擎根据一定的语义，将数据填充到模板中，产生最终的HTML页面。模板引擎主要分两种：客户端引擎和服务端引擎。
BUG弄潮儿
188 0
26、模板引擎thymeleaf
MCNU云原生
|
存储 Java Spring
Spring Boot整合Thymeleaf和FreeMarker
Spring Boot整合Thymeleaf和FreeMarker
MCNU云原生
332 0
AAAAAAAA
|
消息中间件 Java 应用服务中间件
Freemarker（下）
Freemarker（下）
AAAAAAAA
171 0
Freemarker（下）
AAAAAAAA
|
XML Java Maven
Freemarker（上）
Freemarker（上）
AAAAAAAA
164 0
Freemarker（上）