首页> 青鸟动态> 大咖分享> 玩转SpringBoot集成 Thymeleaf 模版引擎

玩转SpringBoot集成 Thymeleaf 模版引擎

2023年03月09日 13:21供稿中心：北大青鸟总部

摘要：这节主要是把SpirngBoot集成模板引擎Thymeleaf中的步骤梳理了一下，希望同学们可以有所收获。

随着互联网技术的发展，在前后端分离开发模式已经逐渐成为主流今天，前后端技术的划分也越来越清晰，社会分工进一步细化，职业岗位也更加细分，慢慢开始就有了前端攻城狮和后端攻城狮，技术也进一步细分，出现了以HTML、JS等为主的页面技术，以Java、Python为主的后端开发语言技术。

在Javaweb开发领域有着很多很优秀的页面技术，有静态页面技术，如：HTML/HTML5等，有动态页面技术，如：jsp。这些优秀的页面技术，使Java在web开发领域有着举足轻重的地位。

今天咱们就来介绍一个在Java开发领域非常流行的模板引擎技术-Thymeleaf，用过SpringBoot的同学可能都知道，SpringBoot在自己体系里面默认支持的页面技术不是JSP，而是一个叫Thymeleaf的模板引擎技术，当然它也是有一网页技术。

为什么SpringBoot在web开发的时候不是默认支持JSP了呢，做过web开发的同学可能都知道，其实JSP本身就是Servlet，在生产环境中，SpringBoot重新编译JSP可能会导致较大的性能损失，并且很难追查到问题根源。

所以SpringBoot官方推荐的官方推荐使用Thymeleaf，今天咱们就来一起学习一下SpringBoot集成Thymeleaf模板引擎技术做web开发。

究竟是什么样的一个技术，竟然可以得到SpringBoot的青睐，那这个我必须要好好研究一番。

什么是模板引擎

在传统的页面开发过程中通常采用的HTML+ JS技术，而现在大部分网站都采用标签化+模块化的设计。模板引擎其实就是根据这种方式，使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档在原有的HTML页面中来填充数据。最终达到渲染页面的目的。而模板引擎技术主要分两种：

常用的模板引擎技术：

Thymeleaf
FreeMarker
Velocity
今天咱么就来学习Thymeleaf.

什么是Thymeleaf

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

Thymeleaf的主要目标是提供一种优雅且高度可维护的模板创建方式。为此，它以自然模板的概念为基础，以不影响模板用作设计原型的方式将其逻辑注入模板文件。这样可以改善设计沟通，并缩小设计团队与开发团队之间的差距。

Thymeleaf也已经从一开始就设计了Web标准-尤其是HTML5-如果需要的话，允许您创建完全验证的模板

在现代web开发领域，前后端分离已经成了标配，前端可以独立部署成为服务，前后端从物理上完全进行隔离，降低程序耦合度。但是SpringBoot官方依然为我们提供了模版引擎用于一些无需前后端分离的场景。Thymeleaf是新一代的模板引擎，在Spring Boot 中，官方推荐使用Thymeleaf来做前端模版引擎。

Thymeleaf的主要特点：

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

Thymeleaf渲染 Web 页面

添加pom依赖

首先我们要根据之前学习SpringBoot的文章，先创建一个最简单的SpringBoot工程，然后第一步添加Thymeleaf的依赖。

<dependency>

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

添加Thymeleaf相关属性配置

在application.properties文件中添加Thymeleaf相关配置

#Thymeleaf配置
# 编码类型
spring.thymeleaf.encoding=utf-8
# 模板文件解析模式
spring.thymeleaf.mode=HTML5
# 模板文件位置前缀
spring.thymeleaf.prefix=classpath:/templates/
# 模板文件位置后缀
spring.thymeleaf.suffix=.html

创建HTML

创建html文件，放在template文件夹中

导入thymeleaf的名称空间

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

thymeleaf基础语法

创建html页面，我们使用的th:text；可以改变当前元素里面的文本内容；

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>SpringBoot集成thymeleaf</title>
</head>
<body>
<h1>thymeleaf模板引擎</h1>

<p th:text="${hello}">这是的内容将被替换</p>
</body>
</html>

创建controller测试

在写controller的时候，一定要注意这次controller我们使用注解是@Controller，因为我们要跳转到html，不在是返回JSON数据了。

/**
* SpringBoot集成thymeleaf
*/
@Controller
public class ThymeleafController {

@RequestMapping("/demo")
public String demo(Map<String,Object> map) {
map.put("hello", "课工场, 更可靠的IT教育！！！");
// 返回到模板引擎地址
return "/demo";
}
}

最后启动SpirngBoot工程，在浏览器地址栏中输入http://localhost:8080/demo就可以了。