一.常用配置
spring:
thymeleaf:
cache: false
mode: LEGACYHTML5
# 配置了前缀
prefix: classpath:/templates/
# 配置了后缀
suffix: .html
web:
resources:
# 配置静态文件路径默认是classpath:/static/
static-locations: classpath:/static/
mvc:
# 静态文件匹配模式
static-path-pattern: /**
二.取值操作
1.普通取值
<div th:text="${name}"></div>
2.富文本取值
<div th:utext="${richText}"></div>
3.对象取值
<div th:object="${user}">
<div th:text="*{id}"></div>
<div th:text="*{username}"></div>
<div th:text="*{password}"></div>
<div th:text="*{nickname}"></div>
</div>
4.标签内获取对应的值
<div th:object="${user}">
<div>id:[[*{id}]]</div>
<div>用户名:[[*{username}]]</div>
<div>密码:[[*{password}]]</div>
<div>昵称:[[*{nickname}]]</div>
</div>
5.在js脚本中获取值
<script th:inline="javascript">
console.log("在js脚本中获取值",[[${name}]]);
</script>
三.数值处理
<!-- 时间格式化 -->
<p th:text="${#dates.format(mydate,'yyyy-MM-dd')}" />
<p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss.SSS')}" />
<hr />
<!-- 替换 把.换成$ -->
<p th:text="${#strings.replace('www.baidu.cn','.','$')}" />
<!-- 转大写 -->
<p th:text="${#strings.toUpperCase('www.baidu.cn')}" />
<!-- 去除两边空格 -->
<p th:text="${#strings.trim('www.baidu.cn')}" />
<hr />
<!-- 判断names中是否包含boot-0 -->
<p th:text="${#sets.contains(names,'boot-0')}" />
<p th:text="${#sets.contains(names,'boot-9')}" />
<!-- 元素个数 -->
<p th:text="${#sets.size(names)}" />
<hr />
<!-- 判断ids中是否包含 0 -->
<p th:text="${#sets.contains(ids,0)}" />
<!-- 取出下标为1的元素 -->
<p th:text="${ids[1]}" />
<p th:text="${names[1]}" />
四.地址操作
1.springboot内置地址处理
<!-- 引用 js-->
<script th:src="@{/js/index.js}" ></script>
<!-- 引用 css-->
<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
<!-- 引用 图片-->
<img th:src="@{/images/mao.png}" alt="图片"/>
2.在css中引入静态资源
div {
background-color: lightblue;
background-image: url("../images/mao.png");
}
3.链接跳转
<a href="detail">详情</a>
<a href="/api/detail">绝对地址</a>
<a th:href="@{/detail}">thymeleaf写法</a>
<a th:href="@{/detail?name=张三丰}">thymeleaf传参</a>
<a th:href="@{/detail(name=张三丰,id=123)}">thymeleaf新写法</a>
<a th:href="@{/detail(name=${name},id=123)}">thymeleaf引用变量</a>
五.获取内置对象
<!-- 使用request中的方法 -->
<p th:text="${#httpServletRequest.getRemoteAddr()}" />
<!-- 获取request中的数据 -->
<p th:text="${#httpServletRequest.getAttribute('requestMessage')}" />
<!-- 获取session中的数据 -->
<p th:text="${#httpSession.getAttribute('sessionMessage')}" />
<p th:text="${#httpSession.getId()}" />
<!-- 获取项目根目录 -->
<p th:text="${#httpServletRequest.getServletContext().getRealPath('/')}" />
<hr />
<!-- 默认获取request中的数据 -->
<p th:text="'requestMessage = ' + ${requestMessage}" />
<!-- 获取session中的数据,需要使用session调用 -->
<p th:text="'sessionMessage = ' + ${session.sessionMessage}" />
<!-- 获取application中的数据,需要使用application调用 -->
<p th:text="'applicationMessage = ' + ${application.applicationMessage}" />
六.条件判断
1.语法
<div th:unless="${user == null}" th:object="${user}">
<div th:text="*{username}"></div>
<div th:text="*{password}"></div>
</div>
<div th:if="${user == null}">
暂无数据
</div>
2.隐式转换
不只是布尔值的 true 和 false, th:if 表达式返回其他值时也会被认为是 true 或 false,规则如下:
- boolean 类型并且值是 true, 返回 true
- 数值类型并且值不是 0, 返回 true
- 字符类型(Char)并且值不是 0, 返回 true
- String 类型并且值不是 “false”, “off”, “no”, 返回 true
- 不是 boolean, 数值, 字符, String 的其他类型, 返回 true
- 值是 null, 返回 false
七.循环渲染
<ul>
<li th:each="item,eachInfo:${list}" th:object="${item}">
<div th:text="*{username}"></div>
<div th:text="*{password}"></div>
<div th:text="${eachInfo}"></div>
</li>
</ul>