thymeleaf模板引擎

  thymeleaf是现代化服务器端的Java模板引擎,不同于JSP和FreeMarker,Thymeleaf的语法更加接近HTML,并且也有不错的扩展性。详细资料可以浏览官网

本文主要介绍Thymeleaf模板的使用说明。thymeleaf模板等同于freemarker和Velocity。

1、定义和引用模板

  日常开发中,我们经常会将导航栏、页尾、菜单等部分提取成模板供其它页面使用。

在Thymeleaf 中,我们可以使用th:fragment属性来定义一个模板。

我们可以新建一个简单的页尾模板,如:/WEB-INF/templates/footer.html,内容如下:

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copyright">
© xxx
</div>
</body>
</html>

上面定义了一个叫做copyright的片段,接着我们可以使用th:include或者th:replace属性来使用它:

<body>
...
<div th:include="footer :: copyright"></div>
</body>

其中th:include中的参数格式为templatename::[domselector],
其中templatename是模板名(如footer),domselector是可选的dom选择器。如果只写templatename,不写domselector,则会加载整个模板。

当然,这里我们也可以写表达式:

<div th:include="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>

模板片段可以被包含在任意th:*属性中,并且可以使用目标页面中的上下文变量。

2、不通过th:fragment引用模板

通过强大的dom选择器,我们可以在不添加任何Thymeleaf属性的情况下定义模板:

...
<div id="copy-section">
&copy; xxxxxx
</div>
...

通过dom选择器来加载模板,如id为copy-section

<body>
...
<div th:include="footer :: #copy-section">
</div>
</body>

3、th:include 和 th:replace区别

th:include 是加载模板的内容,而th:replace则会替换当前标签为模板中的标签

例如如下模板:

<footer th:fragment="copy">
&copy;
</footer>

我们通过th:include 和 th:replace来加载模板

<body>
<div th:include="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
</body>

返回的HTML如下:

<body>
<div> &copy; </div>
<footer>&copy; </footer>
</body>

4、模板参数配置

th:fragment定义模板的时候可以定义参数:

<div th:fragment="frag (onevar,twovar)">
<p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>

在 th:include 和 th:replace中我们可以这样传参:

<div th:include="::frag (${value1},${value2})">...</div>
<div th:include="::frag (onevar=${value1},twovar=${value2})">...</div>

此外,定义模板的时候签名也可以不包括参数:<div th:fragment="frag">,我们任然可以通过<div th:include="::frag (onevar=${value1},twovar=${value2})">...</div>这种方式调用模板。

这其实和<div th:include="::frag" th:with="onevar=${value1},twovar=${value2}">起到一样的效果

5、th:assert 断言

我们可以通过th:assert来方便的验证模板参数

<header th:fragment="contentheader(title)" th:assert="${!#strings.isEmpty(title)}">...</header>

6、th:remove 删除代码

假设我们有一个产品列表模板:

<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
<th>COMMENTS</th>
</tr>
<tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
<td>
<span th:text="${#lists.size(prod.comments)}"></span> comment/s
<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:unless="${#lists.isEmpty(prod.comments)}">view</a>
</td>
</tr>
</table>

这时一个很常规的模板,但是,当我们直接在浏览器里面打开它(不(不使用Thymeleaf ),它实在不是一个很好的原型。因为它的表格中只有一行,而我们的原型需要更饱满的表格。

如果我们直接添加了多行,原型是没有问题了,但通过Thymeleaf输出的HTML又包含了这些事例行。

这时通过th:remove属性,可以帮我们解决这个两难的处境。

<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
<th>COMMENTS</th>
</tr>
<tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
<td>
<span th:text="${#lists.size(prod.comments)}"></span> comment/s
<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:unless="${#lists.isEmpty(prod.comments)}">view</a>
</td>
</tr>
<tr class="odd" th:remove="all">
<td>Blue Lettuce</td>
<td>9.55</td>
<td>no</td>
<td>
<span></span> comment/s
</td>
</tr>
<tr th:remove="all">
<td>Mild Cinnamon</td>
<td>1.99</td>
<td>yes</td>
<td>
<span></span> comment/s
<a href="comments.html">view</a>
</td>
</tr>
</table>

其中th:remove的参数有如下几种:

  • all 删除当前标签和其内容和子标签
  • body 不删除当前标签,但是删除其内容和子标签
  • tag 删除当前标签,但不删除子标签
  • all-but-first 删除除第一个子标签外的其他子标签
  • none 啥也不干

当然,我们也可以通过表达式来传参,

<a href="/something" th:remove="${condition}? tag : none">Link text not to be removed</a>

以上为Thymeleaf中模板的一些用法,各位看官请点赞。

 
6、常见的异常:
Whitelabel Error Page

This application has no explicit mapping for /error, so you are seeing this as a fallback.
Tue Jan :: CST
There was an unexpected error (type=Internal Server Error, status=).
An error happened during template parsing (template: "class path resource [templates/index]")

异常原因是:模板路径解析错误

解决办法:添加如下配置

#设置前缀和后缀
spring.thymeleaf.mode=HTML
spring.thymeleaf.suffix=.html
spring.thymeleaf.prefix=classpath:/templates/

thymeleaf模板引擎的更多相关文章

  1. (二)SpringBoot基础篇- 静态资源的访问及Thymeleaf模板引擎的使用

    一.描述 在应用系统开发的过程中,不可避免的需要使用静态资源(浏览器看的懂,他可以有变量,例:HTML页面,css样式文件,文本,属性文件,图片等): 并且SpringBoot内置了Thymeleaf ...

  2. 【Springboot】Springboot整合Thymeleaf模板引擎

    Thymeleaf Thymeleaf是跟Velocity.FreeMarker类似的模板引擎,它可以完全替代JSP,相较与其他的模板引擎,它主要有以下几个特点: 1. Thymeleaf在有网络和无 ...

  3. 三、thymeleaf模板引擎构建前台html, 后台使用 ModelAndView 和 Model 模型

    项目源码:https://github.com/y369q369/springBoot.git      ->     thymeleaf 私聊QQ: 1486866853 1.pom.xml中 ...

  4. SpringBoot使用thymeleaf模板引擎

    (1).添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  5. Spring Boot 2.0 整合Thymeleaf 模板引擎

    本节将和大家一起实战Spring Boot 2.0 和thymeleaf 模板引擎 1. 创建项目 2. 使用Spring Initlizr 快速创建Spring Boot 应用程序 3. 填写项目配 ...

  6. Thymeleaf模板引擎的初步使用

    在springboot中,推荐使用的模板引擎是Thymeleaf模板引擎,它提供了完美的Spring MVC的支持.下面就简单的介绍一下Thymeleaf模板引擎的使用. 在controller层中, ...

  7. spring boot: thymeleaf模板引擎使用

    spring boot: thymeleaf模板引擎使用 在pom.xml加入thymeleaf模板依赖 <!-- 添加thymeleaf的依赖 --> <dependency> ...

  8. SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染

    在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...

  9. (二)SpringBoot2.0基础篇- 静态资源的访问及Thymeleaf模板引擎的使用

    一.描述 在应用系统开发的过程中,不可避免的需要使用静态资源(浏览器看的懂,他可以有变量,例:HTML页面,css样式文件,文本,属性文件,图片等): 并且SpringBoot内置了Thymeleaf ...

随机推荐

  1. B10:迭代器模式 Iterator

    提供了一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象的内部表示. 适用场景:当你需要访问一个聚合对象,而这个对象不论是什么,你都需要遍历的时候,就用迭代器. UML: 示例代码: class ...

  2. POJ1088 动态规划

    题意: id=1088">题目链接 解答: 这个题目和最长子序列什么的极为类似.只是之前都是一维,如今变成二维的了.仅此而已.因此我们能够想办法把它先变成一维的. 先用一个结构体存储这 ...

  3. VirtualBox实现宿主机和虚拟机之间网络的通讯

    摘要:实现宿主机和虚拟机之间网络的通讯 环境: 宿主机操作系统            WindowsXP 虚拟机软件                    VirtualBox 虚拟机操作系统     ...

  4. 区分Activity的四种加载模式

    在多Activity开发中,有可能是自己应用之间的Activity跳转,或者夹带其他应用的可复用Activity.可能会希望跳转到原来某个Activity实例,而不是产生大量重复的Activity. ...

  5. Docker 安装docker-compose多容器管理服务

    原文地址:https://github.com/eacdy/spring-cloud-book/blob/master/3%20%E4%BD%BF%E7%94%A8Docker%E6%9E%84%E5 ...

  6. Ioc(控制反转)、DI(依赖注入)

    一篇非常好的有关控制反转和依赖注入非常不错的文章,简单易通,与大家共同学习,这里只引用了一篇文章,还有很多相关的文章可以通过文章引用地址来看,相信大家看完理解的就比较深刻了 文章摘自:http://j ...

  7. ExtjS学习--------Ext.define定义类

    Ext类Class的配置项:(注:Extjs的 的中文版帮助文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 ExtJS配置文件和演 ...

  8. CSS3 not

    AND (&&): .registration_form_right input:not([type="radio"]):not([type="check ...

  9. Mysql又一次整理笔记--woods备忘

    ==============================SQL备忘 CRUD 查询 多表 事件等=============================== ------------------ ...

  10. java序列化,二进制和数据流

    类的序列化需要支持Serializable接口,如果类支持序列化,可以通过ObjectOutPutStream和ObjectInputStream将对象和Stream之间进行方便的转换. 首先来 看一 ...