Spring MVC 视图技术（下）

1. 前言

本章节将向大家讲解 Thymeleaf 视图技术。 Thymeleaf 和 Spring MVC 或 Spring Boot 有着较完美的契合度，是 Spring 官方建议的首选视图技术。

通过本节章节，你将学习到：

Spring MVC 中如何使用 Thymeleaf 。这是本章节的重点也是难点；
Thymeleaf 的特点；

2. Spring MVC 和 Thymeleaf

本章节继续和大家一起讲解 Spring MVC 支持的视图技术。其实除了有服务器端的视图技术，还有客户端的视图技术。区别在于，服务器端视图技术的模板引擎采用服务器端语言，客户端的视图技术采用客户端语言。

两者各有优势。主流开发模式更偏向于客户端的视图技术。在客户端对页面进行渲染，有效地减少了对服务器端的依赖，可以降低服务器端的承受压力。

这并不是绝对的，最后的选择还是要根据项目的运行场景做决定。

在 Spring MVC 项目中使用 Thymeleaf ，配置过程并不复杂。跟着流程走，你将体验到 Thymeleaf 的魅力。

视图技术至少需要提供模板和模板引擎， Thymeleaf 也不例外。如果要在 Spring MVC 中使用 Thymeleaf ，需要告诉 Spring MVC 模板存放在哪里？模板引擎是谁？

Tips： 本章节使用纯 JAVA 方法进行配置。

2.1 配置流程

打开项目中的 pom.xml 文件，添加项目对 Thymeleaf 包的依赖；

org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE
打开项目中的 WebConfig 配置类。在类中添加一个 ApplicationContext 类型的属性。并让 Spring 自动注入进来；

@Autowired private ApplicationContext applicationContext;

Tips： Thymeleaf 相关组件需要依赖上下文容器对象。

在 WebConfig 配置类中配置 Thymeleaf 模板组件信息，并指定模板文件存放位置；

@Bean public SpringResourceTemplateResolver templateResolver() { SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver(); templateResolver.setApplicationContext(this.applicationContext); templateResolver.setPrefix("/WEB-INF/templates/"); templateResolver.setSuffix(".html"); templateResolver.setTemplateMode(TemplateMode.HTML); templateResolver.setCacheable(true); //templateResolver.setOrder(1); return templateResolver; }

Tips： Spring MVC 项目中可以使用多视图技术。可以使用模板对象的 setOrder ( ) 指定查找顺序。本章节主要讲解 Thymeleaf 视图技术。

所以，请大家注释掉配置过的其它视图技术的相关信息。

在 WebConfig 配置类中指定模板引擎对象；

先配置 SpringTemplateEngine 组件： 从字面上很好理解，模板引擎组件。

@Bean
public SpringTemplateEngine templateEngine() {
   SpringTemplateEngine templateEngine = new SpringTemplateEngine();
   templateEngine.setTemplateResolver(templateResolver());
   templateEngine.setEnableSpringELCompiler(true);
   return templateEngine;
}

Tips： 这里有组件与组件的依赖关系。

配置 ThymeleafViewResolver 组件： 视图解析组件，依赖于模板引擎，模板引擎依赖模板资源。

@Bean
public ViewResolver viewResolver(SpringTemplateEngine templateEngine) {
    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(templateEngine);
    viewResolver.setCharacterEncoding("UTF-8");
    return viewResolver;
}

经过上述配置后， Spring MVC 就具有了对 Thymeleaf 的支持。

图片描述

2.2 测试流程

在项目的 WEB-INF 目录下新建 templates 目录，并在此目录下新建名为 hello.html 的文件。

Tips： hello.html 虽然扩展名是 html。其实是遵循 Thymeleaf 模板语法规范的模板文件。本课程主要讲解在 Spring MVC 中如何使用 Thymeleaf , 会讲解一点 Thymeleaf 模板语法，但更多的了解需要你移步到 Thymeleaf 的官方网站：https://www.thymeleaf.org/。

hello.html 文件的内容：

<div>
    <table>
        <thead>
            <tr>
                <th>name</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td th:text="${user.userName}"></td>
                <td th:text="${user.userPassword}"></td>
            </tr>
        </tbody>
    </table>
</div>

Tips： hello.html 文件内容和普通的 HTML 页面没有多大的区别，区别于在 HTML 页面标签中使用了 Thymeleaf 提供的一些语法元素，如：th:text 用来动态读取作用域中的数据。

编写控制器；

@Controller @RequestMapping("/thymeleaf") public class ThymeleafAction { @RequestMapping("/hello") public String thymeleaf(ModelMap map) { User user=new User("mk", "123456"); map.addAttribute("user", user); return "hello"; } }
发布项目、启动 tomcat、打开浏览器，在浏览器中输入： http://localhost:8888/sm-demo/thymeleaf/hello。

Tips： 再声明一下，为了让 Thymeleaf 的测试更干净，注释或删除掉原来配置过的视图技术相关信息。

图片描述

Thymeleaf 的语法元素也称其为指令，以 th 开头，如前面用到的 th:text 。

3. Thymeleaf 的特点

Thymeleaf 与其它的视图技术相比较，最大的优点在于动静结合。

何谓动静给合？

Thymeleaf 的模板是纯正的 html 代码。 Thymeleaf 提供的模板语法指令都是以 HTML 标签属性方式嵌入进去的，没有为页面添加额外的元素，页面的整体风格不会被破坏。

当运行在服务器端时，才会由模板引擎解析。如果直接由浏览器打开，浏览器会忽视 Thymeleaf 指令属性，把模板文件当成 HTML 代码，可以直接在浏览器显示。

动静结合的优点：

不影响前后端工程师对页面的设计和调整；
没有在页面中侵入非 HTML 语言代码，保持了原始页面的风格。

除了动静给合，还有一个较大的特点就是与 Spring MVC 或 Spring Boot 完美结合，Spring 提供有对接 Thymeleaf 的接口组件，使用起来方便直接。

正因为 Thymeleaf 的优点，建议作为项目开发中的首选方案。

4. 小结

本节课程和大家一起讲解了 Spring MVC 中如何使用 Thymeleaf 。

使用 Thymeleaf 之前需要做些简单的配置，一定要注意组件之间的依赖关系。本课程并没有深入的讲解 Thymeleaf 的模板语法，但其语法并不复杂。如果你对 Thymeleaf 有兴趣，可以进入官方网站了解更多。