学习thymeleaf

识别标准方言

1、<span th:text=".." >    --必须引入命名空间
	<html xmlns:th="http://www.thymeleaf.org" >
2、<span data-th-text=".." >  --省去命名空间

变量表达式

语法 ${...}
<span th:text="${book.author.name}" >

消息表达式

语法 #{...}也称为文本外部化、国际化或i18n
<th th:text="#{header.address.city}">...</th>
<th th:text="#{header.address.country}">...</th>

选择表达式

语法:*{...}
<div th:object="${book}" >
	...
	<span th:text="*{title}" >...</span>   --取的是book的title的属性
	...
</div>
与变量表达式的区别:他们是在当前选择的对象而不是整个上下文变量映射上执行

链接表达式

语法:@{...}
相对的链接  <a th:href="@{../documents/report}" >...</a>
服务器相对的 @{~/contents/main}
协议相对的  @{//static.mycompany.com/res/initial}
绝对的   @{http://www.mycompany.com/main}

分段表达式

语法:th:insert或th:replace
某个页面里定义一个fragment,然后再其他页面引用
定义:
<div th:fragment = "copy">
	&copy;2017<a href="https://waylau.com">waylau.com</a>
</div>

引用:
<div th:insert="~{footer::copy}"></div>

字面量(文字)

文本
<p>
now you are looking at a <span th:text="'working web application'">template file </span>
</p>

## 数字
<span th:text="2013">1492</span>
<span th:text="2013 + 2">1492</span>
```
## 布尔
布尔
<div th:if="${user.isAdmin()}==false">

null

null
<div th:if="${variable.something}==null">...

算数操作

算数操作
+-*/%
<div th:with="isEven=(${prodStat.count}%2==0)">

比较:>、<、>=、<=(gt、lt、ge、le)

比较:>、<、>=、<=(gt、lt、ge、le)
<ul class="pagination" data-th-if="${page.totalPages le 7}">

等价:==、!=(eq、ne)

等价:==、!=(eq、ne)
<option data-th-each ="i : ${#arrays.toIntegerArray({5,10,40,100})}" data-th-value="${i}"
data-th-selected="${i eq page.size}" data-th-text="${i}"></option>

条件运算符

条件运算符
<tr th:class="${row.even}? 'even':'odd'">
...
</tr>

无操作

无操作
<span th:text="${user.name}?:_">no user authenticated</span>

设置属性值

设置属性值
<form action="subscribe.html" th:attr="action=@{/subscribe}">

设置值到指定额属性

设置值到指定额属性
<form action="subscribe.html" th:action="@{/subscribe}" >

固定值布尔属性

固定值布尔属性
<input type="checkbox" name="option2" checked />
<input type="checkbox" name="option2" checked="checked"  />
<input type="checkbox" name="option2" th:checked="${user.active}"  />

基本的迭代th:each

基本的迭代th:each
<li th:each="book:${books}" th:text="${book.title}">en las orillas del sar </li>
状态变量
   index、count、size、current、even/odd、first、last
   <tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'" >
   	<td th:text="${prod.name}">Onions</td>
   </tr>

条件语句th:if、th:unless

条件语句th:if、th:unless
<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:if="${not #lists.isEmpty(prod.comments)}">view</a>


<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:unless="${#lists.isEmpty(prod.comments)}">view</a>

switch

switch
<div th:switch="${user.role}">
	<p th:case="'admin'">User is an administrator</p>
	<p th:case="'#{roles.manager}'">User is a manager</p>
	<p th:case="*">User is a some other thing</p>

模板布局

定义和引用片段
使用th:fragment
定义
<div th:fragment="copy" >
	&copy;2017<a href="https://waylau.com">waylau.com</a>
</div>
引用
<div> th:insert="~{footer ::copy}"></div>
不是用th:fragment
<div id="copy-section" >
	&copy;2017<a href="https://waylau.com">waylau.com</a>
</div>
引用
<div> th:insert="~{footer ::#copy-section}"></div>
th:insert、th:replace、th:include三者区别
th:insert它将简单地插入指定的片段作为正文的主标签
th:replace用指定实际片段来替换其主标签
th:include类似于th:insert,但不是插入片段它只插入次片段的内容

在这里插入图片描述

属性优先级

<ul>
	<li th:each = "item:${items}" th:text="${item.description}">item description here ...</li>
</ul>

注释

解析器级注释快
解析的时候删除<!--/*--> 和   <!--*/-->之间的所有内容
原型注释块
当模板静态打开时,圆形注释快所注释的代码将被注释,二在模板执行是,这些注释的代码就能被显示出来
<!--/*/
	<div th:text="${...}">
	...
	</div>
/*/-->

内联

[[...]]或[(...)]分别对应于th:text和th:utext
<p>the message is   "[(${msg})]" </p>---------><p>the message is<b>great!</b></p>

<p>the message is   "[[${msg}]]" </p>---------><p>the message is&lt;b&gt;great!&lt;/b&gt;</p>

禁用内联
<p th:inline="none">a double array looks like this:[[1,2,3],[4,5]],

javascript 内联
原型
<script th:inline="javascript">
	...
	var username = /*[[${session.user.name}]]*/"gertrud kiwifruit";
	...
</script>
解析
<script th:inline="javascript">
	...
	var username = “Sebastian \"fruity\" applejuice”;
	...
</script>


css内联
classname = 'main elems'
align = 'center'
<style th:inline="css">
	.[[${classname}]]{
		text-align:[[${align}]];
	}
</style>
<style th:inline="css">
	.main\ elems{
		text-align:center;
	}
</style>


表达式的基本对象

#ctx:上下文度下行。
#locale直接访问与java.util .locale向关联的请求

request/session等属性
	param:用于检索请求参数
	session:用于检索session属性
	application:用于检索application/servlet上下文属性
web上下文对象
	#request:直接访问与当前请求关联的
	#session:直接访问与当前请求关联的对象
	#servletContext:直接访问与当前请求关联的对象

thymeleaf与springboot集成

配置环境
	thymeleaf
	thymeleaf layout dialect

pom文件添加依赖

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

修改application.properties

spring.thymeleaf.encoding=UTF-8
#热部署静态文件
spring.thymeleaf.cache=false
#使用HTML5标准
spring.thymeleaf.mode=HTML5
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值