文档

头部提示

<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>

注意：IDEA会飘红，不影响程序运行

下拉选中

<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>

新语法（上面语法有警告）：
<div th:insert="~{common::footer}"></div>

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

重定向和转发

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

如：return "redirect:/";

自定义错误页面

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

4xx代表4开头的错误，也可以创建具体的每个状态页面，比如404、400，也可以定义带信息

import com.fan.cache.CommonCache;
import org.springframework.boot.web.servlet.error.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 错误页面
 */
@Controller
public class ErrorCustomController implements ErrorController {

    @RequestMapping("/error")
    public String error(Model model) {
        model.addAttribute("config", CommonCache.config);
        return "500";
    }

}

script绑定数据

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

input数据绑定

<input id="title" type="text" placeholder="标题" th:value="${document.name}">

textarea数据绑定

<textarea id="content" placeholder="内容" th:text="${document.content}"></textarea>