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. Java8 新的日期和时间API(笔记)

    LocalDate LocalTime Instant duration以及Period 使用LocalDate和LocalTime //2017-03-20 LocalDate date = Loc ...

  2. ssh之<context:component-scan base-package="com.xx" />

    <context:component-scan/> 配置项不但启用了对类包进行扫描以实施注释驱动 Bean 定义的功能, 同时还启用了注释驱动自动注入的功能 ( 即还隐式地在内部注册了 A ...

  3. Unity 配置静态excel 工作流程

    TP:FCEE652B cause how improvement cause 在游戏开发的过程中,很多时候需要策划填的一些静态数据表(比如英雄表,技能表等等),而策划一般都习惯使用excel. ex ...

  4. ColorSchemer Studio 2 破解

    软件介绍: ColorSchemer Studio 2 is a professional color matching application for anyone from hobbyists t ...

  5. lodash 工具库

    lodash是一套工具库,内部封装了很多字符串.数组.对象等常见数据类型的处理函数. 1.lodash的引用 import _ from 'lodash' 用一个数组遍历来说明为什么要使用lodash ...

  6. EF实体查询出的数据List<T>转DataTable出现【DataSet 不支持 System.Nullable<>】的问题

    public static DataTable ToDataTable<T>(this IEnumerable<T> varlist, CreateRowDelegate< ...

  7. Mac和Windows上Android Studio经常使用的快捷键

    小编整理了一些Mac和Windows上超有用的Android Studio经常使用的快捷键. Ctrl(Command)+Y 删除行 Ctrl(Command)+Z 倒退 Ctrl(Command)+ ...

  8. json.Decoder vs json.Unmarshal

    128down voteaccepted It really depends on what your input is. If you look at the implementation of t ...

  9. window安装rabbitmq

    Rabbit MQ 是建立在强大的Erlang OTP平台上,因此安装Rabbit MQ的前提是安装Erlang.通过下面两个连接可以下载安装最新的版本: 下载并安装Eralng OTP For Wi ...

  10. Failed to import package with error: Couldn't decompress package

    解压unitypackage的时候出错.原因是路径中包括中文字符,更改成英文路径就可以. 參考 Error while importing package: Couldn't decompress p ...