在Spring Boot中集成Thymeleaf模板引擎
2018-03-26 15:38
801 查看
一、Thymeleaf 模板介绍
Spring Boot 推荐使用Thymeleaf 来代替传统开发中的JSP,那么什么是Thymeleaf 模板引擎呢?下面就来简单的介绍一下。Thymeleaf 官方地址链接:https://www.thymeleaf.org/
1.1什么是Thymeleaf
Thymeleaf 是一款用于渲染XML/XHTML/HTML5 内容的模板引擎。类似JSP,Velocity,FreeMaker 等,它也可以轻易的与Spring MVC 等Web 框架进行集成作为Web 应用的模板引擎。1.2为什么要使用Thymeleaf
以往我们使用JSP 页面开发的时候,需要开启服务器才能在浏览器访问到对应的视图资源,Thymeleaf 能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用,原因是Thymeleaf 支持HTML 原型开发,也就是说Thymeleaf 在前后端分离上做的更好,这也是Thymeleaf 最大的一个特点。Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
1.3Thymeleaf 常用的语法规则
我们在进行后端开发的时候,之所以会选择JSP,是因为JSP 中提供了很多实用的标签,比如判断、取值、遍历等。作为Spring Boot 推荐使用的Thymeleaf 当然也提供了很多实用的标签。变量
<!-- ${today} 中的值,会覆盖标签中的值 --> <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> <!-- 相对路径 @{...}表达式中可以通过{orderId}访问Context中的orderId变量 --> <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
二、在Spring Boot 中使用Thymeleaf
Thymeleaf 在Spring Boot 中的使用规则Spring Boot 实现自动配置的时候已经对Thymeleaf 进行了支持,关于其中的一些规则,我们可以在
ThymeleafProperties中进行查看,如下:
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> <!-- 引入thymeleaf 的名称空间 --> <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>
在浏览器进行测试
通过上面的结果我们可以看出
${username}中的值覆盖了原来的值,进行数据展示的页面不再是JSP而是HTML,所以在不启动服务器的情况下页面也是可以进行访问的,在服务器启动情况下完成页面渲染,更好的支持前后端分离,因此Thymeleaf 完全是可以代替JSP 的。
三、总结
这篇博文简单的写了一些关于Thymeleaf 模板引擎相关的知识,如果想要了解更多关于Thymeleaf 模板引擎方面的知识,可以在官方文档中深入了解。希望本篇博文能够为你提供一些帮助。参考资料:
https://www.tianmaying.com/tutorial/using-thymeleaf
https://zhuanlan.zhihu.com/p/24965387?refer=dreawer
相关文章推荐
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- JavaEE开发之SpringBoot整合MyBatis以及Thymeleaf模板引擎
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- SpringBoot-07引擎模板thymeleaf和freemarker的使用
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- springboot 使用 thymeleaf 模板引擎。在页面写隐藏域接收后台的值。在页面进行对话框提示。
- 在Spring Boot中使用Thymeleaf模板引擎
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- spring-boot配置html模板引擎freemarker、thymeleaf
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- Springboot系列:Springboot与Thymeleaf模板引擎整合基础教程(附源码)
- SpringBoot使用thymeleaf模板引擎