Spring MVC 視圖技術（下）

1. 前言

本章節(jié)將向大家講解 Thymeleaf 視圖技術 。Thymeleaf 和 Spring MVC 或 Spring Boot 有著較完美的契合度，是 Spring 官方建議的首選視圖技術。

通過本節(jié)章節(jié)，你將學習到：

• Spring MVC 中如何使用 Thymeleaf 。這是本章節(jié)的重點也是難點；
• Thymeleaf 的特點；

2. Spring MVC 和 Thymeleaf

本章節(jié)繼續(xù)和大家一起講解 Spring MVC 支持的視圖技術。其實除了有服務器端的視圖技術，還有客戶端的視圖技術。區(qū)別在于，服務器端視圖技術的模板引擎采用服務器端語言，客戶端的視圖技術采用客戶端語言。

兩者各有優(yōu)勢。主流開發(fā)模式更偏向于客戶端的視圖技術。在客戶端對頁面進行渲染，有效地減少了對服務器端的依賴，可以降低服務器端的承受壓力。

這并不是絕對的，最后的選擇還是要根據(jù)項目的運行場景做決定。

在 Spring MVC 項目中使用 Thymeleaf ，配置過程并不復雜。跟著流程走，你將體驗到 Thymeleaf 的魅力。

視圖技術至少需要提供模板和模板引擎，Thymeleaf 也不例外。如果要在 Spring MVC 中使用 Thymeleaf ，需要告訴 Spring MVC 模板存放在哪里？模板引擎是誰？

Tips： 本章節(jié)使用純 JAVA 方法進行配置。

2.1 配置流程

1. 打開項目中的 pom.xml 文件，添加項目對 Thymeleaf 包的依賴；

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

2. 打開項目中的 WebConfig 配置類。在類中添加一個 ApplicationContext 類型的屬性。并讓 Spring 自動注入進來；

@Autowired
private ApplicationContext applicationContext;

Tips： Thymeleaf 相關組件需要依賴上下文容器對象。

3. 在 WebConfig 配置類中配置 Thymeleaf 模板組件信息，并指定模板文件存放位置；

@Bean
public SpringResourceTemplateResolver templateResolver() {
   SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
   templateResolver.setApplicationContext(this.applicationContext);
   templateResolver.setPrefix("/WEB-INF/templates/");
   templateResolver.setSuffix(".html");
   templateResolver.setTemplateMode(TemplateMode.HTML);
   templateResolver.setCacheable(true);
    //templateResolver.setOrder(1);
   return templateResolver;
}

Tips： Spring MVC 項目中可以使用多視圖技術。可以使用模板對象的 setOrder ( ) 指定查找順序。本章節(jié)主要講解 Thymeleaf 視圖技術。

所以，請大家注釋掉配置過的其它視圖技術的相關信息。

4. 在 WebConfig 配置類中指定模板引擎對象；

   先配置 SpringTemplateEngine 組件： 從字面上很好理解，模板引擎組件。

@Bean
public SpringTemplateEngine templateEngine() {
   SpringTemplateEngine templateEngine = new SpringTemplateEngine();
   templateEngine.setTemplateResolver(templateResolver());
   templateEngine.setEnableSpringELCompiler(true);
   return templateEngine;
}

Tips： 這里有組件與組件的依賴關系。

? 配置 ThymeleafViewResolver 組件： 視圖解析組件，依賴于模板引擎，模板引擎依賴模板資源。

@Bean
public ViewResolver viewResolver(SpringTemplateEngine templateEngine) {
	ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
	viewResolver.setTemplateEngine(templateEngine);
	viewResolver.setCharacterEncoding("UTF-8");
	return viewResolver;
}

經過上述配置后，Spring MVC 就具有了對 Thymeleaf 的支持。

2.2 測試流程

1. 在項目的 WEB-INF 目錄下新建 templates 目錄，并在此目錄下新建名為 hello.html 的文件。

   Tips： hello.html 雖然擴展名是 html。 其實是遵循 Thymeleaf 模板語法規(guī)范的模板文件。本課程主要講解在 Spring MVC 中如何使用 Thymeleaf , 會講解一點 Thymeleaf 模板語法，但更多的了解需要你移步到 Thymeleaf 的官方網站：https://www.thymeleaf.org/。

   hello.html 文件的內容：

<div>
   	<table>
   		<thead>
   			<tr>
   				<th>name</th>
   				<th>password</th>
   			</tr>
   		</thead>
   		<tbody>
   			<tr>
   				<td th:text="${user.userName}"></td>
   				<td th:text="${user.userPassword}"></td>
   			</tr>
   		</tbody>
   	</table>
</div>

Tips： hello.html 文件內容和普通的 HTML 頁面沒有多大的區(qū)別，區(qū)別于在 HTML 頁面標簽中使用了 Thymeleaf 提供的一些語法元素，如：th:text 用來動態(tài)讀取作用域中的數(shù)據(jù)。

2. 編寫控制器；

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafAction {
   @RequestMapping("/hello")
   public String thymeleaf(ModelMap map) {
   	User user=new User("mk", "123456");
   	map.addAttribute("user", user);
   	return "hello";
   }
}

3. 發(fā)布項目、啟動 tomcat、打開瀏覽器，在瀏覽器中輸入： http://localhost:8888/sm-demo/thymeleaf/hello。

Tips： 再聲明一下，為了讓 Thymeleaf 的測試更干凈，注釋或刪除掉原來配置過的視圖技術相關信息。

Thymeleaf 的語法元素也稱其為指令，以 th 開頭，如前面用到的 th:text。

3. Thymeleaf 的特點

Thymeleaf 與其它的視圖技術相比較，最大的優(yōu)點在于動靜結合。

何謂動靜給合？

Thymeleaf 的模板是純正的 html 代碼。Thymeleaf 提供的模板語法指令都是以 HTML 標簽屬性方式嵌入進去的，沒有為頁面添加額外的元素，頁面的整體風格不會被破壞。

當運行在服務器端時，才會由模板引擎解析。如果直接由瀏覽器打開，瀏覽器會忽視 Thymeleaf 指令屬性，把模板文件當成 HTML 代碼，可以直接在瀏覽器顯示。

動靜結合的優(yōu)點：

• 不影響前后端工程師對頁面的設計和調整；
• 沒有在頁面中侵入非 HTML 語言代碼，保持了原始頁面的風格。

除了動靜給合，還有一個較大的特點就是與 Spring MVC 或 Spring Boot 完美結合，Spring 提供有對接 Thymeleaf 的接口組件，使用起來方便直接。

正因為 Thymeleaf 的優(yōu)點，建議作為項目開發(fā)中的首選方案。

4. 小結

本節(jié)課程和大家一起講解了 Spring MVC 中如何使用 Thymeleaf。

使用 Thymeleaf 之前需要做些簡單的配置，一定要注意組件之間的依賴關系。本課程并沒有深入的講解 Thymeleaf 的模板語法，但其語法并不復雜 。如果你對 Thymeleaf 有興趣，可以進入官方網站了解更多。