快捷導(dǎo)航

SpringBoot中的Thymeleaf模板

更新時(shí)間：2018年10月11日 10:10:13 作者：JMCui

Thymeleaf 的出現(xiàn)是為了取代 JSP，雖然 JSP 存在了很長(zhǎng)時(shí)間，并在 Java Web 開發(fā)中無(wú)處不在，但是它也存在一些缺陷。在這篇文中給大家介紹了這些缺陷所存在問題，對(duì)spring boot thymeleaf 模板相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧

一、前言

Thymeleaf 的出現(xiàn)是為了取代 JSP，雖然 JSP 存在了很長(zhǎng)時(shí)間，并在 Java Web 開發(fā)中無(wú)處不在，但是它也存在一些缺陷：

1、JSP 最明顯的問題在于它看起來(lái)像HTML或XML，但它其實(shí)上并不是。大多數(shù)的JSP模板都是采用HTML的形式，但是又摻雜上了各種JSP標(biāo)簽庫(kù)的標(biāo)簽，使其變得很混亂。

2、JSP 規(guī)范是與 Servlet 規(guī)范緊密耦合的。這意味著它只能用在基于 Servlet 的Web應(yīng)用之中。JSP模板不能作為通用的模板（如格式化Email），也不能用于非Servlet的 Web 應(yīng)用。

相較于 JSP 來(lái)說，Thymeleaf 很好的解決了這些缺點(diǎn)：

1、Thymeleaf模板是原生的，不依賴于標(biāo)簽庫(kù)。它能在接受原始 HTML 的地方進(jìn)行編輯和渲染。

2、因?yàn)樗鼪]有與Servlet規(guī)范耦合，因此 Thymeleaf 模板能夠進(jìn)入JSP所無(wú)法涉足的領(lǐng)域。這意味著Thymeleaf模板與JSP不同，它能夠按照原始的方式進(jìn)行編輯甚至渲染，而不必經(jīng)過任何類型的處理器。當(dāng)然，我們需要Thymeleaf來(lái)處理模板并渲染得到最終期望的輸出。即便如此，如果沒有任何特殊的處理，home.html也能夠加載到Web瀏覽器中，并且看上去與完整渲染的效果很類似。

Spring boot不建議使用 JSP 開發(fā)web。

二、集成 Thymeleaf 模板引擎

SpringBoot 對(duì) Thymeleaf 模板引擎的支持也很簡(jiǎn)單：

1、pom.xml

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

這時(shí)候，SpringBoot 對(duì) Thymeleaf 模板的支持就完成了，我們就能在 Web 開發(fā)中使用 Thymeleaf 模板了，簡(jiǎn)單吧？

之前的文章有提到 SpringBoot 的關(guān)鍵是 “約定俗成”。既然我們選擇了這么簡(jiǎn)單的配置，那么在開發(fā)中就要遵守 SpringBoot 對(duì) Thymeleaf 約定俗成的方案，最重要的一點(diǎn)就是模板文件放在 templates 目錄下，即模板解析器前綴是 /templates/ ，后綴是 .html 。

2、application.yml

如果不想要所謂約定俗成的方案，想進(jìn)行一些自定義的配置呢？且看下方：

spring:
 thymeleaf:
 prefix: classpath:/templates/
 suffix: .html
 servlet:
  content-type: text/html
 enabled: true
 encoding: UTF-8
 mode: HTML5
 cache: false

3、WebConfig.java

如果上面的配置還不能達(dá)到你的要求，你想要更細(xì)化對(duì) Thymeleaf 的控制，包括配置視圖解析器、模板解析器以及模板引擎這些，那么請(qǐng)看下面的方案！

/**
 * 1、ThymeleafViewResolver 接收邏輯視圖名稱將它解析為視圖
 * 2、SpringTemplateEngine會(huì)在Spring中啟用Thymeleaf引擎，用來(lái)解析模板，并基于這些模板渲染結(jié)果
 * 3、TemplateResolver會(huì)最終定位和查找模板。
 */
@Configuration
public class WebConfig {
 /**
  * 配置 Thymeleaf 視圖解析器 —— 將邏輯視圖名稱解析為 Thymeleaf 模板視圖
  *
  * @param springTemplateEngine 模板引擎
  * @return
  */
 @Bean
 public ViewResolver viewResolver(SpringTemplateEngine springTemplateEngine){
  ThymeleafViewResolver resolver = new ThymeleafViewResolver();
  resolver.setTemplateEngine(springTemplateEngine);
  return resolver;
 }
 /**
  * 模板引擎 —— 處理模板并渲染結(jié)果
  *
  * @param templateResolver 模板解析器
  * @return
  */
 @Bean
 public SpringTemplateEngine springTemplateEngine(ITemplateResolver templateResolver) {
  SpringTemplateEngine springTemplateEngine = new SpringTemplateEngine();
  springTemplateEngine.setTemplateResolver(templateResolver);
  return springTemplateEngine;
 }
 /**
  * 模板解析器 —— 加載 Thymeleaf 模板
  *
  * @return
  */
 @Bean
 public ITemplateResolver templateResolver() {
  SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
  templateResolver.setPrefix("classpath:/templates/");
  templateResolver.setSuffix(".html");
  templateResolver.setTemplateMode(TemplateMode.HTML);
  templateResolver.setCacheable(false);
  templateResolver.setTemplateMode("HTML5");
  return templateResolver;
 }
}

三、使用 Thymeleaf 模板

做好了上面的配置后，讓我們來(lái)看看如何在 SpringBoot 中使用 Thymeleaf 模板吧：

1、模板文件 — /templates/user/list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8" />
 <title>Insert title here</title>
</head>
<body>
<h2>用戶列表</h2>
<div>
 <ul>
  <li th:each="user:${users}">
   <span th:text="${user.uuid}"></span>-
   <span th:text="${user.name}"></span>-
   <span th:text="${user.age}"></span>-
   <span th:text="${user.address}"></span>
  </li>
 </ul>
</div>
</body>
</html>

2、控制層 — ModelAndViews

這里 Model 指的是：控制層處理完請(qǐng)求，返回需要渲染的結(jié)果；Views 指的是：模板的邏輯視圖名（前后端分離）。

@Controller
@RequestMapping("/user")
public class UserController {
 @RequestMapping("/list")
 public String listUser(Model model) {
  List<UserDto> userList = new ArrayList<>();
  for (int i = 0; i < 10; i++) {
   userList.add(new UserDto(UUID.randomUUID().toString().replace("-", ""), "張三" + i, 1, "中國(guó)北京"));
  }
  model.addAttribute("users", userList);
  return "user/list";
 }
}

3、效果