华龙芯

Appearance

Thymeleaf 常用 ​

警告

华龙网使用的 Thymeleaf 版本并不太高，并且可能存在一些问题，请理性慎重使用

✨ 变量表达式 ​

html
<p th:text="${name}">默认值</p>
html
<title th:text="|${article.title}-xx委员会|">xx委员会</title>

✨ 将数据注入 js ​

[[]] 和 [()] 都是取值，只是在注入 js 的时候有差异。

  • [[]] 会自动加引号
  • [()] 不会自动加引号，适用于注入 数字 或 表达式计算的结果

如果数据是 Java 中的 Map 或者 List ，用 [[]] 会自动转换为 JSON
如果数据是 基本类型，用 [()]

html
<script th:inline="javascript">
  var data = [[${article}]];
  console.log("数据为：", data)
  console.log(JSON.stringify(data))
</script>

✨ js 注入方式 2 ​

html
<script th:inline="javascript">
  window.addEventListener('DOMContentLoaded', function () {
    let dataList = [
      /*[# th:each="item, stat : ${newsPageTotal.list}"]*/
      { id: '[[${item.article.id}]]', summary: [[${item.article.content}]] },
      /*[/]*/
    ];
  });
</script>

✨ 条件判断 ​

html
<p th:if="${age} >= 18">成年人</p>
<p th:unless="${age} >= 18">未成年人</p>
html
<p th:text="${age} >= 18 ? '成年人' : '未成年人'"></p>

✨ 循环遍历 ​

html
<ul>
  <li th:each="user, stat : ${users}" th:text="${user.name}"></li>
</ul>
html
<tr th:each="item, stat : ${items}">
  <td th:text="${stat.index}">0</td>
  <td th:text="${stat.count}">1</td>
  <td th:text="${stat.size}">总数</td>
  <td th:text="${stat.even}">是否偶数</td>
  <td th:text="${stat.odd}">是否奇数</td>
  <td th:text="${stat.first}">是否第一个</td>
  <td th:text="${stat.last}">是否最后一个</td>
</tr>

对象也是可以遍历的

html
<ul>
  <li th:each="entry : ${mapData}">
    <span th:text="${entry.key}"></span>: <span th:text="${entry.value}"></span>
  </li>
</ul>

数组 ​

List / 集合

html
<div th:if="${myList != null and #lists.size(myList) > 0}">列表不为空</div>

原生数组

html
<div th:if="${#arrays.length(myArray) > 0}">数组有内容</div>

✨ Thymeleaf 内置对象 ​

strings ​

html
<span th:if="${#strings.isEmpty(user.name)}">用户名为空</span>
<!-- 取反 -->
<span th:if="${!#strings.isEmpty(user.name)}">用户名不为空</span>

<p th:text="${#strings.toUpperCase('hello')}">HELLO</p>
<p th:text="${#strings.length('Hello')}">5</p>
<p th:text="${#strings.substring('abcdef', 2, 4)}">cd</p>
<p th:text="${#strings.contains('hello world', 'world')}">true</p>

<!-- 2025-03-19 -->
<span th:text="${item.pubTime.substring(0, 10)}"></span>
<!-- 2025-05-22 17:37 -->
<div class="date" th:text="${item.pubTime.substring(0, 16)}"></div>

numbers ​

html
<p th:text="${#numbers.formatDecimal(123456.789, 1, 2)}">123,456.79</p>
<p th:text="${#numbers.formatInteger(123456, 3)}">123,456</p>

dates ​

html
<p th:text="${#dates.format(myDate, 'yyyy-MM-dd')}"></p>
<p th:text="${#dates.year(myDate)}"></p>
<p th:text="${#dates.daysBetween(startDate, endDate)}"></p>

arrays ​

注意

原生数组，不是 List

html
<p th:text="${#arrays.length(array)}"></p>
<p th:text="${#arrays.contains(array, 'apple')}"></p>

lists ​

html
<p th:text="${#lists.size(users)}"></p>
<p th:text="${#lists.isEmpty(users)}"></p>

maps ​

html
<p th:text="${#maps.size(myMap)}"></p>
<p th:text="${#maps.containsKey(myMap, 'key1')}"></p>

date ​

html
<span th:text="${#dates.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
html
<span th:if="${#dates.isAfter(user.createTime, #dates.createNow())}">
  创建时间在当前时间之后
</span>
  • #dates.createNow()
  • #dates.isAfter(date1, date2)
  • #dates.isBefore(date1, date2)
  • #dates.day(date)

input：

html
<input type="date" th:field="*{birthday}" />

bools ​

html
<p th:text="${#bools.isTrue(flag)}"></p>
<p th:text="${#bools.isFalse(flag)}"></p>
<p th:text="${#bools.negate(flag)}"></p>