文章目录
1 引入Thymeleaf
1.1 Thymeleaf是什么?
Thymeleaf是一个现代的服务器端Java模板引擎的web和独立的环境，能够处理HTML, XML, JavaScript, CSS，甚至纯文本。
Thymeleaf的主要目标是提供一种优雅的和高度可维护的方式来创建模板。为了实现这一点，它构建在自然模板的概念上，以不影响模板作为设计原型使用的方式将其逻辑注入模板文件。这改进了设计的交流，并在设计和开发团队之间架起了桥梁。
Thymeleaf的设计从一开始就考虑了Web标准——尤其是HTML5——允许你创建完全验证模板，如果你需要的话。
1.2 Thymeleaf可以处理什么样的模板?
开箱即用，Thymeleaf允许您处理六种模板，其中每一种被称为模板模式:
HTML
XML
TEXT
JAVASCRIPT
CSS
RAW
有两种标记模板模式(HTML和XML)、三种文本模板模式(文本、JAVASCRIPT和CSS)和一种无操作模板模式(RAW)。
HTML模板模式将允许任何类型的HTML输入，包括HTML5、HTML 4和XHTML。将不执行任何验证或格式良好性检查，并且将在输出中尽可能尊重模板代码/结构。
XML模板模式将允许XML输入。在这种情况下，代码应该是格式良好的—没有未关闭的标记，没有未引用的属性，等等—如果发现格式良好性违规，解析器将抛出异常。注意，将不执行任何验证(针对DTD或XML模式)。
文本模板模式将允许对非标记性质的模板使用特殊语法。此类模板的示例可能是文本电子邮件或模板化文档。注意，HTML或XML模板也可以作为文本处理，在这种情况下，它们不会被解析为标记，而每个标记、DOCTYPE、注释等都将被视为纯文本。
JAVASCRIPT模板模式将允许在Thymeleaf应用程序中处理JAVASCRIPT文件。这意味着能够像在HTML文件中一样在JavaScript文件中使用模型数据，但是要使用特定于JavaScript的集成，比如专门的转义或自然脚本。JAVASCRIPT模板模式被认为是文本模式，因此使用与文本模板模式相同的特殊语法。
CSS模板模式将允许处理Thymeleaf应用程序中涉及的CSS文件。与JAVASCRIPT模式类似，CSS模板模式也是一种文本模式，并使用来自文本模板模式的特殊处理语法。
原始模板模式根本不会处理模板。它用于将未触及的资源(文件、URL响应等)插入正在处理的模板中。例如，可以将HTML格式的外部非控制资源包含到应用程序模板中，但要确保这些资源可能包含的任何Thymeleaf代码都不会被执行。
1.3 方言:标准方言
Thymeleaf是一个非常可扩展的模板引擎(事实上它可以被称为模板引擎框架)，它允许你定义和自定义的方式，你的模板将被处理到一个精细的细节级别。
将一些逻辑应用到标记工件(标记、一些文本、注释，如果模板不是标记，则仅仅是占位符)的对象称为处理程序，这些处理程序的集合—加上一些额外的工件—通常是方言的组成部分。Thymeleaf的核心库提供了一种称为标准方言的方言，这对大多数用户来说应该足够了。
注意，方言实际上可能没有处理器，并且完全由其他类型的工件组成，但是处理器绝对是最常见的用例。
本教程介绍标准方言。在下面的页面中，您将了解到的每个属性和语法特性都是由这种方言定义的，即使没有明确提到。
当然，如果希望在利用库的高级特性的同时定义自己的处理逻辑，用户可以创建自己的方言(甚至扩展标准的方言)。Thymeleaf也可以配置成同时使用几种方言。
官方thymeleaf-spring3和thymeleaf-spring4集成包都定义一个方言称为“SpringStandard方言”,大部分是一样的标准方言,但小适应更好地利用Spring框架的一些特性(例如,通过使用Spring表达式语言或图像代替OGNL展示出)。因此，如果您是Spring MVC用户，您就不会浪费时间，因为您在这里学到的几乎所有东西都将在您的Spring应用程序中使用。
标准方言的大多数处理器都是属性处理器。这允许浏览器在处理之前正确显示HTML模板文件，因为它们将直接忽略额外的属性。例如，一个使用标记库的JSP可能包含一段不能被浏览器直接显示的代码，比如:
<form:inputText name="userName" value="${user.name}" />
Thymeleaf标准方言将允许我们实现相同的功能与:
<input type="text" name="userName" value="James Carrot" th:value="${user.name}" />
这不仅可以被浏览器正确显示,但这也让我们(可选)指定一个值属性(“James Carrot”,在这种情况下),将显示静态原型时在浏览器中打开, 在处理模板期间，将取代 ${user.name}。
这有助于设计人员和开发人员处理相同的模板文件，并减少将静态原型转换为工作模板文件所需的工作。这样做的能力称为自然模板。
2 一个很棒的虚拟杂货店设计
本文所示示例的源代码，以及本指南的后续章节，可以在 Good Thymes Virtual Grocery GitHub repository.
2.1 一个杂货店的网站
为了更好地解释使用Thymeleaf处理模板所涉及的概念，本教程将使用一个演示应用程序，您可以从项目的网站下载。
这个应用程序是一个虚拟杂货店的web站点，它将为我们提供许多场景来展示Thymeleaf的许多特性。
首先，我们的应用程序需要一组简单的模型实体:通过创建订单向客户销售的产品。我们还将管理这些产品的评论:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SM2ByOKR-1607176550334)(C:\Users\songyazhou\Desktop\62i7e9b7.bmp)]
我们的应用程序还将有一个非常简单的服务层，由包含以下方法的服务对象组成:
public class ProductService {
...
public List<Product> findAll() {
return ProductRepository.getInstance().findAll();
}
public Product findById(Integer id) {
return ProductRepository.getInstance().findById(id);
}
}
在web层，我们的应用程序将有一个过滤器，根据请求URL将执行委托给thymeleaf启用的命令:
private boolean process(HttpServletRequest request, HttpServletResponse response)
throws ServletException {
try {
// This prevents triggering engine executions for resource URLs
if (request.getRequestURI().startsWith("/css") ||
request.getRequestURI().startsWith("/images") ||
request.getRequestURI().startsWith("/favicon")) {
return false;
}
/*
* Query controller/URL mapping and obtain the controller
* that will process the request. If no controller is available,
* return false and let other filters/servlets process the request.
*/
IGTVGController controller = this.application.resolveControllerForRequest(request);
if (controller == null) {
return false;
}
/*
* Obtain the TemplateEngine instance.
*/
ITemplateEngine templateEngine = this.application.getTemplateEngine();
/*
* Write the response headers
*/
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
/*
* Execute the controller and process view template,
* writing the results to the response writer.
*/
controller.process(
request, response, this.servletContext, templateEngine);
return true;
} catch (Exception e) {
try {
response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
} catch (final IOException ignored) {
// Just ignore this
}
throw new ServletException(e);
}
}
这是我们的IGTVGController接口:
public interface IGTVGController {
public void process(
HttpServletRequest request, HttpServletResponse response,
ServletContext servletContext, ITemplateEngine templateEngine);
}
我们现在要做的就是创建IGTVGController接口的实现，从服务中检索数据，并使用ITemplateEngine对象处理模板。
最后，它看起来是这样的:
但首先让我们看看模板引擎是如何初始化的。
2.2 创建和配置模板引擎
我们的过滤器中的process(…)方法包含这一行:
ITemplateEngine templateEngine = this.application.getTemplateEngine();
这意味着GTVGApplication类负责创建和配置Thymeleaf应用程序中最重要的对象之一:TemplateEngine实例(ITemplateEngine接口的实现)。
我们的org.thymeleaf.TemplateEngine对象初始化如下:
public class GTVGApplication {
...
private final TemplateEngine templateEngine;
...
public GTVGApplication(final ServletContext servletContext) {
super();
ServletContextTemplateResolver templateResolver =
new ServletContextTemplateResolver(servletContext);
// HTML is the default mode, but we set it anyway for better understanding of code
templateResolver.setTemplateMode(TemplateMode.HTML);
// This will convert "home" to "/WEB-INF/templates/home.html"
templateResolver.setPrefix("/WEB-INF/templates/");
templateResolver.setSuffix(".html");
// Template cache TTL=1h. If not set, entries would be cached until expelled
templateResolver.setCacheTTLMs(Long.valueOf(3600000L));
// Cache is set to true by default. Set to false if you want templates to
// be automatically updated when modified.
templateResolver.setCacheable(true);
this.templateEngine = new TemplateEngine();
this.templateEngine.setTemplateResolver(templateResolver);
...
}
}
配置TemplateEngine对象的方法有很多，但是现在，这几行代码就足以告诉我们所需的步骤。
模板解析器
让我们从模板解析器开始:
ServletContextTemplateResolver templateResolver =
new ServletContextTemplateResolver(servletContext);
模板解析器是实现来自调用的Thymeleaf API的接口的对象
org.thymeleaf.templateresolver.ITemplateResolver：
public interface ITemplateResolver {
...
/*
* Templates are resolved by their name (or content) and also (optionally) their
* owner template in case we are trying to resolve a fragment for another template.
* Will return null if template cannot be handled by this template resolver.
*/
public TemplateResolution resolveTemplate(
final IEngineConfiguration configuration,
final String ownerTemplate, final String template,
final Map<String, Object> templateResolutionAttributes);
}
这些对象负责决定如何访问模板，在这个GTVG应用程序中，org.thymeleaf.templateresolver.ServletContextTemplateResolver 意味着我们要从Servlet上下文中获取模板文件作为资源:应用程序范围的javax.servlet.ServletContext对象存在于每个Java web应用程序中，它从web应用程序根目录解析资源。
但这还不是我们对模板解析器所能说的全部，因为我们可以在它上面设置一些配置参数。
一、模板模式:
templateResolver.setTemplateMode(TemplateMode.HTML);
HTML是ServletContextTemplateResolver的默认模板模式，但是最好还是建立它，以便我们的代码清楚地记录正在发生的事情。
templateResolver.setPrefix("/WEB-INF/templates/");
templateResolver.setSuffix(".html");
前缀和后缀修改我们将传递给引擎的模板名称，以获得要使用的实际资源名称。
使用此配置，模板名称“product/list”将对应于:
servletContext.getResourceAsStream("/WEB-INF/templates/product/list.html")
可选地，在模板解析器中通过cacheTTLMs属性配置一个解析后的模板在缓存中的生存时间:
templateResolver.setCacheTTLMs(3600000L);
如果达到了最大缓存大小，并且它是当前缓存中最老的条目，那么在到达TTL之前仍然可以从缓存中删除模板。
用户可以通过实现ICacheManager接口或修改StandardCacheManager对象来管理默认缓存来定义缓存行为和大小。
关于模板解析器还有很多要学习的，但是现在让我们来看看模板引擎对象的创建。
模板引擎
模板引擎对象是org.thymeleaf.ITemplateEngine接口的实现。其中一个实现是由Thymeleaf核心:org.thymeleaf.ITemplateEngine，我们创建了一个实例，它在这里:
templateEngine = new TemplateEngine();
templateEngine.setTemplateResolver(templateResolver);
很简单，不是吗?我们只需要创建一个实例并将模板解析器设置为它。
模板解析器是TemplateEngine惟一需要的参数，尽管后面还会介绍许多其他参数(消息解析器、缓存大小等)。现在，这就是我们所需要的。
我们的模板引擎现在已经准备好了，我们可以开始使用Thymeleaf创建我们的页面。
3 使用文本
3.1 多语言的欢迎
我们的第一个任务是为我们的杂货站点创建一个主页。
这个页面的第一个版本将非常简单:只有一个标题和一条欢迎信息。
这是我们的/WEB-INF/templates/home.html文件:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Good Thymes Virtual Grocery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all"
href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
</head>
<body>
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
</body>
</html>
首先你会注意到这个文件是HTML5，它可以被任何浏览器正确显示，因为它不包含任何非html标签(浏览器会忽略所有他们不理解的属性，比如th:text)。
但是你可能也注意到这个模板并不是一个真正有效的HTML5文档，因为我们在==th:*==表单中使用的这些非标准属性是HTML5规范所不允许的。事实上，我们甚至添加了一个xmlns:th属性到我们的标签，一些绝对非html5的东西:
<html xmlns:th="http://www.thymeleaf.org">
它在模板处理中没有任何影响，但是作为一个incantation，这就避免了我们的IDE抱怨==th:*==这些属性缺少命名空间定义。
那么，如果我们想让这个模板html5有效呢?简单:切换到Thymeleaf的数据属性语法，使用数据前缀的属性名称和连字符(-)分隔符，而不是分号(