Thymeleaf 3學習筆記

時間  2019-12-07
標籤 thymeleaf 學習 筆記 简体版
原文   原文鏈接

Thymeleaf 目前最新版本3.0
Thymeleaf做爲Spring-Boot官方推薦模板引擎，並且支持純HTML瀏覽器展示(模板表達式在脫離運行環境下不污染html結構).是時候瞭解一番了。javascript

安裝與初始化配置

與Spring集成css

<dependency>
  <groupId>org.thymeleaf</groupId>
  <artifactId>thymeleaf-spring4</artifactId>
  <version>3.0.0.RELEASE</version>
</dependency>

與Spring-Boot集成：html

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

在Spring中進行配置：java

@Configuration
@EnableWebMvc
@ComponentScan("com.thymeleafexamples")
public class ThymeleafConfig extends WebMvcConfigurerAdapter implements ApplicationContextAware {

  private ApplicationContext applicationContext;

  public void setApplicationContext(ApplicationContext applicationContext) {
    this.applicationContext = applicationContext;
  }

  @Bean
  public ViewResolver viewResolver() {
    ThymeleafViewResolver resolver = new ThymeleafViewResolver();
    resolver.setTemplateEngine(templateEngine());
    resolver.setCharacterEncoding("UTF-8");
    return resolver;
  }

  @Bean
  public TemplateEngine templateEngine() {
    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setEnableSpringELCompiler(true);
    engine.setTemplateResolver(templateResolver());
    return engine;
  }

  private ITemplateResolver templateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/templates/");
    resolver.setTemplateMode(TemplateMode.HTML);
    return resolver;
  }
}

在Spring-Boot中只需以下配置：jquery

#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#開發時關閉緩存,否則無法看到實時頁面
spring.thymeleaf.cache=false
#thymeleaf end

具體能夠配置的參數能夠查看 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties這個類,上面的配置實際上就是注入到該類中的屬性值.git

基本語法

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<p th:text="'Hello！, ' + ${name} + '!'" >3333</p>
</body>
</html>

表達式github

  • Variable Expressions: ${...}web

  • Selection Variable Expressions: *{...}spring

  • Message Expressions: #{...}express

  • Link URL Expressions: @{...}

  • Fragment Expressions: ~{...}

字符串操做:

  • String concatenation: +

  • Literal substitutions: |The name is ${name}|

條件操做：

  • If-then: (if) ? (then)

  • If-then-else: (if) ? (then) : (else)

  • Default: (value) ?: (defaultvalue)

  • No-Operation: _

如：'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

一、獲取變量值

<p th:text="'Hello！, ' + ${name} + '!'" >3333</p>

能夠看出獲取變量值用$符號,對於javaBean的話使用變量名.屬性名方式獲取,這點和EL表達式同樣.另外$表達式只能寫在th標籤內部,否則不會生效
#{}是國際化支持取值的符號
注意:th:text與th:utext的區別，輸出中文時應該使用th:utext
${..}實際語法是:OGNL(非web),SpEL(web) ,支持的內置變量

便捷部分

  • ${x} will return a variable x stored into the Thymeleaf context or as a request attribute.

  • ${param.x} will return a request parameter called x (which might be multivalued).

  • ${session.x} will return a session attribute called x.

  • ${application.x} will return a servlet context attribute called x.

基本的

#ctx: the context object.
#vars: the context variables.
#locale: the context locale.
#request: (only in Web Contexts) the HttpServletRequest object.
#response: (only in Web Contexts) the HttpServletResponse object.
#session: (only in Web Contexts) the HttpSession object.
#servletContext: (only in Web Contexts) the ServletContext object.

工具對象

#execInfo: information about the template being processed.
#messages: methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax.
#uris: methods for escaping parts of URLs/URIs
#conversions: methods for executing the configured conversion service (if any).
#dates: methods for java.util.Date objects: formatting, component extraction, etc.
#calendars: analogous to #dates, but for java.util.Calendar objects.
#numbers: methods for formatting numeric objects.
#strings: methods for String objects: contains, startsWith, prepending/appending, etc.
#objects: methods for objects in general.
#bools: methods for boolean evaluation.
#arrays: methods for arrays.
#lists: methods for lists.
#sets: methods for sets.
#maps: methods for maps.
#aggregates: methods for creating aggregates on arrays or collections.
#ids: methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

工具對象的使用方式見：http://www.thymeleaf.org/doc/...， 如下僅僅舉幾個例子

${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
${#dates.createNow()}
${#dates.createToday()} //time set to 00:00

${#strings.isEmpty(name)}  //Check whether a String is empty (or null)
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)} 

${#strings.startsWith(name,'Don')}                  // also array*, list* and set*
${#strings.endsWith(name,endingFragment)}           // also array*, list* and set*

${#strings.length(str)}
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}

用*{...} 選擇對象裏的變量，如

<div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
  </div>

//等價於
<div>
  <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>

字面量

  • Text literals: 'one text', 'Another one!',…

  • Number literals: 0, 34, 3.0, 12.3,…

  • Boolean literals: true, false

  • Null literal: null

字符串通常須要包圍在'單引號內，但也有幾種變通方式

<div th:class="'content'">...</div>
<span th:text="|Welcome to our application, ${user.name}!|">
//Which is equivalent to:
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
<span th:text="${onevar} + ' ' + |${twovar}, ${threevar}|">

定義模板本地變量

<div th:with="firstPer=${persons[0]}">
  <p>
    The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
  </p>
</div>
<div th:with="firstPer=${persons[0]},secondPer=${persons[1]}">
  <p>
    The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
  </p>
  <p>
    But the name of the second person is 
    <span th:text="${secondPer.name}">Marcus Antonius</span>.
  </p>
</div>

2.引入URL
Thymeleaf對於URL的處理是經過語法@{…}來處理的

<a th:href="@{http://blog.csdn.net/u012706811}">絕對路徑</a>
<a th:href="@{/}">相對路徑</a>
<a th:href="@{css/bootstrap.min.css}">Content路徑,默認訪問static下的css文件夾</a>

相似的標籤有:th:href和th:src

<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" 
   th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>

<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

<a th:href="@{${url}(orderId=${o.id})}">view</a>
<a th:href="@{'/details/'+${user.login}(orderId=${o.id})}">view</a>

Server root relative URLs
An additional syntax can be used to create server-root-relative (instead of context-root-relative) URLs in order to link to different contexts in the same server. These URLs will be specified like @{~/path/to/something}

三、運算符
在表達式中可使用各種算術運算符，例如+, -, *, /, %

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

邏輯運算符>, <, >=, <=，==,!= (gt, lt, ge, le,eq,ne)均可以使用，惟一須要注意的是使用<,>時須要用它的HTML轉義符：

th:if="${prodStat.count} &gt; 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

布爾運算符: and or not/!

4.條件
if/unless
Thymeleaf中使用th:if和th:unless屬性進行條件判斷，標籤只有在th:if中條件成立時才顯示,th:unless於th:if剛好相反，只有表達式中的條件不成立，纔會顯示其內容。

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

Switch
Thymeleaf一樣支持多路選擇Switch結構,默認屬性default能夠用*表示:

<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 some other thing</p>
</di

5.循環

<tr th:each="prod : ${prods}">
      <td th:text="${prod.name}">Onions</td>
      <td th:text="${prod.price}">2.41</td>
      <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
    </tr>

迭代對象必須爲

  • Any object implementing java.util.Iterable、 java.util.Enumeration、java.util.Iterator

  • Any object implementing java.util.Map. When iterating maps, iter variables will be of class java.util.Map.Entry.

  • Any array.

  • Any other object will be treated as if it were a single-valued list containing the object itself.

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.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>
  </tr>
//不過也能夠直接加Stat後綴訪問狀態變量
<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>
  </tr>

th:each內置迭代狀態屬性：

  • index ,當前索引，從0開始。

  • count,當前數目，從1開始。

  • size，總大小

  • current，當前值

  • even/odd boolean properties.

  • first boolean property.

  • last boolean property.

六、設置html標籤屬性

<img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
//which is equivalent:
<img src="../../images/gtvglogo.png" 
     th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />

//append
<tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">

Thymeleaf 3中的一些變化和特性

  1. 模板變化
    推薦你去掉模板中的 th:inline=「text」 屬性。由於在HTML或XML模板中，再也不須要該屬性去支持文本中內聯表達式的特性。

  2. 完整的HTML5 標記支持
    不在強制要求標籤閉合，屬性加引號等等

  3. 模板類型
    Thymeleaf 3 移除了以前版本的模板類型，新的模板類型爲：HTML、XML、TEXT、JAVASCRIPT、CSS、RAW

文本型模板
文本型模板使得Thymeleaf能夠支持輸出CSS、Javascript和文本文件。在你想要在CSS或Javascript文件中使用服務端的變量時；或者想要輸出純文本的內容時。
在文本模式中使用Thymeleaf的特性，你須要使用一種新的語法，例如：

[# th:each="item : ${items}"]
  - [# th:utext="${item}" /]
[/]
var a = [# th:text="${msg}"/];

加強的內聯機制
如今可無需額外的標籤，直接在文本中輸出數據：

This product is called [[${product.name}]] and it's great!
var a = [[${msg}]];

四、片斷（Fragment）表達式

Thymeleaf 3.0 引入了一個新的片斷表達式。形如：~{commons::footer}。
該特性十分有用（好比解決定義通用的header和footer的問題）
base.html

<head th:fragment="common_header(title,links)">
  <title th:replace="${title}">The awesome application</title>

  <!-- Common styles and scripts -->
  <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
  <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
  <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>

  <!--/* Per-page placeholder for additional links */-->
  <th:block th:replace="${links}" />

</head>

main.html

<head th:replace="base :: common_header(~{::title},~{::link})">
  <title>Awesome - Main</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>

片斷常常和th:insert or th:replace一塊兒使用

<div th:insert="~{commons :: main}">...</div>

<div th:with="frag=~{footer :: #main/text()}">
  <p th:insert="${frag}">
</div>

~{::selector} or ~{this::selector}引用本模板內的片斷

不使用th:fragment定義的片斷的狀況：

<div id="copy-section">
  &copy; 2011 The Good Thymes Virtual Grocery
</div>
 <div th:insert="~{footer :: #copy-section}"></div>

th:insert and th:replace (and th:include)的區別：

  • th:insert 插入片斷自己

  • th:replace actually replaces its host tag with the specified fragment.

  • th:include 與th:insert不一樣的是，它插入的是片斷解析後的內容

五、無操做標記（token）
Thymeleaf 3.0 另外一個新的特性就是無操做（NO-OP no-operation）標記，下劃線」_」，表明什麼也不作。
例如：
<span th:text="${user.name} ?: _">no user authenticated</span>
當user.name 爲空的時候，直接輸出標籤體中的內容

註釋

普通html註釋：<!-- User info follows -->
Thymeleaf 註釋：

一、<!--/* This code will be removed at Thymeleaf parsing time! */-->

二、<!--/*--> 
  <div>
     you can see me only before Thymeleaf processes me!
  </div>
<!--*/-->

三、<!--/*/
  <div th:text="${...}">
    ...
  </div>
/*/-->

html內聯

//不會轉義時
<p>The message is "[(${msg})]"</p>
//等價於
<p>The message is "This is <b>great!</b>"</p>

//轉義時
<p>The message is "[[${msg}]]"</p>
//等價於
<p>The message is "This is &lt;b&gt;great!&lt;/b&gt;"</p>

//禁用內聯
<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>

//js內聯
<script th:inline="javascript">
    ...
    var username = [[${session.user.name}]];
    ...
</script>


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

Markup Selector Syntax

http://www.thymeleaf.org/doc/...

demo:

參考：
http://www.thymeleaf.org/doc/...
http://www.thymeleaf.org/doc/...
http://blog.csdn.net/u0127068...
https://www.tianmaying.com/tu...
http://www.thymeleaf.org/doc/...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程