本文对比了同一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="" %><%@taglib prefix="s" uri="" %><%@taglib prefix="c" uri="" %><%@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>
使用Thymeleaf实现（Doing it with Thymeleaf）
下面使用Thymeleaf实现相同的页面。页面如下：
下面是Thymeleaf代码：
<!DOCTYPE html> <html xmlns:th=""> <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="../../css/thvsjsp.css" th:href="@{/css/thvsjsp.css}"/></head> <body> <h2>This is a Thymeleaf template</h2> <form action="#" th:object="${subscription}" th:action="@{/subscribeth}"><fieldset><div><label for="email" th:text="#{subscription.email}">Email: </label><input type="text" th:field="*{email}" /></div><div><label th:text="#{subscription.type}">Type: </label><ul><li th:each="type : ${allTypes}"><input type="radio" th:field="*{subscriptionType}" th:value="${type}" /><label th:for="${#ids.prev(‘subscriptionType’)}"th:text="#{‘subscriptionType.’+${type}}">First type</label></li><li th:remove="all"><input type="radio" /> <label>Second Type</label></li></ul></div><div class="submit"><button type="submit" name="save" th:text="#{subscription.submit}">Subscribe me!</button></div></fieldset> </form> </body> </html>注意事项：
上述代码更加接近HTML——没有奇怪的标签，只是增加了一些有意义的属性。变量表达式（${…}）是Spring EL且在模型属性（model attributes）上执行，星号表达式（*{…}）在form backing bean上执行，hash表达式（#{…}）用于国际化，link表达式（@{…}）重写URL。（如果想深入学习，参考Getting started with the Standard Dialect in 5 minutes）。这里允许使用原型代码（prototype code）：例如，可以把第一个域的标签设置为Email:，而在页面执行时，Thymeleaf会根据subscription.email的值把它替换为国际化的文本。我们甚至可以添加一个<li>仅仅用于prototype。当Thymeleaf执行页面时将会被删掉。改变页面风格（Let’s change the page style）
假象我们写完了页面，但是我们突然想改变一下按钮周围的颜色：从绿色改为淡蓝色。我们不确定那种蓝色更加合适，因此我们需要多次尝试不同的颜色组合。
下面看一下采用JSP和Thymeleaf的实现方式：
采用JSP修改页面风格（Changing the page style using JSP）
第1步：将应用程序部署到开发服务器上，并启动服务器。如果服务器不启动，JSP页面不会渲染，因此这一步是必须的。
第2步：导航到需要修改的页面。通常情况下，需要修改的页面是该应用程序的所有页面中某一个，很有可能需要点击多个链接、提交多个表单、查询多次数据库后才能跳转到这个页面。
第3步：打开firebug、dragonfly或其他嵌入浏览器的web开发工具。通过这些工具我们可以修改页面风格，并直接作用到浏览器的DOM上，并显示给我们。
第4步：修改颜色。尝试多种颜色组合后，确定最合适的颜色。
第5步：复制修改过的代码，并粘贴到对应的CSS文件中。
完成！
采用Thymeleaf修改页面风格（Changing the page style using Thymeleaf）
第1步：双击.html模板文件，在浏览器中打开它。由于是Thymeleaf模板，它将会正常显示，采用模板/原型（template/prototype）数据（注意订阅类型选项）：
唯有斯人面上簌簌流下的，是点点无声无行的热泪。
