🥝FANMR.CN热爱,追求
Thymeaf

Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎,类似JSP,Velocity,FreeMaker等,它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎,用于替代JSP完全没有问题

文档

官方文档

头部提示

<html lang="zh" xmlns:th="http://www.thymeleaf.org">

JSON的解析

<div th:text="${article['content']}"></div>

style

<div th:style="${newCate} eq ${item['cateName']} ? 'display:block' : ''"></div>

class

th:classappend="${page == pageNnm} ? 'active' : ''"

遍历

<tr th:each="cate:${cateList}">
  <td th:text="${cate.sort}"></td>
  <td th:text="${cate.name}"></td>
  <td>0</td>
  <td th:text="${cate.createDate}"></td>
  <td th:text="${cate.updateDate}"></td>
</tr>

遍历中的index

<div th:each="item : ${hot}">
  <span th:text="${itemStat.count}">1</span>
  <a th:href="'/article/'+${item.id}" th:text="${item.title}"></a>
</div>
  • index:当前迭代对象的index(从0开始计算)
  • count: 当前迭代对象的index(从1开始计算)
  • size:被迭代对象的大小
  • current:当前迭代变量
  • even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)
  • first:布尔值,当前循环是否是第一个
  • last:布尔值,当前循环是否是最后一个

图像

<img th:src="@{${session.config.avatar}}">

时间

<div th:text="${#dates.format(article.createDate, 'yyyy-MM-dd')}"></div>

onclick

<span class="option" th:onclick="edit([[${category.cateId}]])">重命名</span>

下拉选中

<select name="recommend" id="recommend">
<option value="0" th:selected="${article.recommend == 0}">不推荐</option>
<option value="1" th:selected="${article.recommend == 1}">推荐</option>
</select>

解析HTML

<span th:utext="${item.intro}"></span>

模板

创建个html文件,如common.html
<!--底部-->
<div th:fragment="footer">
  <span>© 2020</span>
</div>

使用
<!--底部-->
<div th:insert="common::footer"></div>

注意:模板需要放在templates目录下,不然无法找到

重定向和转发

redirect:  重定向,没有数据
forward:  请求转发,带数据,默认

如:return "redirect:/";

自定义错误页面

在templates下创建error文件夹,放入错误页的html

4xx代表4开头的错误,也可以创建具体的每个状态页面,比如404、400

script绑定数据

<script th:inline="javascript">
  // 语法 [[${article.content}]]
  $('#content').html(marked([[${article.content}]]))
  // 同样可以使用判断
  $('#content').html(marked([[${article != null ? article.content : ''}]]))
</script>