SpringMVC系列之整合Thymeleaf【Thymeleaf整合springmvc介紹及Thymeleaf基礎概念、使用語法詳解】

Thymeleaf是java的模板引擎，可以將動態頁面靜態化；目前使用較多的模板引擎：Velocity、Freemarker、Thymeleaf

一、Maven依賴

Thymeleaf整合springmvc共需要兩個jar：
1. thymeleaf
2. thymeleaf-spring5

 <dependency>
   <groupId>org.thymeleaf</groupId>
   <artifactId>thymeleaf</artifactId>
   <version>3.0.9.RELEASE</version>
 </dependency>
 <dependency>
   <groupId>org.thymeleaf</groupId>
   <artifactId>thymeleaf-spring5</artifactId>
   <version>3.0.9.RELEASE</version>
 </dependency>

二、需要配置的Bean對象

在springmvc容器中，Thymeleaf需要配置3個Bean對象：
1. SpringResourceTemplateResolver
2. SpringTemplateEngine
3. ThymeleafViewResolver

代碼：

<!-- SpringResourceTemplateResolver --> 
<bean id="templateResolver"   class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplat eResolver">  
	<!-- 頁面位置 -->  
	<property name="prefix" value="/templates/" />  
	<!-- 頁面後綴名 -->  
	<property name="suffix" value=".html" />  
	<!-- 編碼 -->  
	<property name="characterEncoding" value="UTF-8" />  
	<!-- 模板模式：也就是使用什麼模板，默認就是HTML -->  
	<property name="templateMode" value="HTML" />
	 <!-- 是否進行頁面緩存(默認是true), 開發階段設置爲false,以便頁面修改完可以立即生效 -->  
	 <property name="cacheable" value="false" /> 
 </bean>
 
 <!-- SpringTemplateEngine --> 
 <bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">  
 	<property name="templateResolver" ref="templateResolver" /> 
 </bean>
 
<!-- ThymeleafViewResolver --> 
<bean class="org.thymeleaf.spring5.view.ThymeleafViewResolver"> 
	<property name="templateEngine" ref="templateEngine" />
	<!--如果不寫這個,返回到頁面的中文將亂碼-->  
	<property name="characterEncoding" value="UTF-8" /> 
</bean>

三、Thymeleaf詳細解析

1. Thymeleaf 介紹

用來開發Web和獨立環境項目的現代服務器端Java模板引擎。

目標：

爲咱們的開發帶來優雅的自然模板 - HTML。

可以在直接瀏覽器中直接顯示，並且可以作爲靜態原型，從而在開發團隊中實現更強大的協作。

藉助Spring Framework的模塊，可以根據自己的喜好進行自由選擇，可插拔功能組件，Thymeleaf是現代HTML5 Web開發的理想選擇 - 儘管它可以做的更多。

Spring官方支持的服務的渲模板中，並不包含JSP。而是Thymeleaf和Freemarker等，而Thymeleaf與SpringMVC的視圖技術以及SpringBoot的自動化配置集成的非常完美，幾乎沒有任何成本，咱們只需要關注一下Thymeleaf的語法即可。

Thymeleaf是一種模板語言（模板引擎）。那模板語言或模板引擎是什麼？

常見的模板語言都包含以下幾個概念：

• 數據（Data）。
• 模板（Template）。
• 模板引擎（Template Engine）。
• 結果文檔（Result Documents）。

數據

    數據是信息的表現形式和載體，可以是符號、文字、數字、語音、圖像、視頻等。
    數據本身沒有意義，數據只有對實體行爲產生影響時才成爲信息。

模板

   是一個與類型無關的類。
   編譯器在使用模板時，會根據模板實參對模板進行實例化，得到一個與類型相關的類。

模板引擎

  這裏特指用於Web開發的模板引擎；
  是爲了使用戶界面與業務數據（內容）分離而產生的，它可以生成特定格式的文檔；
  用於網站的時候模板引擎就會生成一個標準的HTML文檔。

結果文檔

  一種特定格式的文檔，比如用於網站的模板引擎就會生成一個標準的HTML文檔。

2. Thymeleaf的特點：

動靜結合：

• Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態效果，也可以讓程序員在服務器查看帶數據的動態頁面效果。
• 這是由於它支持html原型，然後在html標籤裏增加額外的屬性來達到“模板+數據”的展示方式。瀏覽器解釋html時會忽略未定義的標籤屬性，所以Thymeleaf的模板可以靜態地運行；當有數據返回到頁面時，Thymeleaf標籤會動態地替換掉靜態內容，使頁面動態顯示。

開箱即用：

• 它提供標準和Spring標準兩種方言，可以直接套用模板實現JSTL、 OGNL表達式效果，避免每天套模板、改jstl、改標籤的困擾。同時開發人員也可以擴展和創建自定義的方言。

多方言支持：

• 它提供Spring標準方言和一個與SpringMVC完美集成的可選模塊，可以快速的實現表單綁定、屬性編輯器、國際化等功能。

與SpringBoot完美整合：

• SpringBoot提供了Thymeleaf的默認配置，並且爲Thymeleaf設置了視圖解析器，我們可以像以前操作jsp一樣來操作Thymeleaf。代碼幾乎沒有任何區別，就是在模板語法上有區別。

3. 常用語法

3.1 鏈接表達式 @{}

<link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />

3.2 變量表達式：${}

Thymeleaf通過${}來獲取model中的變量，注意這不是EL表達式，而是springel表達式，但是語法非常像。

Java後端Controller代碼：

@Controller
public class UserController {

	@RequestMapping("queryUser")
	public String queryUser(Model model) {
		User user = new User(1, "張三", 20);
		model.addAttribute("user", user);
		return "index";
	}
}

在 index.html中使用如下格式，進行model中值的直接調用。

<span th:text="${user.name}">默認值</span>
   OR
<span th:text="${user['name']}">默認值</span>

3.3 選擇表達式 *{}

使用方法：通過th:object獲取對象，然後使用th:xx="*{}"獲取對象屬性值。

下面使用form和表格兩種方式展示使用方式：

 <form th:object="${user}">
    <input name="id" th:value="*{id}"/>
    <input name="name" th:value="*{name}"/>
    <input name="age" th:value="*{age}"/>
 </form>

  <table>
  <tr>
	<td>id</td>
	<td>名字</td>
	<td>年齡</td>
  </tr>
  <tr th:object="${user}">
	<td><span th:text="*{id}"></td>
	<td><span th:text="*{name}"></td>
	<td><span th:text="*{age}"></td>
  </tr>
</table>

3.4 循環 th:each

在Java後端Controller中的代碼：

@Controller
public class UserController {

	@RequestMapping("queryUser")
	public String queryUser(Model model) {
		User user2 = new User(2, "lisi", 22);
		User user3 = new User(3, "Jack", 23);
		User user4 = new User(4, "Jhon", 24);
	
		List<User> userList = new ArrayList<User>();
		userList.add(user2);
		userList.add(user3);
		userList.add(user4);
		model.addAttribute("userList", userList);
		return "index";
	}
}

在前端index.html中使用：

<table>
 	  <tr>
 		<td>id</td>
 		<td>名字</td>
 		<td>年齡</td>
 		<td>操作</td>
 	  </tr>
	 <tr th:each="user,stat:${userList}">
	    <td><span th:text="${user.id}"></td>
		<td><span th:text="${user.name}"></td>
		<td><span th:text="${user.age}"></td>
	 </tr>
</table>

注意：

stat對象包含以下屬性：

• index，從0開始的角標
• count，元素的個數，從1開始
• size，總元素個數
• current，當前遍歷到的元素
• even/odd，返回是否爲奇偶，boolean值
• first/last，返回是否爲第一或最後，boolean值

3.5 JS中使用模板數據

在js代碼中，可以使用[[${object}]]來指名調用對象。
使用[[${#httpServletRequest.getContextPath()}]]可以調用httpServletRequest對象的getContextPath()方法，當然還可以調用其他方法。

<script th:inline="javascript">
	var user = [[${user}]];
	console.log("name:" + user.name);

    var contextPath = [[${#httpServletRequest.getContextPath()}]];
	// var contextPath = [[${#request.getContextPath()}]];
	// alert("contextPath-->" + contextPath);
</script>

3.6 get請求傳參

在使用超鏈接發送get請求時，需要使用@{/url}的格式來指定訪問的路徑，如果有參數就在url中用()將鍵值對羅列，並用，隔開。

  <a th:href="@{/hello(name=test,k2=v2)}">get傳參</a>