woshikid / blog

Apache License 2.0
8 stars 1 forks source link

Thymeleaf学习笔记 #163

Open woshikid opened 3 years ago

woshikid commented 3 years ago

POM

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

自动配置类为ThymeleafAutoConfiguration,默认配置类为ThymeleafProperties

禁用缓存

spring.thymeleaf.cache: false # 使用devtools时默认为false

src/main/resources/templates/test.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <p th:text="${html}">转义html</p>
    <p>[[${html}]]</p>
    <p th:utext="${html}">不转义html</p>
    <p>[(${html})]</p>
    <p th:text="#{welcome.text(${user})}">国际化</p>
    <p th:text="'hello ' + ${user}">字符串拼接</p>
    <p th:text="|hello ${user}|">字符串拼接</p>
    <p th:text="${session?.user?.id}">非空继续</p>
    <p th:text="${#session.getAttribute('user')}">session</p>
    <p th:text="${#request.contextPath}">request</p>
    <p th:text="${#numbers.formatDecimal('123.456', 1, 2)}">123.46</p>
    <p th:text="${#strings.defaultString(text, 'default')}">默认值</p>
    <p th:text="${#aggregates.sum(array)}">求和</p>
</body>
</html>

th:id/value/attr/class/selected

<input type="text" name="user" value="user" th:value="${user}"/>

th:href/action(自动添加contextPath)

<!-- /login?user={user} -->
<a href="/login" th:href="@{/login(user=${user})}">登录</a>
<!-- /login/{user} -->
<a href="/login" th:href="@{/login/{user}(user=${user})}">登录</a>
<a href="/login" th:href="@{'/login/' + ${user}}">登录</a>

th:src/inline

<script src="../static/test.js" th:src="@{/test.js}"></script>
<script th:inline="javascript">
    var list = [[${list}]];
</script>

th:with

<div th:with="df='yyyy-MM-dd'">
    时间:<span th:text="${#dates.format(date, df)}">2021-01-01</span>
</div>

th:each

<tr th:each="item,status:${list}" th:class="${status.even}?'even':'odd'">
    <td th:text="${status.index}">index</td>
    <td th:text="${status.count}">count</td>
    <td th:text="${status.size}">size</td>
    <td th:text="${status.current}">item</td>
    <td th:text="${status.even}">even</td>
    <td th:text="${status.odd}">odd</td>
    <td th:text="${status.first}">first</td>
    <td th:text="${status.last}">last</td>
    <td th:text="${item}">item</td>
</tr>
<tr th:each="entry:${map}">
    <td th:text="${entry.key}">key</td>
    <td th:text="${entry.value}">value</td>
</tr>
<tr th:each="num:${#numbers.sequence(0, 10)}">
   <td th:text="${num}">生成数组</td>
</tr>
<tr th:remove="all">
   <td>演示数据</td>
</tr>

th:if

<div th:if="${#lists.isEmpty(list)}">list为空</div>
<div th:if="${not #lists.isEmpty(list)}">list不为空</div>
<div th:unless="${#lists.isEmpty(list)}">list不为空</div>

th:switch

<div th:switch="${user}">
    <p th:case="vip">VIP</p>
    <p th:case="normal">Normal</p>
    <p th:case="*">Other</p>
</div>

src/main/resources/templates/fragments.html

<footer th:fragment="footer(start, end)">
    <p th:text="|${start} - ${end} All Rights Reserved|"></p>
</footer>

th:include

<footer th:include="fragments::footer(2020, 2021)"></footer>

手动渲染

@Autowired
TemplateEngine templateEngine;
Context context = new Context();
context.setVariable("name", "value");
String html = templateEngine.process("test", context);