Spring boot 模板引擎 Thymeleaf 基础使用 2-4

最新推荐文章于 2023-03-05 22:12:34 发布
最新推荐文章于 2023-03-05 22:12:34 发布
阅读量2.6w 收藏
点赞数
分类专栏： Spring Boot 文章标签： Thymeleaf  
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34227896/article/details/100999487
版权

模板引擎
 

模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模
板引擎就会生成一个标准的 HTML 文档。
 

模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）
中的特定标记（子字符串）替换，便便生成了最终需要的业务数据（如网页）。
 

“置换型”模板引擎实现简单，但其效率低下，无法满足高负载的应用需求（比如有海量访问的网站），因此
还出现了“解释型”模板引擎和“编译型”模板引擎等.

Thymeleaf 介绍
 

Thymeleaf 是面向 Web 和独立环境的现代服务器端 Java 模板引擎，能够处理 HTML、 XML、 JavaScript、
CSS 甚⾄至纯文本。
 

Thymeleaf 旨在提供一个优雅的、高度可维护的创建模板的方式。为了实现这一目标， Thymeleaf 建立在自
然模板的概念上，将其逻辑注入到模板文件中，不会影响模板设计原型，从而改善了设计的沟通，弥合了设
计和开发团队之间的差距。
 

Thymeleaf 从设计之初就遵循 Web 标准—特别是 HTML 5 标准，如果需要， Thymeleaf 允许创建完全符合
HTML 5 验证标准的模板。
 

Spring Boot 体系内推荐使用 Thymeleaf 作为前端页面模板，并且 Spring Boot 2.0 中默认使用 Thymeleaf
3.0，性能提升幅度很大。
 

Thymeleaf 特点

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

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


对比

我们可以对比一下 Thymeleaf 和常用的模板引擎： Velocity、 Freemaker，和其他模板一起不同的是，它使用
了自然的模板技术。这意味着 Thymeleaf 的模板语法并不会破坏文档的结构，模板依旧是有效的 XML 文
档。模板还可以用做工作原型， Thymeleaf 会在运行期替换掉静态值。 Velocity 与 FreeMarker 则是连续的文
本处理器。

下面的代码示例分别使用 Velocity、 FreeMarker 与 Thymeleaf 打印出一条消息：
 

Velocity: <p>$message</p>
FreeMarker: <p>${message}</p>
Thymeleaf: <p th:text="${message}">Hello World!</p>

上面我们可以看出来 Thymeleaf 的作用域在 HTML 标签内，类似标签的一个属性来使用，这就是它的特点。
注意，由于 Thymeleaf 使用了 XML DOM 解析器，因此它并不适合于处理大规模的 XML 文件。


快速上手
 

来一个 Thymeleaf 的 Hello World 尝鲜。


相关配置

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

在 application.properties 中添加配置：
 

spring.thymeleaf.cache=false

其中， propertiesspring.thymeleaf.cache=false 是关闭 Thymeleaf 的缓存，不然在开发过程中修改页面不会
立刻生效需要重启，生产可配置为 true。

一个简单的页面

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

所有使用 Thymeleaf 的页面必须在 HTML 标签声明 Thymeleaf：
 

<html xmlns:th="http://www.thymeleaf.org">

表明页面使用的是 Thymeleaf 语法。


Controller
 

@Controller
public class HelloController {
@RequestMapping("/")
public String index(ModelMap map) {
map.addAttribute("message", "http://www.ityouknow.com");
return "hello";
}
}

这样就完成了，是不是很简单。启动项目后在浏览器中输入网址： http://localhost:8080/，会出现下面的结
果：
 

http://www.ityouknow.com

说明页面的值，已经成功的被后端传入的内容所替换。


常用语法

我们新建 ExampleController 来封装不同的方法进行演示。
 

赋值、字符串拼接

赋值和拼接：
 

<p th:text="${userName}">neo</p>
<span th:text="'Welcome to our application, ' + ${userName} + '!'"></span>

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

<span th:text="|Welcome to our application, ${userName}!|"></span>

页面 string.html：
 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example String </title>
</head>
<body>
<div >
<h1>text</h1>
<p th:text="${userName}">neo</p>
<span th:text="'Welcome to our application, ' + ${userName} + '!'"></span>
<br/>
<span th:text="|Welcome to our application, ${userName}!|"></span>
</div>
</body>
</html>

后端传值：
 

@RequestMapping("/string")
public String string(ModelMap map) {
map.addAttribute("userName", "ityouknow");
return "string";
}

使用 ModelMap 以 KV 的方式存储传递到页面。
启动项目后在浏览器中输入网址： http://localhost:8080/string，会出现下面的结果：
 

text
ityouknow
Welcome to our application, ityouknow!
Welcome to our application, ityouknow!

条件判断 If/Unless

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

<a th:if="${flag == 'yes'}" th:href="@{http://favorites.ren/}"> home </a>
<a th:unless="${flag != 'no'}" th:href="@{http://www.ityouknow.com/}" >ityouknow</
a>

th:unless 与 th:if 恰好相反，只有表达式中的条件不成立，才会显示其内容。
页面 if.html：
 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example If/Unless </title>
</head>
<body>
<div >
<h1>If/Unless</h1>
<a th:if="${flag == 'yes'}" th:href="@{http://favorites.ren/}"> home </a>
<br/>
<a th:unless="${flag != 'no'}" th:href="@{http://www.ityouknow.com/}" >ityoukn
ow</a>
</div>
</body>
</html>

后端传值：
 

@RequestMapping("/if")
public String ifunless(ModelMap map) {
map.addAttribute("flag", "yes");
return "if";
}

使用 ModelMap 以 KV 的方式存储传递到页面。
启动项目后在浏览器中输入网址： http://localhost:8080/if，会出现下面的结果：
 

If/Unless
home

单击 home 链接会跳转到： http://favorites.ren/ 地址。
 

for 循环

for 循环在我们项目中使用的频率太高了。一般结合前端的表格来使用。
首先在后端定义一个用户列表：
 

private List<User> getUserList(){
List<User> list=new ArrayList<User>();
User user1=new User("大牛",12,"123456");
User user2=new User("小牛",6,"123563");
User user3=new User("纯洁的微笑",66,"666666");
list.add(user1);
list.add(user2);
list.add(user3);
return list;
}

按照键 users，传递到前端：
 

@RequestMapping("/list")
public String list(ModelMap map) {
map.addAttribute("users", getUserList());
return "list";
}

页面 list.html 进行数据展示：
 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example If/Unless </title>
</head>
<body>
<div >
<h1>for 循环</h1>
<table>
<tr th:each="user,iterStat : ${users}">
<td th:text="${user.name}">neo</td>
<td th:text="${user.age}">6</td>
<td th:text="${user.pass}">213</td>
<td th:text="${iterStat.index}">index</td>
</tr>
</table>
</div>
</body>
</html>

iterStat 称作状态变量，属性有：

  • index，当前迭代对象的 index（从 0 开始计算）；
  • count，当前迭代对象的 index（从 1 开始计算）；
  • size，被迭代对象的大小；
  • current，当前迭代变量；
  • even/odd，布尔值，当前循环是否是偶数/奇数（从 0 开始计算）；
  • first，布尔值，当前循环是否是第一个；
  • last，布尔值，当前循环是否是最后一个。
     

在浏览器中输入网址： http://localhost:8080/list，页⾯展示效果如下：
 

for 循环
大牛 12 123456 0
小牛 6 123563 1
纯洁的微笑 66 666666 2

URL

URL 在 Web 应用模板中占据着十分重要的地位，需要特别注意的是 Thymeleaf 对于 URL 的处理是通过语
法 @{...} 来处理的。如果需要 Thymeleaf 对 URL 进行渲染，那么务必使用 th:href、 th:src 等属性，下面
是一个例子：
 

<a th:href="@{http://www.ityouknow.com/{type}(type=${type})}">link1</a>
<a th:href="@{http://www.ityouknow.com/{pageId}/can-use-springcloud.html(pageId=${
pageId})}">view</a>

也可以使用 @{...} 设置背景：
 

<div th:style="'background:url(' + @{${img url}} + ');'">

几点说明：

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

完整的页面内容 url.html：
 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example If/Unless </title>
</head>
<body>
<div >
<h1>URL</h1>
<a th:href="@{http://www.ityouknow.com/{type}(type=${type})}">link1</a>
<br/>
<a th:href="@{http://www.ityouknow.com/{pageId}/can-use-springcloud.html(pageI
d=${pageId})}">view</a>
<br/>
<div th:style="'background:url(' + @{${img}} + ');'">
<br/><br/><br/>
</div>
</div>
</body>
</html>

后端程序：

 

@RequestMapping("/url")
public String url(ModelMap map) {
map.addAttribute("type", "link");
map.addAttribute("pageId", "springcloud/2017/09/11/");
map.addAttribute("img", "http://www.ityouknow.com/assets/images/neo.jpg");
return "url";
}

在浏览器中输入⽹址： http://localhost:8080/url，页面展示效果：
 

url
link1
view

三目运算


三目运算是我们常用的功能之一，普遍应⽤用在各个项目中，下面来做一下演示。
三目运算及表单显示：
 

<input th:value="${name}"/>
<input th:value="${age gt 30 ? '中年年':'年年轻'}"/>

说明：在表单标签中显示内容使用： th:value;${age gt 30 ? '中年':'年轻'} 表示如果 age 大于
30 则显示中年，否则显示年轻。

  • gt： great than（大于）
  • ge： great equal（大于等于）
  • eq： equal（等于）
  • lt： less than（小于）
  • le： less equal（小于等于）
  • ne： not equal（不等于）

结合三目运算也可以将上面的 if else 改成这样：
 

<a th:if="${flag eq 'yes'}" th:href="@{http://favorites.ren/}"> favorites </a>

完整的页面内容 eq.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example If/Unless </title>
</head>
<body>
<div >
<h1>EQ</h1>
<input th:value="${name}"/>
<br/>
<input th:value="${age gt 30 ? '中年年':'年年轻'}"/>
<br/>
<a th:if="${flag eq 'yes'}" th:href="@{http://favorites.ren/}"> favorites </a
>
</div>
</body>
</html>

后端程序：

@RequestMapping("/eq")
public String eq(ModelMap map) {
map.addAttribute("name", "neo");
map.addAttribute("age", 30);
map.addAttribute("flag", "yes");
return "eq";
}

在浏览器中输入网址： http://localhost:8080/eq，页面展示效果如下：
 

EQ
neo
年轻
favorites

单击 favorites 链接会跳转到： http://favorites.ren/ 地址。


switch 选择
 

switch\case 多用于多条件判断的场景下，以性别举例：
 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Example switch </title>
</head>
<body>
<div >
<div th:switch="${sex}">
<p th:case="'woman'">她是一个姑娘...</p>
<p th:case="'man'">这是一个爷们!</p>
<!-- *: case的默认的选项 -->
<p th:case="*">未知性别的一个家伙。 </p>
</div>
</div>
</body>
</html>

后端程序：
 

@RequestMapping("/switch")
public String switchcase(ModelMap map) {
map.addAttribute("sex", "woman");
return "switch";
}

在浏览器器中输入网址： http://localhost:8080/switch，页面展示效果如下
 

她是一个姑娘...

可以在后台改 sex 的值来查看结果。

总结

本课介绍了模板引擎、 Thymeleaf 的使用特点、应用场景，通过实例演练展示了 Thymeleaf 各种语法特性。
通过学习可以了解到， Thymeleaf 是一个非常灵活和优秀的前端页面模板引擎，使用 Thymeleaf 可非常灵
活地展示页面内容。
点击这⾥下载源码

淹死的鱼pp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring Boot集成Thymeleaf模板引擎的完整步骤
08-26
主要给大家介绍了关于Spring Boot集成Thymeleaf模板引擎的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
thymleaf 使用三目运算多个条件判断的写法
越是憧憬，越要风雨兼程
09-17 1万+
前言：最近做的项目中使用到了thymleaf ，因为不是特别会，所以走了很多弯路，在此总结一下。 做类似 “男女” 下拉选择的时候，一般使用 0、1 来进行标识，一般这样写： <select class="form-control" id="isRecommend" th:value="${paper.isRecommend=='0'?'推荐':'不推荐'}"> 这样的只有两个状...
第三章（续）Thymeleaf语法（一）
shmily0300377的专栏
03-05 660
Thymeleaf中提供了一套标准方言，这种方言提供了各种处理器，这些处理器可以应用特定的逻辑到某个组件（标签、文本、注释等）对象。并且，对于大多数用户来说，这套标准方言足以满足各种逻辑表达的需求。官方提供的Thymeleaf-spring方言，可以刚好地利用spring framework中的一些特性。例如，使用Spring Expression Language 或者Spring EL 代替OGNL。
第5章 Spring Boot模板Thymeleaf入门详解
陈小房的自我修炼
09-09 2421
Spring Boot模板Thymeleaf 语法详解
spring boot使用thymeleaf 关闭缓存
热门推荐
霓虹深处
05-22 2万+
如何关闭thymeleaf缓存 properties： #spring.thymeleaf.prefix=classpath:/templates/ #spring.thymeleaf.suffix=.html #spring.thymeleaf.mode=HTML5 #spring.thymeleaf.encoding=UTF-8 #spring.thymeleaf.content-ty...
禁用thymeleaf模板引擎缓存
Java_Glory的博客
05-06 2505
1.在开发期间模板引擎页面修改内容后，页面刷新不会有效果 2.可以在properties配置文件中禁用thymeleaf模板引擎缓存 # 禁用缓存 spring.thymeleaf.cache=false 3.在项目运行期间，IDEA不会让其修改内容生效，或者按Ctrl+F9重新编译实时生效 ...
spring boot使用thymeleaf模板的方法详解
08-29
thymeleaf 是新一代的模板引擎，在spring4.0中推荐使用thymeleaf来做前端模版引擎。下面这篇文章主要给大家介绍了关于spring boot使用thymeleaf模板的方法，文中通过示例代码介绍的非常详细，需要的朋友们下面来一起...
详解spring Boot 集成 Thymeleaf模板引擎实例
08-29
本篇文章主要介绍了spring Boot 集成 Thymeleaf模板引擎实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
spring-boot-Thymeleaf 模板
最新发布
03-08
Spring Boot Thymeleaf是一个集成了Thymeleaf模板引擎的Spring Boot Starter，用于简化在Spring Boot应用程序中使用Thymeleaf的过程。 Thymeleaf是一个现代服务器端Java模板引擎，可以处理HTML、XML、JavaScript、...
spring boot使用thymeleaf为模板的基本步骤介绍
08-28
Spring Boot项目的默认模板引擎是Thymeleaf，这没什么好说的，个人觉得也非常好，下面这篇文章主要给大家介绍了关于spring boot使用thymeleaf为模板的相关资料，需要的朋友可以参考借鉴，下面来一起学习学习吧。
Thymeleaf 之 使用devtools热启动、热部署
知识林www.zslin.com
10-24 1万+
本文章来自【知识林】在Springboot+Thymeleaf的开发过程中，默认情况下修改到任何代码都需要重新启动项目才能生效，相信有过开发经验的人都会知道这是一件非常痛苦且非常浪费时间的事情，多么希望能够在修改html、css、js这些文件后刷新页面就能显示修改后的效果。在网上找了很多热启动、热部署的文档，基本都是一样的，都是叫将spring.thymeleaf.cache设置为false，但根本
Vert.x 4 Web Manual中文版
白石的专栏
05-13 3386
Vert.x-Web 是一组构建块，用于使用 Vert.x 构建 Web 应用程序。 将其视为构建现代、可扩展的 Web 应用程序的瑞士军刀。
SpringBoot（模板Thymeleaf）
weixin_43908530的博客
06-12 172
模板Thymeleaf 相关配置： <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 在 application.properties 中添加配置： spring.thymeleaf.cache=false 其中，properties
thymeleaf语法和常用标签
kagurawill的博客
08-06 457
Thymeleaf 介绍 Thymeleaf 是一款用于渲染 XML/XHTML/HTML 5 内容的模板引擎。类似 JSP、Velocity、FreeMaker 等，它也可以轻易的与 Spring MVC 等 Web 框架进行集成作为 Web 应用的模板引擎。与其他模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。 Thyme...
Spring Boot学习总结之整合thymeleaf
米不开朗基罗的博客
06-26 328
对于thymeleaf的简介前一篇文章里面已经讲过了，本篇文章的内容是快速和Spring Boot整合 。（一）添加依赖&lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artif...
Vert.x Web模块（五）
JflyDragon的博客
10-08 2537
模板 Vert.x-Web通过支持一些流行的模板引擎，提供了动态页面生成的能力，可以简单添加。模板引擎用TemplateEngine进行描述。用render方法进行模板渲染。使用模板最简单的方法不是直接调用模板引擎，而是使用TemplateHandler处理器。此处理器为你的HTTP请求中的路径，调用调用模板引擎。默认模板处理器在叫templates路径下查找模板。此路径是可设置
vertx HttpClient使用的各种坑
微服务技术与实践专栏
11-08 7174
vert HttpClient性能非常好，但是使用不当，就会出现非常难于定位的问题。很多问题非常严重，比如挂死，分析日志、堆栈都可能看不出任何原因。因此在写代码的时候，就需要非常注意。下面有几个排查点： 设置请求超时时间。必须合理设计超时时间，否则异常情况，会导致连接不释放。如果在response里面做其他操作，还需要重设超时时间。 ...
Spring-Boot初学之配置文件application.properties（thymeleaf模板）
ice_lemon的博客
06-22 1万+
Spring-Boot配置文件thymeleaf模板配置项 application.properties
19、 （2.5分）Spring Boot 中集成 Thymeleaf 需要引入哪个依赖A、 spring-boot-starter-freemarker B、 spring-boot-starter-thymeleaf C、 spring-boot-starter-jetty D、spring-boot-starter-tomcat
06-08
这个依赖包含了Thymeleaf模板引擎、Spring的模板引擎抽象层和Spring的模板引擎自动配置等相关组件。其他选项中，A描述的是集成FreeMarker模板引擎的依赖，C和D描述的是集成Web服务器的依赖，都和集成Thymeleaf没有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值