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. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-可以用软件自带NC工具驱动但是程序无法让电机转动怎么办

    新建一个项目,当扫描的时候务必勾选YES,使用网上最新的XML文件   如果不使用,则有些设备可能被扫描出来是无效的(图标不正常)   如果完全删除XML描述文件,可能也能扫描出来,而且可以用Twin ...

  2. leetcode268:Missing Number

    描写叙述 Given an array containing n distinct numbers taken from 0, 1, 2, -, n, find the one that is mis ...

  3. 网络编程——The C10K Problem(C10K = connection 10 kilo 问题)。k 表示 kilo,即 1000

    The C10K problem翻译 (C10K = connection 10 kilo 问题).k 表示 kilo,即 1000 比如:kilometer(千米), kilogram(千克). 如 ...

  4. Odoo8模块中增加延时自动消失的提示

    在odoo中,如果必要栏位没有值,在保存时右上角会有如下图的提示,该提示会延时并自动关闭. 有网友问如何在自己的模块中增加这样的提示,以方便用户在操作时,能提示一些必要的信息.下面例出大致的步骤以供参 ...

  5. cocos2d-x 3.1.1 学习笔记[11] http请求 + json解析

    //http须要引入的头文件和命名空间 #include <network/HttpClient.h> using namespace network; //json须要引入的头文件 #i ...

  6. 页面找不到js方法的原因,关于EasyUI

    有时EasyUI中datagride写法不正确,会导致无法加载页面上其他的js方法.datagride中的逗号是一个也不能多.一定要注意: 例如以下代码中标红的逗号就会导致后边的js不能正常加载. c ...

  7. iOS活体人脸识别的Demo和一些思路

    代码地址如下:http://www.demodashi.com/demo/12011.html 之前公司项目需要,研究了一下人脸识别和活体识别,并运用免费的讯飞人脸识别,在其基础上做了二次开发,添加了 ...

  8. SVN环境搭建(2)

    原文地址:http://www.penglig.com/post-73.html TortoiseSVN的使用. 首先打开VisualSVN Server Manager,如图: 可以在窗口的右边看到 ...

  9. 使用maven结合requirejs管理前端脚本

    已有的web项目,一直使用Maven做工程管理,现阶段前端调整为使用requirejs来负责模块加载依赖,同时使用jasmine来完成前端的UT. 便与在maven下统一管理,简单整理了下合在一起的使 ...

  10. 92. Reverse Linked List II【Medium】

    92. Reverse Linked List II[Medium] Reverse a linked list from position m to n. Do it in-place and in ...