Spring Boot集成Thymeleaf模板引擎

2022-05-27 23:19 133阅读 0赞

### 一、Thymeleaf 模板介绍 ###

Spring Boot 推荐使用Thymeleaf 来代替传统开发中的JSP，那么什么是Thymeleaf 模板引擎呢？下面就来简单的介绍一下。

Thymeleaf 官方地址链接：[https://www.thymeleaf.org/][https_www.thymeleaf.org]

#### 1.1什么是Thymeleaf ####

Thymeleaf 是一款用于渲染XML/XHTML/HTML5 内容的模板引擎。类似JSP，Velocity，FreeMaker 等，它也可以轻易的与Spring MVC 等Web 框架进行集成作为Web 应用的模板引擎。  
![这里写图片描述][70]

#### 1.2为什么要使用Thymeleaf ####

以往我们使用JSP 页面开发的时候，需要开启服务器才能在浏览器访问到对应的视图资源，Thymeleaf 能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用，原因是Thymeleaf 支持HTML 原型开发，也就是说Thymeleaf 在前后端分离上做的更好，这也是Thymeleaf 最大的一个特点。

Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

#### 1.3Thymeleaf 常用的语法规则 ####

我们在进行后端开发的时候，之所以会选择JSP，是因为JSP 中提供了很多实用的标签，比如判断、取值、遍历等。作为Spring Boot 推荐使用的Thymeleaf 当然也提供了很多实用的标签。

##### 变量 #####

<p>Today is: <span th:text="${today}">这里显示日期</span>.</p>

假设`today` 的值为`2018年3月36日`，那么渲染结果为：`<p>Today is: 2018年3月36日.</p>`。可见Thymeleaf 的基本变量和JSP 一样，都使用`${.}`表示获取变量的值。

##### URL #####

<a th:href="@{http://www.thymeleaf.org}">Thymeleaf</a>
    
    <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

URL 在Web 应用模板中占据着十分重要的地位，需要特别注意的是Thymeleaf 对于URL 的处理是通过语法`@{...}` 来处理的。Thymeleaf支持绝对路径URL 也支持相对路径的URL。

##### 循环 #####

<table>
          <tr>
            <th>NAME</th>
            <th>PRICE</th>
            <th>IN STOCK</th>
          </tr>
          <tr th:each="prod : ${prods}">
            <td th:text="${prod.name}">Onions</td>
            <td th:text="${prod.price}">2.41</td>
            <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
          </tr>
        </table>

可以看到，需要在被循环渲染的元素（这里是）中加入`th:each`标签，其中`th:each="prod : ${prods}"`意味着对集合变量`prods`进行遍历，将当前集合中的值赋给`prod`。

##### 判断 #####

<a th:if="${myself=='yes'}" > Hi </a>
    <a th:unless=${session.user != null} th:href="@{/login}" >Login</a>

Thymeleaf 中使用`th:if`和`th:unless`属性进行条件判断，上面的例子中，`<a>`标签只有在`th:if`中条件成立时才显示。`th:unless`于`th:if`恰好相反，只有表达式中的条件不成立，才会显示其内容。

##### PS #####

上面主要介绍一些比较常用的标签，想要学习更多的标签，可以去查看对应的官方文档。

Thymeleaf3.0 官方使用手册链接：[https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html][https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.html]

### 二、在Spring Boot 中使用Thymeleaf ###

##### Thymeleaf 在Spring Boot 中的使用规则 #####

Spring Boot 实现自动配置的时候已经对Thymeleaf 进行了支持，关于其中的一些规则，我们可以在`ThymeleafProperties`中进行查看，如下：

![这里写图片描述][70 1]

`ThymeleafProperties`类中已经对Thymeleaf 进行了前缀与后缀设置，所以我们只要在`classpath:/templates/`目录下创建`×××.html`，Thymeleaf 就可以帮我们渲染页面了。

##### 在Spring Boot 引入Thymeleaf 的starter #####

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>

##### 编写控制器代码 #####

@RequestMapping("/hello")
        public String thymeleafTest(Map<String, String> map){
            map.put("username", "Jas");
            return "index";
        }

##### 在`classpath:/templates/`下新建`index.html` #####

<!DOCTYPE html>
    
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h2>Hello <span th:text="${username}">这里用于显示用户名</span></h2>
    </body>
    </html>

##### 在浏览器进行测试   ![这里写图片描述][70 2] #####

通过上面的结果我们可以看出`${username}`中的值覆盖了原来的值，进行数据展示的页面不再是JSP而是HTML，所以在不启动服务器的情况下页面也是可以进行访问的，在服务器启动情况下完成页面渲染，更好的支持前后端分离，因此Thymeleaf 完全是可以代替JSP 的。

### 三、总结 ###

这篇博文简单的写了一些关于Thymeleaf 模板引擎相关的知识，如果想要了解更多关于Thymeleaf 模板引擎方面的知识，可以在官方文档中深入了解。希望本篇博文能够为你提供一些帮助。

参考资料：  
[https://www.tianmaying.com/tutorial/using-thymeleaf][https_www.tianmaying.com_tutorial_using-thymeleaf]  
[https://zhuanlan.zhihu.com/p/24965387?refer=dreawer][https_zhuanlan.zhihu.com_p_24965387_refer_dreawer]

[https_www.thymeleaf.org]: https://www.thymeleaf.org/
[70]: /images/20220528/41859c3d3c2a4740bfd5f6d7faaf662a.png
[https_www.thymeleaf.org_doc_tutorials_3.0_usingthymeleaf.html]: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
[70 1]: /images/20220528/9e484e0651d548ff9f00f94ec5114497.png
[70 2]: /images/20220528/5badc6ae58ef4f14b1b427e2fcdabcaa.png
[https_www.tianmaying.com_tutorial_using-thymeleaf]: https://www.tianmaying.com/tutorial/using-thymeleaf
[https_zhuanlan.zhihu.com_p_24965387_refer_dreawer]: https://zhuanlan.zhihu.com/p/24965387?refer=dreawer