1. 程式人生 > >Spring MVC中使用Thymeleaf模板引擎

Spring MVC中使用Thymeleaf模板引擎

Ricky發表在天碼營

新一代Java模板引擎Thymeleaf一定讓你驚歎於Thymeleaf的強大,但是真正在Web應用結合Web特性使用模板引擎,還需要進行一定的配置和學習。

Thymeleaf於Spring整合

Thymeleaf除了基本的模板引擎,還提供了一套Spring整合技術使得在Spring MVC中能夠使用它完全替代JSP作為模板引擎,它的功能特性如下:

  • Spring MVC中@Controller中的方法可以直接返回模板名稱,接下來Thymeleaf模板引擎會自動進行渲染
  • 模板中的表示式支援Spring表示式語言(Spring EL)
  • 表單支援,併兼容Spring MVC的資料繫結與驗證機制
  • 國際化支援

配置TemplateEngine

<bean id="templateResolver"
       class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
  <property name="prefix" value="/WEB-INF/templates/" />
  <property name="suffix" value=".html" />
  <property name="templateMode" value="HTML5" />
</bean>

<bean id="templateEngine"
      class="org.thymeleaf.spring4.SpringTemplateEngine">
  <property name="templateResolver" ref="templateResolver" />
</bean>

上述配置的TemplateEngine從/WEB-INF/templates/目錄中讀取資料夾,預設的字尾名是.html,所以在渲染模板時只需要提供模板的名字(例如index.html可以省略為index),TemplateEngine就可以找到對應的模板內容。

為了能夠方便的讓@Controller進行渲染(類似JSP),例如:

@Controller
public class IndexController {

    @RequestMapping("/")
    public String index() {
        return "index";
    }
}

還需要配置Spring中的ViewResolver:

<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
  <property name="templateEngine" ref="templateEngine" />
</bean>

@Controller

Spring MVC中@Controller用於處理HTTP請求並返回內容到瀏覽器。在渲染模板前,ThymeleafViewResolver會自動把當前的Model加入到Context中:

@Controller
public class IndexController {

    @RequestMapping("/")
    public String index(Model model) {
        model.addAttribute("list", Lists.newArrayList("a", "b", "c"));
        return "index";
    }
}

這樣在index模板中可以訪問表示式${list}得到`["a", "b", "c"]的值。

表單

Command物件用來在Spring MVC中繫結表單與後端物件,Thymeleaf提供的th:object屬性可以用來指定Command物件:

<form action="#" th:action="@{/}" th:object="${command}" method="post">
  <label>Title</label>
  <input type="text" th:field="*{title}"/>
  <label>Text</label>
  <input type="text" th:field="*{text}"/>
  <br/>
  <input type="submit" value="Add"/>
</form>

<div>
  <div th:each="entry: ${entries}">
    <h2 th:text="${entry.title}">Title</h2>
    <p th:text="${entry.text}">Text</p>
  </div>
</div>

指定th:object屬性後,各個<input>中還需要指定th:field,這與後端繫結物件的欄位名要一致。在@Controller中的方法如下:

@RequestMapping(value = "/", method = GET)
public String index(Model model) {
    model.addAttribute("entries", getAll());
    model.addAttribute("command", new Entry());
    return "index";
}

@RequestMapping(value = "/", method = POST)
public String post(Entry entry) {
    add(entry.title, entry.text);

    return "redirect:/";
}

post()方法的引數Entry entry是根據HTTP請求的輸入title和text值自動進行的繫結。

在Spring Boot中使用Thymeleaf

Spring Boot能夠簡化Spring應用配置、加速開發,對於Thymeleaf模板引擎提供了內建支援,在Spring Boot應用中只需要引入:

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

所有Thymeleaf的相關依賴都會被載入到類路徑中,更重要的是,上文中所有TemplateEngine,ThymeleafViewResolver等bean都在應用啟動後被自動例項化,預設情況下模板的目錄位於src/main/resources/templates/資料夾中,所以開發者只需要在這個資料夾中新增模板檔案即可。

如果需要改變一些配置,可以在application.properties中寫入:

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html # ;charset=<encoding> is added

改變這些配置的值,也就會自動改變Spring Boot幫助我們例項化的bean的配置。