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标准。假设网页设计师已对其进行原型设计，则您需要对其进行完全重写才能使用侵入式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之上提供了一组标签，因此允许创建AJAX风格的数据表，而无需自己编写Javascript。文档非常好，并且该项目正在积极开发中。

优缺点

标准标签有很多好处

我可以使用它们来做的事情远不止外部化布局信息。最终，它们可以轻松地使您的JSP大小比其他方式小5倍。
Eclipse/STS 与自定义标签配合良好，因此您可以使用 CTRL+space 进行自动完成。

缺点是

文档不是很好。
即使自定义标签已经非常简洁，但我记不起过去几年对它们的任何改进。
使用自定义标签意味着您在Web容器中使用JSP引擎。然后，您可以根据使用的Web容器（Apache Tomcat、IBM Websphere、Oracle Weblogic……）预期一些细微的差异。
对视图层进行单元测试也更难。如果您对此主题感兴趣，可以查看Spring MVC 测试框架。

使用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文件！您实际上可以在Web浏览器中将其预览为静态文件。此功能非常适合原型设计[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。但是，对于Web容器之外的HTML页面，例如富文本HTML电子邮件，你可以考虑使用Thymeleaf。

如果你正在启动一个新项目，我们强烈建议你比较Thymeleaf和JSP，以便确定哪一个更适合你的需求。

此外，我的同事Rob Winch做了一个关于Spring MVC的现代模板选项的精彩演示。除了JSP和Thymeleaf，它还讨论了Mustache模板。

此博客文章使用的示例应用程序可在github上找到。

Spring 博客

Spring MVC：从JSP和Tiles到Thymeleaf

纯JSP

JSP自定义标签

优缺点

使用Apache Tiles外部化JSP的布局

布局文件

Thymeleaf

布局文件

优缺点

结论

获取Spring时事通讯

领先一步

获取支持

即将举行的活动