Thymeleaf模板引擎常用總結
阿新 • • 發佈:2018-11-28
一:語法簡單總結
Thymeleaf是一個Java類庫,是xml/html/html5的模板引擎,SpringBoot框架推薦在MVC的Web應用做做View層使用.
SpringBoot中整合Thymeleaf依賴如下.
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
<properties> <!-- set thymeleaf version SpringBoot預設使用的是Thymeleaf的2.0的版本.--> <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version> <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties>
ThymeleafProperties的原始碼如下.
將application.yml中的spring.thymeleaf的配置注入下面對應的屬性中,有幾個是預設的,剩下的都是根據使用情況配置的,然後注入到相應的值中.
@ConfigurationProperties:批量注入屬性值.
@Value:單個注入屬性值.
@ConfigurationProperties(
prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
private boolean checkTemplate = true;
private boolean checkTemplateLocation = true;
private String prefix = "classpath:/templates/";
private String suffix = ".html";
private String mode = "HTML";
private Charset encoding;
private boolean cache;
private Integer templateResolverOrder;
private String[] viewNames;
private String[] excludedViewNames;
private boolean enableSpringElCompiler;
private boolean enabled;
private final ThymeleafProperties.Servlet servlet;
private final ThymeleafProperties.Reactive reactive;
public ThymeleafProperties() {
this.encoding = DEFAULT_ENCODING;
this.cache = true;
this.enabled = true;
this.servlet = new ThymeleafProperties.Servlet();
this.reactive = new ThymeleafProperties.Reactive();
}
名稱空間如下,靜態頁面轉換為動態檢視.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
1. Thymeleaf引入css資源.
th:href="@{path}"
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" media="all">
2. Thymeleaf引入JavaScript資源.
th:src="@{path}"
<script th:src="@{js/jquery-3.1.1.min.js}"></script>
通過 "@{}"引用靜態資源.
3. 訪問Model中的資料.
${}訪問model中的屬性.
<span th:text="${singlePerson.name}"></span>
動態處理的元素使用"th:"為字首.
4. model中的資料迭代.
判斷list集合不為空.
<div th:if="${not #lists.isEmpty(person)}">
</div>
迭代list集合資料.list中儲存實體物件.
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item" th:each="person:${person}">
<span th:text="${person.name}"></span>
<span th:text="${person.age}"></span>
<button class="btn" th:onclick=" 'getPersonName(\'' +${person.name}+ '\'); '">獲得名字</button>
</li>
</ul>
</div>
如何獲取遍歷列表的序號,方式一:${stat.count}是從1開始的,方式 二:${stat.index}是從0開始的,如果從1開始就${stat.index+1}.
<tr th:each="novel,stat:${resultlist}">
<th style="text-align:center;" th:text="${stat.count}"></th>
迭代list,裡面存放map物件.
th:text=${novel['Map Key']}
<tr th:each="novel,stat:${resultlist}">
<th style="text-align:center;" th:text="${stat.count}"></th>
<th style="text-align:center;" th:text="${novel['Index']}"></th>
<th style="text-align:center;" th:text="${novel['Type']}"></th>
<th style="text-align:center;" th:text="${novel['Id']}"></th>
<th style="text-align:center;" th:utext="${novel['Highlight']}"></th>
<th style="text-align:center;" th:text="${novel['Scope']}"></th>
</tr>
5. 在JavaScript中訪問model中的資料.
通過th:inline=“javascript”新增到script標籤,這樣Javascript就可以訪問model中的物件屬性了.
通過“[[${}]]”訪問實際的值.
<script th:inline="javascript">
var single=[[${singlePerson}]];
console.log(single.name+"/"+single.age);
function getPersonName(name){
console.log(name);
}
</script>
6. 解析model屬性值中的html標籤.
<th style="text-align:center;" th:utext="${novel['Highlight']}"></th>
7. 格式化.(表示式物件)
7.1格式化金額.小數位為2為.
<dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">350</dd>
7.2 格式化日期
<dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">28-Jun-2018</dd>
7.3 字串連線
<span th:text="${'Hi'+person.name}"></span>