Thymeleaf入门

最新推荐文章于 2019-08-26 19:04:26 发布

Anntly

最新推荐文章于 2019-08-26 19:04:26 发布

阅读量320

点赞数

分类专栏： springboot学习文章标签： thymeleaf

本文链接：https://blog.csdn.net/ticktak/article/details/82216724

版权

springboot学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

常用属性

th:action,与form表单的action效果相同
```
<form th:action="@{/login}"/>
```

th:each:遍历


<li th:each="book : ${books}" th:text="${book.title}">
xxdxxxxxxx
</li>

th:href :超链接
```
<a th:href="@{/list}"></a>
```

th:if :条件判断


<div th:if="${rowStat.index} == 0">... do something ...</div>

th:fragment: 定义可以复用的片段,通常与th:include,th:replace一同使用

例如,在页面中定义了如下片段:

<div th:fragment="copy">
    <p>这是可以复用的片段</p>
</div>

如果要在指定位置引用它:

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

th:field: 绑定表单字段,通常与th:object一同使用

<form id="login-form" th:action="@{/login}" th:object="${loginBean}">...

<input type="text" value="" th:field="*{username}"></input>

<input type="text" value="" th:field="*{user[0].username}"></input>

</form>

th:src :用于外部资源的引入

<script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"

常用语法

变量表达式

语法:${...}

<span th:text="${book.author.nam}">

消息表达式

语法: #{...}

<table>
    ...
    <th th:text="#{header.address.city}">...</th>
    <th th:text="#{header.address.country}">...</th>
    ...
</table>

选择表达式

语法: *{...}

<div th:object="${book}">
    ...
    <span th:text="*{title}">...</span>
    ...
</div>

// div中先取出book对象,span中再取出book对象中的title属性

与变量表达式的区别是:选择表达式是在当前选择的对象中取值,而不是整个上下文变量映射上执行

链接表达式

1. 语法:@{...}

2. 链接表达式可以是相对的,在这种情况下,应用程序上下文将不会作为URL的前缀

<a th:href="@{../documents/report}">...</a>

3. 与服务器相对,同样没有持程序上下文前缀

<a th:href="@{~/contents/main}">...</a>

4. 和协议相对(类似绝对URl,但浏览器将使用在显示的页面中的相同的HTTp或HTTPS协议)

<a th:href="@{//static.mycompany.com/res/initial}">...</a>

5. Link表达式可以是绝对的

<a th:href="@{http://www.mycompany.com/main}">...</a>

分段表达式

1. 语法: th:insert 或 th:replace

例如,在页面中定义了如下片段:

<div th:fragment="copy">
    <p>这是可以复用的片段</p>
</div>

如果要在指定位置引用它:

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

字面量(文字)

1. 文本

<span th:text="'这是要显示的内容'"></span>

单引号代表其为文本

2. 数字

<span th:text="2013"></span>

<span th:text="2013 + 2"></span>

3. 布尔

<div th:if="${user.isAdmin() == false}">...</div>

4. null

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

算术操作

+,-,*,/,%

<div th:with="isEven=(${prodStat.count} % 2 == 0)">...</div>

比较运算符

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

<ul data-th-if="${page.totalPages le 7}">...

等价: ==,!=(e1,ne)
<div data-th-selected="${i eq page.size}"></div>

条件运算符

<tr th:class="${row.even}? 'even' : 'odd'">...</tr>

无操作:_
<tr th:class="${user.name}?:_">...</tr>

设置任意属性值

<form action="" th:attr="action=@{/subscribe}">
<input type="submit" value="" th:attr="value=#{subscribe.submit}"/>
</form>

可以直接设置

<form action="" th:action="@{/subscribe}">
<input type="submit" value="" th:value="#{subscribe.submit}"/>
</form>

迭代器

基本的迭代: th:each

<li th:each="book : ${books}" th:text="${book.title}">
xxdxxxxxxx
</li>

状态变量

index,count,size,current,even/odd,first,last

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
...
<tr/>

条件语句

th:if,th:unless

<a href="comments.html"
    th:href="..."
    th:if="${not #list.isEmpty(prod.comments)}">view</a>

switch

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

模板布局

定义和引用片段

例如,在页面中定义了如下片段:

<div th:fragment="copy">
    <p>这是可以复用的片段</p>
</div>

如果要在指定位置引用它:

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

不使用 th:fragment
<div id="copy-section">
    <p>这是可以复用的片段</p>
</div>

<div th:insert="~{footer :: #copy-section}">
</div>

th:insert,th:replace,th:include三者之间的区别
1. th:insert: 它将简单地插入指定的片段作为正文的主标签
2. th:replace: 用指定的实际片段来替换主标签
3. th:include: 类似于th:include,但不是插入片段它只插入此片段的内容(3.x版本之后,不建议使用)

属性优先级

挡在同一个标签中写入多个th:*属性时,会发生什么?

<li th:each="book : ${books}" th:text="${book.title}">
xxdxxxxxxx
</li>

属性优先级列表

顺序	功能	属性
1	模块包含	th:include,th:replace
2	模块循环	th:each
3	条件判断	th:if,th:unless,th:switch,th:case
4	局部变量	th:object,th:with
5	通用属性修改	th:attr,th:attrprepend,th:attrappend
6	特殊属性修改	th:value,th:href,th:src…
7	文本显示	th:text,th:utext
8	模块定义	th:fragment
9	模块移除	th:remove

注释

标准 HTML/XML注释

Thymeleaf 解析器级注释快

<!--/*和*/-->

会在解析的时候删除注释的所有内容

原型注释快
- 当模板静态打开时(比如原型设计),原型注释块所注释的代码将被注释,而在模板执行时,这些注释的代码,就能被显示出来
```
语法:
```

内联

内联表达式

[[...]]或[(...)]分别对应于th:text和th:utext

[[...]](th:text) 会对内容中的特殊符号进行转义

禁用内联表达式


<p th:inline="none">[[1,2,3],[4,5]]</p>

JavaScript内联


<script th:inline="javascript">
...
var username = /*[[${session.user.name}]*/ "xxxx"]
...
</script>

CSS内联


<style th:inline="css">
    .[[${classname}]]{
        text-align:[[${align}]];
    }
</style>

表达式基本对象

ctx: 上下文对象

${#ctx.locale}
${#ctx.variableNames}

${#ctx.request}
${#ctx.response}
${#ctx.session}
${#ctx.servletContext}

${#locale}

request/session等属性

param:用于检索请求参数
session:用于检索上session属性
application:用于检索application/servlet上下文属性

${param.foo} 
${param.size()}
${param.isEmpty()}
${param.containsKey('foo')} 

${session.foo} 
${session.size()}
${session.isEmpty()}
${session.containsKey('foo')} 

{application.foo} 
${application.size()}
${application.isEmpty()}
${application.containsKey('foo')}

Web上下文对象

#request:直接访问当前请求关联的javax.servlet.http.HttpServletRequest对象
#session:直接访问当前请求关联的javax.servlet.http.HttpSession对象
#servletContext:直接访问当前请求关联的javax.servlet.http.ServletContext对象

${#request.getAttribute('foo')}
${#request.getParameter('foo')}
${#request.getContextPath()}
${#request.getRequestName()}

${#session.getAttribute('foo')}
${#session.id}
${#session.lastAccessedTime}

${servletContext.getAttribute('foo')}
${#servletContext.getContextPath()}

Anntly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf入门

常用属性th:action,与form表单的action效果相同 &amp;lt;form th:action=&quot;@{/login}&quot;/&amp;gt; th:each:遍历 &amp;lt;li th:each=&quot;book : ${books}&quot; th:text=&quot;${book.title}&quot;&amp;gt; xxdxxxxxxx &
复制链接

扫一扫

专栏目录