Spring MVC 視圖技術(shù)（下）

1. 前言

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

通過(guò)本節(jié)章節(jié)，你將學(xué)習(xí)到：

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

2. Spring MVC 和 Thymeleaf

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

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

這并不是絕對(duì)的，最后的選擇還是要根據(jù)項(xiàng)目的運(yùn)行場(chǎng)景做決定。

在 Spring MVC 項(xiàng)目中使用 Thymeleaf ，配置過(guò)程并不復(fù)雜。跟著流程走，你將體驗(yàn)到 Thymeleaf 的魅力。

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

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

2.1 配置流程

1. 打開項(xiàng)目中的 pom.xml 文件，添加項(xiàng)目對(duì) Thymeleaf 包的依賴；

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

2. 打開項(xiàng)目中的 WebConfig 配置類。在類中添加一個(gè) ApplicationContext 類型的屬性。并讓 Spring 自動(dòng)注入進(jìn)來(lái)；

@Autowired
private ApplicationContext applicationContext;

Tips： Thymeleaf 相關(guān)組件需要依賴上下文容器對(duì)象。

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 項(xiàng)目中可以使用多視圖技術(shù)?？梢允褂媚０鍖?duì)象的 setOrder ( ) 指定查找順序。本章節(jié)主要講解 Thymeleaf 視圖技術(shù)。

所以，請(qǐng)大家注釋掉配置過(guò)的其它視圖技術(shù)的相關(guān)信息。

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

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

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

Tips： 這里有組件與組件的依賴關(guān)系。

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

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

經(jīng)過(guò)上述配置后，Spring MVC 就具有了對(duì) Thymeleaf 的支持。

2.2 測(cè)試流程

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

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

   hello.html 文件的內(nèi)容：

<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 文件內(nèi)容和普通的 HTML 頁(yè)面沒有多大的區(qū)別，區(qū)別于在 HTML 頁(yè)面標(biāo)簽中使用了 Thymeleaf 提供的一些語(yǔ)法元素，如：th:text 用來(lái)動(dòng)態(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ā)布項(xiàng)目、啟動(dòng) tomcat、打開瀏覽器，在瀏覽器中輸入： http://localhost:8888/sm-demo/thymeleaf/hello。

Tips： 再聲明一下，為了讓 Thymeleaf 的測(cè)試更干凈，注釋或刪除掉原來(lái)配置過(guò)的視圖技術(shù)相關(guān)信息。

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

3. Thymeleaf 的特點(diǎn)

Thymeleaf 與其它的視圖技術(shù)相比較，最大的優(yōu)點(diǎn)在于動(dòng)靜結(jié)合。

何謂動(dòng)靜給合？

Thymeleaf 的模板是純正的 html 代碼。Thymeleaf 提供的模板語(yǔ)法指令都是以 HTML 標(biāo)簽屬性方式嵌入進(jìn)去的，沒有為頁(yè)面添加額外的元素，頁(yè)面的整體風(fēng)格不會(huì)被破壞。

當(dāng)運(yùn)行在服務(wù)器端時(shí)，才會(huì)由模板引擎解析。如果直接由瀏覽器打開，瀏覽器會(huì)忽視 Thymeleaf 指令屬性，把模板文件當(dāng)成 HTML 代碼，可以直接在瀏覽器顯示。

動(dòng)靜結(jié)合的優(yōu)點(diǎn)：

• 不影響前后端工程師對(duì)頁(yè)面的設(shè)計(jì)和調(diào)整；
• 沒有在頁(yè)面中侵入非 HTML 語(yǔ)言代碼，保持了原始頁(yè)面的風(fēng)格。

除了動(dòng)靜給合，還有一個(gè)較大的特點(diǎn)就是與 Spring MVC 或 Spring Boot 完美結(jié)合，Spring 提供有對(duì)接 Thymeleaf 的接口組件，使用起來(lái)方便直接。

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

4. 小結(jié)

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

使用 Thymeleaf 之前需要做些簡(jiǎn)單的配置，一定要注意組件之間的依賴關(guān)系。本課程并沒有深入的講解 Thymeleaf 的模板語(yǔ)法，但其語(yǔ)法并不復(fù)雜 。如果你對(duì) Thymeleaf 有興趣，可以進(jìn)入官方網(wǎng)站了解更多。