Spring MVC：從JSP和Tiles到Thymeleaf

工程 | Michael Isvy | 2012年10月30日 | ...

對於檢視層，Spring @MVC提供了多種選擇。在本文中，我們將首先討論您在過去幾年中最可能使用檢視層的方式：JSP。我們將看到使用它們的好壞方法（純JSP，帶有自定義標籤的JSP，Apache Tiles）。

然後，我們將討論一個名為Thymeleaf的新專案，您可以將其用作JSP的替代方法。

像往常一樣，您可以在github上的相應應用程式中找到本文討論的所有程式碼示例。

純JSP

讓我們從下面的程式碼示例開始


<html …> <body>
 <div style="padding-top: 50px;">
   <jsp:include page="../menu.jspx"/>
   <c:choose>
     <c:when test="${empty users}">
       Table is empty.
     </c:when>
     <c:otherwise>
      <table>
       <thead>
         <tr>
          <th> First Name </th>
          <th> Last name </th>
         </tr>
        </thead>
        <tbody>
        <c:forEach var="user" items="${users}">
        <tr>
          <td> <c:out value="${user.firstName}"/> </td>
          <td> <c:out value="${user.lastName}"/> </td>
        </tr>
        </c:forEach>
       </tbody>
     </table>
    </c:otherwise>
   </c:choose>
   <jsp:include page="../footer.jspx"/>
  </div>
 </body>
</html>

這段程式碼示例並非“最先進”的，因為它在8年前也可能以完全相同的方式編寫。這是否意味著它已經過時了？讓我們討論一些可能的限制。

佈局

我們使用了<jsp:include />來包含JSP片段（頁首和頁尾）。顯然，有<jsp:include />是件好事，因為它可以避免大量複製/貼上。但是，如果你有數百個JSP檔案，你會發現自己將這些<jsp:include />標籤複製/貼上到所有JSP中。最好將所有佈局資訊外部化到一個專用檔案中。

冗長

我們的使用者頁面相當小，因為它只是顯示一個元素列表。我們已經有50行程式碼（上述程式碼示例已略微縮減）。你可以想象，如果我們必須顯示大量內容，它會變得多麼龐大。

HTML/CSS合規性

此頁面不符合HTML/CSS規範。假設Web設計師已經對其進行了原型設計，你將不得不完全重寫它以使用侵入性的JSP語法。我們將在討論ThymeLeaf時再回到這一點。

JSP自定義標籤

自定義標籤是Java EE的一部分。它們允許你將JSP中重複的部分外部化，而無需編寫一行Java程式碼。你只需建立一個專用的.tagx檔案。

這是一個例子


<jsp:directive.attribute name="title" required="true" rtexprvalue="true" />
<body>
 <div style="padding-top: 50px;">
  <jsp:include page="/WEB-INF/view/jsp/menu.jspx"/>
  <jsp:doBody />
  <jsp:include page="/WEB-INF/view/jsp/footer.jspx"/>
 </div>
 </body>

在示例應用程式中，此檔名為mainLayout.tagx。它在我的檔案系統上

上述示例中最重要的指令是<jsp:doBody />。當模板被處理時，<jsp:doBody />將被“主”JSP中的內容替換。

在每個JSP內部，我可以呼叫之前建立的標籤。

如下所示，我們將custom名稱空間與我們的tags資料夾關聯起來。然後我們可以使用名為mainLayout的標籤。


<div xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:jsp="http://java.sun.com/JSP/Page"
 xmlns:custom="urn:jsptagdir:/WEB-INF/tags">
<custom:mainLayout title="${title}/">
 <c:choose>
…
 </c:choose>
</custom:mainLayout>

注意：正如你在上面的程式碼示例中看到的，每個JSP都應該指定它使用的佈局。如果我有幾個佈局，並且想將幾個JSP從mainLayout遷移到customLayout，我需要編輯每個JSP檔案並手動更改佈局。我們稍後在討論Tiles時會回到這一點。

自定義標籤不僅可以為你外部化佈局部分，還能做更多的事情。為了說明這一點，我建立了一個simpleTable標籤，這樣我就不必處理<thead>和<tbody>標籤了。當表格為空時，它還會顯示一條訊息。我的JSP檔案現在看起來像這樣


<custom:mainLayout title="${title}/">
 <custom:simpleTable collection="${users}" headerLabels="First Name, Last Name">
   <c:forEach var="user" items="${users}">
     <tr>
       <td> <c:out value="${user.firstName}"/> </td>
       <td> <c:out value="${user.lastName}"/> </td>
     </tr>
   </c:forEach>
  </custom:simpleTable>
</custom:mainLayout>

你可以瀏覽simpleTable.tagx獲取完整示例。

注意：我還應該提一下 Thibault Duchateau 建立的一個名為 Datatable4J 的新專案。它在 jquery-datatables 之上提供了一組標籤，因此無需自己編寫 Javascript 即可建立 AJAX 風格的資料表。文件寫得很好，並且該專案正在積極開發中。

優點和缺點

標準標籤有許多優點

我可以用它們做更多的事情，而不僅僅是外部化佈局資訊。最終，它們可以輕鬆地使你的JSP檔案比原來小5倍。
Eclipse/STS 與自定義標籤配合良好，因此你可以使用 CTRL+空格進行自動完成。

缺點

文件不是最好的。
儘管自定義標籤已經相當不錯了，但在過去幾年裡我沒看到任何改進。
使用自定義標籤意味著你正在Web容器內部使用JSP引擎。因此，根據你使用的Web容器（Apache Tomcat、IBM Websphere、Oracle Weblogic…），可能會出現一些細微差異。
單元測試檢視層也更困難。如果你對此主題感興趣，可以檢視Spring MVC Test framework 。

使用 Apache Tiles 外部化 JSP 佈局

Apache Tiles 十年前就已經因為是 Struts 1 自帶的佈局外掛而聞名。現在它是一個獨立的框架，並且與 Spring MVC 良好整合。

首先，你應該宣告適當的 Spring 配置


<bean id="tilesViewResolver" class="org.springframework.web.servlet.view.tiles3.TilesViewResolver"/>
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
 <property name="definitions">
 <list>
 <value>/WEB-INF/view/jsp/tiles.xml</value>
 </list>
 </property>
</bean>

在下面的例子中，我們將建立3個檔案，如下所示

佈局檔案

與 JSP 自定義標籤一樣，佈局也在專用檔案中描述。語法非常相似，只是我們使用了 tiles 標籤庫。


<html xmlns:tiles="http://tiles.apache.org/tags-tiles" …>
<head> … </head>
 <body>
   <jsp:include page="/WEB-INF/view/jsp/menu.jspx"/>
   <tiles:insertAttribute name="main" />
   <jsp:include page="/WEB-INF/view/jsp/footer.jspx"/>
 </body>
</html>

layout.jspx

上述示例中最重要的指令是<tiles:insertAttribute />。當模板被處理時，<tiles:insertAttribute />將被“主”JSP中的內容替換。然後我們將使用一個專用檔案（通常稱為tiles.xml），其中包含所有tiles定義，如下所示


<tiles-definitions>
 <definition name="tiles/*" template="/WEB-INF/view/jsp/03-tiles/layout.jspx">
  <put-attribute name="main" value="/WEB-INF/view/jsp/03-tiles/{1}.jspx" />
 </definition>
</tiles-definitions>

tiles.xml

[callout title=萬用字元用法]過去，Apache Tiles 不支援萬用字元，每次建立新的 JSP 時，我們都必須在 tiles.xml 中複製/貼上一個新的定義。[/callout]

根據以上示例，檢視“tiles/users”將使用模板layout.jspx解析為/WEB-INF/view/jsp/users.jspx 。

在JSP內部，沒有提及它使用的佈局


<div xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:jsp="http://java.sun.com/JSP/Page">
<table>
 <thead>
   <tr>
    <th> First Name </th>
    <th> Last name </th>
   </tr>
  </thead>
  <tbody>
  <c:forEach var="user" items="${users}">
   <tr>
     <td> <c:out value="${user.firstName}"/> </td>
     <td> <c:out value="${user.lastName}"/> </td>
   </tr>
  </c:forEach>
  </tbody>
 </table>
</div>

Apache Tiles 的方法類似於自定義標籤，因此具有相同的優缺點。Apache Tiles 專案上有一些活動，但它絕對不如我們將在下一節討論的 ThymeLeaf 那麼活躍。

Thymeleaf

Thymeleaf 將自己定義為一個 XML / XHTML / HTML5 模板引擎。

它不是基於JSP，而是基於一些帶有少量名稱空間魔法的純HTML檔案。

第一步：我們將ThymeLeaf與Spring整合。像往常一樣，我們需要宣告適當的檢視解析器。


<bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
  <property name="prefix" value="/WEB-INF/view/" />
  <property name="suffix" value=".html" />
  <property name="templateMode" value="HTML5" />
  <property name="cacheable" value="false" />
 </bean>
 <bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine">
  <property name="templateResolver" ref="templateResolver" />
 </bean>
 <bean class="org.thymeleaf.spring3.view.ThymeleafViewResolver">
  <property name="templateEngine" ref="templateEngine" />
  <property name="order" value="1" />
  <property name="viewNames" value="thymeleaf/*" />
 </bean>

現在讓我們考慮一個簡單的檢視頁面。


<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <link th:src="@{/style/app.css}" rel="stylesheet"/>
  </head>
  <body>
    <div th:if="${not #lists.isEmpty(users)}">
    <table>
     <thead> … </thead>
     <tbody>
<tr th:each="user : ${users}">
        <td th:text="${user.firstName}">John</td>
        <td th:text="${user.lastName}">Smith</td>
</tr>
     </tbody>
    </table>
</div></body></html>

users.html

我們可以注意到幾點

-這是一個html檔案！你可以在網頁瀏覽器中將其作為靜態檔案預覽。此功能非常適合原型設計[1]。

我們正在使用一個專用名稱空間，以便將靜態html頁面轉換為動態檢視。所有需要動態處理的部分都帶有“th:”字首。
使用“@{…}”引用上下文路徑非常簡單。這在普通JSP中很容易出錯[2]。
${users} 使用 Spring 表示式語言解析。如果我有一個表單，我將使用 *{user.name} 等表示式來引用表單元素。

[1] 本文不再深入討論原型設計。但是，如果你想了解更多資訊，可以閱讀本教程 (http://www.thymeleaf.org/petclinic.html)。

[2] 在本文的第一部分，使用 <jsp:include /> 時，我不得不使用相對路徑 “../menu.jspx”。如果有一天我將 JSP 檔案移動到不同的資料夾，這將導致連結斷裂。

佈局檔案

現在讓我們討論如何將佈局外部化到一個專用檔案中。

正如我們使用 JSP 自定義標籤和 Tiles 所做的那樣，你需要宣告你的佈局檔案。在下面的程式碼示例中，你將找到 2 個片段

headerFragment 包含所有標題資訊
menuFragment 包含我的選單欄

這些名稱不是強制性的，我可以擁有任意數量的片段。

在每個檢視檔案中，我可以像這樣使用 th:include 引用片段


<html xmlns:th="http://www.thymeleaf.org">
 <head th:include="thymeleaf/layout :: headerFragment">
 <!-- replaced with fragment content -->
 <!—- 'thymeleaf/layout' refers to /thymeleaf/layout.html on the filesystem -->
 </head>

 <body>

 <div th:include="thymeleaf/layout :: menuFragment">
 </div>
 <div th:if="${not #lists.isEmpty(users)}">
 <table>
   …
   <tbody>
     <tr th:each="user : ${users}">
      <td th:text="${user.firstName}">John</td>
      <td th:text="${user.lastName}">Smith</td>
     </tr>
   </tbody>
  </table>
 </div>
 </body>
</html>

在檔案系統上我們有

優點和缺點

從好的一面看

ThymeLeaf 是一個健康的開源專案：每月都有新功能，良好的文件，響應迅速的使用者論壇……
如果你希望你的網頁設計師能夠閱讀你的檢視檔案，那麼它是理想的模板引擎。
所使用的表示式語言（實際上稱為標準方言）比 JSP 表示式語言強大得多。
與JSP不同，Thymeleaf 非常適合富HTML電子郵件（請參閱 http://www.thymeleaf.org/springmail.html）。

缺點

Thymeleaf 還沒有自定義標籤（.tagx 檔案）的等效物。
現階段，ThymeLeaf 與 JSP 標籤庫不相容。

結論

我們已經並排比較了 JSP 和 Thymeleaf 的方法。如果你的應用程式使用數百個 JSP，我們並不是說你應該全部放棄它們，然後重新開始使用 Thymeleaf。但是，你可以考慮將 Thymeleaf 用於 Web 容器之外的 HTML 頁面，例如富 HTML 電子郵件。

如果你正在開始一個新專案，我們強烈建議你比較 Thymeleaf 和 JSP，以找出哪一個更適合你的需求。

此外，我的同事 Rob Winch 做了一個關於 Spring MVC 的現代模板選項的精彩演示。除了 JSP 和 Thymeleaf，它還討論了 Mustache 模板。

本部落格文章使用的示例應用程式可在 GitHub 上找到。

Spring 部落格

Spring MVC：從JSP和Tiles到Thymeleaf

純JSP

JSP自定義標籤

優點和缺點

使用 Apache Tiles 外部化 JSP 佈局

佈局檔案

Thymeleaf

佈局檔案

優點和缺點

結論

獲取 Spring 新聞通訊

領先一步

獲得支援

即將舉行的活動