显示目录

Thymeleaf 集成

有了 Freemarker,Velocity 等模版后,为什么要选择 Thymeleaf?

  • Freemarker 的模版还是有一些非 HTML 的标签在里面,对于前端来说需要学习相关语法
  • Velocity 虽然也很好,但是已经很久不更新了,Spring 5 已经官方宣布不支持 Velocity 了
  • Thymeleaf 的语法就是 HTML 的语法,动态内容部分使用 HTML 的属性来实现,属性部分不会影响 HTML 的设计,前后端可以很好的分离

Gradle 依赖

1
2
compile ('org.thymeleaf:thymeleaf:3.0.7.RELEASE')
compile ('org.thymeleaf:thymeleaf-spring4:3.0.7.RELEASE')

spring-mvc.xml 里添加 Thymeleaf 的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 使用 thymeleaf 模版 -->
<bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
<property name="prefix" value="/WEB-INF/view/" />
<property name="templateMode" value="HTML5" />
<property name="cacheable" value="false" /> <!-- cacheable 线上环境用 true,开发环境用 false -->
</bean>
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver" />
</bean>
<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine" />
<property name="characterEncoding" value="UTF-8" /> <!--解决中文乱码-->
</bean>

模版中使用 Model 的数据

1
2
3
4
5
6
7
8
9
10
11
<body>
<span th:text="'Welcome ' + ${name}">默认值</span>
<span th:text="|Welcome ${name}|">默认值</span>
<ul>
<li th:each="animal : ${animals}" th:text="${animal}">小动物 - 此处文本会被覆盖</li>
</ul>
<a th:href="@{/login}" th:if="${session.user == null}">Login</a>
<a th:href="@{/logout}" th:if="${session.user != null}">Logout</a>
</body>
1
2
3
4
5
6
7
8
9
10
11
@GetMapping("/leaf")
public String hello(ModelMap model) {
List<String> animals = new LinkedList<>();
animals.add("Tiger");
animals.add("Cat");
animals.add("Lion");
model.put("animals", animals);
model.put("name", "道格拉斯·狗");
return "leaf.html";
}