thymeleaf模板引擎
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">
© 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">
©
</footer>
我们通过th:include 和 th:replace来加载模板
<body>
<div th:include="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
</body>
返回的HTML如下:
<body>
<div> © </div>
<footer>© </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中模板的一些用法,各位看官请点赞。
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模板引擎的更多相关文章
- (二)SpringBoot基础篇- 静态资源的访问及Thymeleaf模板引擎的使用
一.描述 在应用系统开发的过程中,不可避免的需要使用静态资源(浏览器看的懂,他可以有变量,例:HTML页面,css样式文件,文本,属性文件,图片等): 并且SpringBoot内置了Thymeleaf ...
- 【Springboot】Springboot整合Thymeleaf模板引擎
Thymeleaf Thymeleaf是跟Velocity.FreeMarker类似的模板引擎,它可以完全替代JSP,相较与其他的模板引擎,它主要有以下几个特点: 1. Thymeleaf在有网络和无 ...
- 三、thymeleaf模板引擎构建前台html, 后台使用 ModelAndView 和 Model 模型
项目源码:https://github.com/y369q369/springBoot.git -> thymeleaf 私聊QQ: 1486866853 1.pom.xml中 ...
- SpringBoot使用thymeleaf模板引擎
(1).添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...
- Spring Boot 2.0 整合Thymeleaf 模板引擎
本节将和大家一起实战Spring Boot 2.0 和thymeleaf 模板引擎 1. 创建项目 2. 使用Spring Initlizr 快速创建Spring Boot 应用程序 3. 填写项目配 ...
- Thymeleaf模板引擎的初步使用
在springboot中,推荐使用的模板引擎是Thymeleaf模板引擎,它提供了完美的Spring MVC的支持.下面就简单的介绍一下Thymeleaf模板引擎的使用. 在controller层中, ...
- spring boot: thymeleaf模板引擎使用
spring boot: thymeleaf模板引擎使用 在pom.xml加入thymeleaf模板依赖 <!-- 添加thymeleaf的依赖 --> <dependency> ...
- SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染
在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...
- (二)SpringBoot2.0基础篇- 静态资源的访问及Thymeleaf模板引擎的使用
一.描述 在应用系统开发的过程中,不可避免的需要使用静态资源(浏览器看的懂,他可以有变量,例:HTML页面,css样式文件,文本,属性文件,图片等): 并且SpringBoot内置了Thymeleaf ...
随机推荐
- 怎样改动SharePoint管理中心的语言
在安装了语言包之后,创建站点集的时候,就能够选择语言了. 可是SharePoint管理中心的语言没有变.这个时候.怎么才干让管理中心也使用新的语言呢? 能够依照下面方法. 首先去https://msd ...
- 初识FASTBuild 一个大幅提升C/C++项目编译速度的分布式编译工具
FASTBuild 是一款高性能.开源的构建系统,支持高度可扩展的编译,缓存和网络分发. 以上是FASTBuild官网对其产品的一句话介绍. FASTBuild 的开源地址:https://githu ...
- Django——QuerySets酷毙了!
Django的QuerySets酷毙了! 在本文中我将解释一下QuerySets是什么,它是如何工作的(如果你对它已经熟悉了,你可以直接跳到第二部分),我认为如果可以的话你应该总是返回QuerySet ...
- Odoo8.0中允许用户动态调整TreeView栏位宽度
现有的Odoo8.0中TreeView的栏位宽度是固定的,不可以手动调整,通过安装第三方插件后,可以实现手工动态调整. 下载模块安装即可.http://download.csdn.net/detail ...
- Yii2.0 下使用 composer 安装七牛
最近在捣鼓一个网站,要上传图片,于是选择了七牛.由于Yii2.0框架本身并不具有七牛用来上传图片的接口,只能自己动手给Yii2.0框架安装七牛了. 首先在根目录下的 composer.json 进行配 ...
- mysql无法启动ERROR! MySQL is running but PID file could not be found ?
转载于:http://blog.csdn.net/wuzhilon88/article/details/17616635 第一种方法:可能是硬盘满了,清理下垃圾文件. 第二种: 查看下数据库运行状态 ...
- asp.net web系统开发浏览器和前端工具
1. Firefox浏览器+firebug插件 下载安装Firefox浏览器后,在菜单-附加组件-扩展中,搜索firebug,下载长得像甲虫一样的安装. 在web调试中,直接点击右上角的虫子,即可调出 ...
- #1214 - The used table type doesn't support FULLTEXT indexes解决办法
#1214 - The used table type doesn't support FULLTEXT indexes报此错误的原因是:InnoDB不支持FULLTEXT类型的索引. 网上的解决办法 ...
- Event 带参
var handler={ message:"Event handled.", handlerFun:function(){ alert(this.message) } }; // ...
- Atitit.互联网 软件编程 数据库方面 架构 大牛 牛人 attilax总结
Atitit.互联网 软件编程 数据库方面 架构 大牛 牛人 attilax总结 Coolshell 称号.理论与c++ 阮一峰:: 理论高手与js高手 王银:理论高手 赵劼,网名老赵,c#高手 与理 ...