Spring MVC视图层：thymeleaf vs. JSP

本文对比了同一Spring MVC工程中相同页面（一个订阅表单）分别采用Thymeleaf和JSP（包括JSP、JSTL、Spring tag lib）两种方式的实现。

本文的所有代码来自一个可运行的应用。你可以从文档页面下载该应用程序的源代码。

Common requirements

顾客通过一个表单添加到消息列表中，包含下面两个域：

Email地址
订阅类型（接收所有邮件、每日摘要）

要求该页面支持HTML5且完全国际化，国际化信息从Spring框架中配置的MessageSource对象中抽取所有的文本和消息。

该应用包含两个@Controller，二者含有相同的代码，只是跳转到不同的view：

SubscribeJsp用于JSP页面（subscribejsp视图）
SubscribeTh用于Thymeleaf页面（subscribeth视图）

在模型（model）中包含下列类：

Subscription：form-backing bean，包含两个域：String email和SubscriptionType subscriptionType。
SubscriptionType：一个枚举类型，表单中subscriptionType域的值，可取的值包含ALL_EMAILS和DAILY_DIGEST。

（本文我们仅关注JSP和Thymeleaf模板代码的讨论。如果你想了解controller代码和Spring配置的实现细节，请自行查看下载包中的源代码）

使用JSP实现（Doing it with JSP）

这是页面：

下面是JSP代码，使用了JSTL（core）和Spring（tags和form） JSP标签库：

<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %><%@
taglib prefix="s" uri="http://www.springframework.org/tags" %><%@
taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@
page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html>
 
<html>
 
<head>
    <title>Spring MVC view layer: Thymeleaf vs. JSP</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" href="<s:url value='/css/thvsjsp.css' />"/>
</head>
 
<body>
 
<h2>This is a JSP</h2>
 
<s:url var="formUrl" value="/subscribejsp" />
<sf:form modelAttribute="subscription" action="${formUrl}">
 
    <fieldset>
 
        <div>
            <label for="email"><s:message code="subscription.email" />: </label>
            <sf:input path="email" />
        </div>
        <div>
            <label><s:message code="subscription.type" />: </label>
            <ul>
                <c:forEach var="type" items="${allTypes}" varStatus="typeStatus">
                    <li>
                        <sf:radiobutton path="subscriptionType" value="${type}" />
                        <label for="subscriptionType${typeStatus.count}">
                            <s:message code="subscriptionType.${type}" />
                        </label>
                    </li>
                </c:forEach>
            </ul>
        </div>
 
        <div class="submit">
            <button type="submit" name="save"><s:message code="subscription.submit" /></button>
        </div>
 
    </fieldset>
 
</sf:form>
 
</body>
 
</html>