学习thymeleaf

我就是我 2022-01-22 03:15 265阅读 0赞

## 识别标准方言 ##

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

## 变量表达式 ##

语法 ${...}

## 消息表达式 ##

语法 #{...}也称为文本外部化、国际化或i18n

## 选择表达式 ##

语法：*{...}

<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">
    	©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" >
    	©2017<a href="https://waylau.com">waylau.com</a>
    </div>
    引用
    <div> th:insert="~{footer ::copy}"></div>

不是用th:fragment
    <div id="copy-section" >
    	©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，但不是插入片段它只插入次片段的内容

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQwMjM1Mg_size_16_color_FFFFFF_t_70]

## 属性优先级 ##

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

## 注释 ##

解析器级注释快
    解析的时候删除 和   之间的所有内容
    原型注释块
    当模板静态打开时，圆形注释快所注释的代码将被注释，二在模板执行是，这些注释的代码就能被显示出来

## 内联 ##

[[...]]或[(...)]分别对应于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<b>great!</b></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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQwMjM1Mg_size_16_color_FFFFFF_t_70]: /images/20220122/e4666fa040924b9aa01e1efc52c4d663.png