1.Thmeleaf的基本语法

大部分的Thmeleaf表达式都直接被设置到HTML节点中,作为HTML节点的一个属性存在,这样同一个模板文件既可以使用浏览器直接打开,也可以放到服务器中用来显示数据,并且在样式上基本不会存在差异。

2.Thmeleaf支持的模板类型

2.1 HTML模板

<input type="text" th:value="angus">

上面这种情况,HTML模式并不会抛出异常,因为Thmeleaf并不会进行严格的认证,但对一些明显的格式错误会抛出异常。如:

<input type="text" th:value="angus"

2.2 XML模板

Thmeleaf在处理xml时只会对文档进行形式上的检查,而不会进行实质型的检查。如xml文件中的节点没有关闭。

2.3 Thmeleaf API

  <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.3.1 处理HTML

按照一定的语法规则将逻辑写入HTML页面,然后再把这些"加工"过的HTML字符串交给thmeleaf去处理,Thmeleaf处理器会处理他们,最后输出真正的,被渲染的html.

2.3.2 变量处理

<input type="text" th:value="${data.name"} />

上面的模板中,th:value属性来展示data对象的name属性。

2.3.3 遍历集合

<table>
<tr th:each="data:${datas}">
<td th:text="${data.name}">Angus</td>
</tr>
</table>

使用th:each属性进行数据遍历,节点变量为data,在td中使用td:text将data的name属性进行输出

3.配置Thmeleaf

在配置文件application.properties文件中配置Thmeleaf

spring.thmeleaf.mode=HTML #模板模式,默认为html5
spring.thmeleaf.prefix=classpath:/templates/ #模板前缀,默认为classpath:/templates/
spring.thmeleaf.suffix=.html #模板后缀
spring.thmeleaf.cache:true #是否打开模板配置,默认为true
spring.thmeleaf.check-template;true #是否处理模板前检查其是否存在,默认为true
spring.thmeleaf.check-template-location:true #是否检查模板位置,默认为true.
spring.thmeleaf.content-type:text/html #默认的content-type值
spring.thmeleaf.enabled:true #是否开启视图解析,默认为true

4.静态资源处理

4.1 引入css

<link rel="stylesheet" type="text/css" th:href="@{/common.css}" /> 

默认位置是/static/

4.2 引入javascript

<script type="text/javascript" src="../js/test.js th:src="@{/js/test.js}"

5.文本处理

在thmeleaf中,外部的文本片段通常被称为message,通常保存在properties文件里面,因此每一个文本信息都有一个key作为标识。

<span th:text="#{page.myText}">This is propertype text.<span>

在配置文件中是如下内容

page.myText=This is config text

获取变量中的属性:

<span th:text="${user[‘parent']['age']}"></span>

获取List中的第一个元素

<span th:text="${users[0].name}'></span>

获取Map中的元素:

<span th:text="${userMap['key1'].name"></span>

获取数组中的元素

<span th:text="${userArr[1].name}"></span>

链接表达式

Thmeleaf的链接表达式

@{......}
<a href="view.html" th:href="@{/user/details(id=${user.id},name=${user.name})}" th:text="${user.name}"></a>
<a href="view.html" th:href="@{/user/{userId}" th:text="${user.name}"></a>

5.themeleaf的内置对象

5.1 #ctx :表示模板引擎上下文对象

5.2 #vars 模板引擎上下文对象

5.3 #locale 在全局上下文中维护的java.util.Locale对象

5.4 #request 表示HttpServletRequest对象

<span th:text="${#request.getAttribute('name')}"></span>
<span th:text="${#session.getAttribute('name2')}"></span>
<span th:text="${#servletContext.getAttribute('name3')}"></span>

5.5 #response 表示HttpServletResponse对象

5.6 #session 表示HttpSession对象

5.7 #servletContext 表示ServletContext对象

6.Themeleaf的内置变量

1.session #session属性

2.param #访问请求参数

3.application

<span th:text="${session.sesData}"></span>
<span th:text="${param.userName"></span>
<span th:text="${reqData}"></span> //request所有属性,都可以直接使用${myAttribute}来访问

7.数字对象

1.整数格式化

formatInteger(num,digits):第一个参数是处理的整数,第二个参数用于设置最少的整数位数。

arrayFormatInteger(num,digits)

listFormatInteger(number,digits)

setFormatInteger(numbers,digits)

8.字符串对象

在模板中使用#strings表示org.thmeleaf.expression.String对象。

<div th:text="#strings.toString(user)"></div>
<div th:text="#strings.length(user)"></div>

非空判断与默认值处理

#strings提供了isEmpty与defaultString方法,用来字符串的非空判断与默认值处理

包含判断

<div th:text="${#strings.inexOf('abcde','z')}"></div>
<div th:text="${#string.substring('abcde',1,3)}"></div>
<div th:text="${#string.substringAfter('abcde','a')}"></div>
<div th:text="${#string.substringBefore('abcde','c')}"></div>
<div th:text="${#string.replace('abcde','c','1')}"></div>

9.日期对象

使用#datas或者#calendars这两个日期对象来处理日期

format(Date date)

formatISO(Date date)

formatISO(Date date,String pattern)

<div th:text="${#datas.format(date)}"></div>
<div th:text="${#datas.formatISO(date)}"></div>
<div th:text="${#datas.format(date,'yyyy-MM-dd HH:mm:ss)}"></div>

  

1.Thmeleaf模板引擎的更多相关文章

  1. Thymeleaf 模板引擎简介

    目录 Thymeleaf 模板引擎 官方文档下载 Hello World 新建应用 后台控制器 前端页面 浏览器访问测试 Thymeleaf 模板引擎1.Thymeleaf 是 Web 和独立环境的现 ...

  2. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. Handlebars 模板引擎之前后端用法

    前言 不知不觉间,居然已经这么久没有写博客了,坚持还真是世界上最难的事情啊. 不过我最近也没闲着,辞工换工.恋爱失恋.深圳北京都经历了一番,这有起有落的生活实在是太刺激了,就如拿着两把菜刀剁洋葱一样, ...

  4. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  5. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  6. DotLiquid模板引擎简介

    DotLiquid是一个在.Net Framework上运行的模板引擎,采用Ruby的Liquid语法,这个语法广泛的用在Ruby on rails和Django等网页框架中. DotLiquid相比 ...

  7. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  8. 浅谈 Web 中前后端模板引擎的使用

    前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此 ...

  9. JavaScript模板引擎artTemplate.js——结语

    再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是 ...

随机推荐

  1. 开发中常见的@NotNull,@NotBlank,@NotEmpty注解的区别

    开发中常看见@NotNull,@NotBlank,@NotEmpty三个注解,但却没有深入了解过,下面介绍一下他们的应用场景和区别 @NotNull:主要用在基本数据类型上(Int,Integer,D ...

  2. 在同级路径下,SpringBoot两种类型的配置文件(.properties/.yml)同时存在时,配置优先级如何处理?

    两类配置文件如果同时存在,若 key 相同则 properties 优先级高,若key不同则合并加载:

  3. ubuntu更換清華軟件源

    打开软件源的编辑sudo gedit /etc/apt/sources.list 软件源: Ubuntu--更改国内镜像源(阿里.网易.清华.中科大) 打開軟件源文件進行修改: 使用 sudo vim ...

  4. [atARC068F]Solitaire

    对于最终的序列$a_{i}$,条件如下: 1.$a_{i}$是一个排列,且$a_{k}=1$ 2.不存在三元组$1\le x<y<z<k$,使得$a_{x}<a_{y}< ...

  5. [cf997E]Good Subsegments

    一个区间为好区间当且仅当$\max_{l\le i\le r}a_{i}-\min_{l\le i\le r}a_{i}=r-l$,考虑固定右端点$r$,维护所有左端点$l$的上述式子左-右的值,那么 ...

  6. Java-ASM框架学习-java概念转字节码概念

    前言 当我们操作字节码的时候,都是和字节码的概念打交道,这让我们很困扰,asm也想到了这点,为了方便,它提供了一个可以把java概念转化为字节码概念的类 import org.objectweb.as ...

  7. 【k8s】在AWS EKS部署并通过ALB访问k8s Dashboard保姆级教程

    本教程适用范围 在AWS上使用EKS服务部署k8s Dashboard,并通过ALB访问 EKS集群计算节点采用托管EC2,并使用启动模板. 使用AWS海外账号,us-west-2区域 使用账号默认v ...

  8. UI自动化测试:App的WebView页面中,当搜索栏无搜索按钮时处理方法

    一.遇到的问题 在做移动端的UI自动化测试时,经常会遇到上图所示的搜索框,这里有个麻烦就是搜索框没有"搜索"按钮,UI自动化测试时不能确认搜索. 要解决这个问题,我们可以通过 dr ...

  9. 从零开始学Kotlin第五课

    函数式编程入门: package EL fun main(args: Array<String>) { var names= listOf<String>("tom& ...

  10. [源码解析] PyTorch 分布式(13) ----- DistributedDataParallel 之 反向传播

    [源码解析] PyTorch 分布式(13) ----- DistributedDataParallel 之 反向传播 目录 [源码解析] PyTorch 分布式(13) ----- Distribu ...