第四篇：整合Thymeleaf模板
第四篇：整合Thymeleaf模板
在前面幾章中已經介紹瞭如何建立一個SpringBoot專案，同時簡單的描述了SpringBoot REST Web服務。除此之外它也是支援如JSP、Thymeleaf、FreeMarker、Mustache、Velocity等各種模板引擎，同時還為開發者提供了自定義模板擴充套件的支援。
使用嵌入式Servlet容器時，請避免使用JSP，因為使用JSP打包後會存在一些限制。
在SpringBoot
src/main/resources/templates下載入。
thymeleaf介紹
Thymeleaf是現代化伺服器端的Java模板引擎，不同與其它幾種模板的是Thymeleaf的語法更加接近HTML，並且具有很高的擴充套件性。詳細資料可以瀏覽官網。
特點
- 支援無網路環境下執行，由於它支援 html 原型，然後在 html 標籤裡增加額外的屬性來達到模板+資料的展示方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，所以 thymeleaf 的模板可以靜態地執行；當有資料返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。所以它可以讓前端小姐姐在瀏覽器中檢視頁面的靜態效果，又可以讓程式設計師小哥哥在服務端檢視帶資料的動態頁面效果。
- 開箱即用，為
Spring提供方言，可直接套用模板實現JSTL、 OGNL表示式效果，避免每天因套用模板而修改JSTL、 OGNL標籤的困擾。同時開發人員可以擴充套件自定義的方言。 SpringBoot官方推薦模板，提供了可選整合模組(spring-boot-starter-thymeleaf)，可以快速的實現表單繫結、屬性編輯器、國際化等功能。
使用
首先要在pom.xml中新增對thymeleaf模板依賴
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
然後建立一個ThymeleafController用來對映HTTP請求與頁面的跳轉，下面寫了兩種方式，第一種比較直觀和優雅，第二種相對普遍且程式碼較少，且迎合從struts2跳坑的朋友們…
- Spring4.3以後為簡化@RequestMapping(method = RequestMethod.XXX)的寫法，故而將其做了一層包裝，也就是現在的
GetMapping、PostMapping、PutMapping、DeleteMapping、PatchMapping
package com.battcn.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
/**
* @author Levin
* @since 2018/4/23 0023
*/
@Controller
@RequestMapping
public class ThymeleafController {
@GetMapping("/index")
public ModelAndView index() {
ModelAndView view = new ModelAndView();
// 設定跳轉的檢視 預設對映到 src/main/resources/templates/{viewName}.html
view.setViewName("index");
// 設定屬性
view.addObject("title", "我的第一個WEB頁面");
view.addObject("desc", "歡迎進入Luis-web 系統");
Author author = new Author();
author.setAge(24);
author.setEmail("[email protected]");
author.setName("Luis");
view.addObject("author", author);
return view;
}
@GetMapping("/index1")
public String index1(HttpServletRequest request) {
// TODO 與上面的寫法不同，但是結果一致。
// 設定屬性
request.setAttribute("title", "我的第一個WEB頁面");
request.setAttribute("desc", "歡迎進入Luis-web 系統");
Author author = new Author();
author.setAge(24);
author.setEmail("[email protected]");
author.setName("Luis");
request.setAttribute("author", author);
// 返回的 index 預設對映到 src/main/resources/templates/xxxx.html
return "index";
}
class Author {
private int age;
private String name;
private String email;
// 省略 get set
}
}最後在src/main/resources/templates目錄下建立一個名index.html的模板檔案，可以看到thymeleaf是通過在標籤中新增額外屬性動態繫結資料的
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!-- 可以看到 thymeleaf 是通過在標籤裡新增額外屬性來繫結動態資料的 -->
<title th:text="${title}">Title</title>
<!-- 在/resources/static/js目錄下建立一個hello.js 用如下語法依賴即可-->
<script type="text/javascript" th:src="@{/js/hello.js}"></script>
</head>
<body>
<h1 th:text="${desc}">Hello World</h1>
<h2>=====作者資訊=====</h2>
<p th:text="${author?.name}"></p>
<p th:text="${author?.age}"></p>
<p th:text="${author?.email}"></p>
</body>
</html>靜態效果
雙擊開啟index.html既可以看到如下的靜態效果，並未和其它模板一樣顯示一堆標籤的內容，而是正常渲染靜態頁面
動態效果
在瀏覽器輸入：http://localhost:8080/index可以看到渲染後的效果，真正意義上的動靜分離了
模板熱部署
在IntelliJ IDEA中使用thymeleaf模板的時候，發現每次修改靜態頁面都需要重啟才生效，這點是很不友好的，百度了下發現原來是預設配置搞的鬼，為了提高響應速度，預設情況下會快取模板。如果是在開發中請將spring.thymeleaf.cache 屬性設定成 false。在每次修改靜態內容時按Ctrl+Shift+F9即可重新載入了…
修改預設
favicon.ico圖示
預設情況下使用springboot總能看到一片葉子，這是因為我們沒配置自己的ico導致的，解決方法也很簡單，只需要在src/main/static/目錄下放置一張名為favicon.ico就可以了
預設配置
SpringBoot預設情況下為我們做了如下的預設配置工作，熟悉預設配置在開發過程中可以更好的解決問題
總結
Thymeleaf參考手冊：https://blog.csdn.net/zrk1000/article/details/72667478
WEB MVC詳細的內容請參考官方文件：https://docs.spring.io/spring/docs/5.0.5.RELEASE/spring-framework-reference/web.html#mvc