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. HTTP——代理协议 HTTP/1.1的CONNECT方法

    我们平时使用HTTP协议无非就是GET.POST这些方法,但是HTTP的内容远不止那些.今天就来说说HTTP代理使用的CONNECT.这个不是在网页开发上用的,如果没兴趣就跳过吧. APACHE只是作 ...

  2. Asp.Net WebApi服务端解决跨域方案

    1.特性方式 主要是继承ActionFilterAttribute,重写OnActionExecuted方法,在action执行后,给响应头加上一个键值对. using System.Web.Http ...

  3. Telerik UI for ASP.NET Core概要

    介绍:不介绍了,刚开始研究. 下载:CSDN或者51cto上都有最新的开发版 安装:默认的安装目录是C:\Program Files (x86)\Progress\Telerik UI for ASP ...

  4. linux 自启动

    使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下:chkconfig --list可能输出如下:openvpn 0:关闭 1:开启 ...... 6:关闭 ...

  5. sublime text3 修改左边栏背景颜色为编辑栏颜色

    用Package Control安装Theme-Afterglow插件: Ctrl+Shift+P -> install ,如图 点击Install Package,在弹出框中输入Theme-A ...

  6. Strategy模式

    Strategy模式 Strategy模式要解决的问题和Template模式类似.都是为了把算法的声明和算法的实现解耦.Template模式是通过继承来实现的,而Strategy模式是通过组合来实现的 ...

  7. 680. Valid Palindrome II【easy】

    680. Valid Palindrome II[easy] Given a non-empty string s, you may delete at most one character. Jud ...

  8. boost中全局命名锁的使用

    使用头文件相对位置为:boost/interprocess/sync/named_mutex.hpp 在程序中使用 boost::interprocess::named_mutex g_namedmu ...

  9. BootstrapValidator 解决多属性被同时校验问题《转》

    问题描述:在使用bootstrapValidator插件校验表单属性,当表单属性过多需要每行并列多个属性 ,会出现校验第一个属性,发现整行被校验的效果 ,这不是我们工作想要的效果.如图: 问题分析:因 ...

  10. PHP基础之Autoload

    PHP的自动加载autoload机制很重要,这里做2个小练习 原创文章,转载请注明:http://www.cnblogs.com/phpgcs 文件结构如下,2种方式实现自动加载 1,自定义函数 2, ...