1.th:inline=“javascript”
th:inline="javascript"这是Thymeleaf中的内联写法,支持在javascript访问model中的数据,所以以后想写[[${xxx.xxx}]]这样写法的时候一定要记得在script中写上th:inline=“javascript”
<script type="text/javascript" th:inline="javascript">
function focus(gid){
$.ajax(
{
//请求路径,要注意的是url和th:inline="javascript"
url: [[@{/cart/focus}]],
//请求类型
type : "post",
contentType:
"application/json",
//data表示发送的数据
data:
JSON.stringify({
id: gid
}),
//成功响应的结果
success
:
function (obj) {//obj响应数据
if (obj == "no") {
alert("您已收藏该商品!");
} else if (obj == "ok") {
alert("成功收藏该商品");
} else {
alert("您没有登录,请登录!");
}
}
,
error : function () {
alert("处理异常!");
}
}
);
}
</script>
2.th:text 在页面输出值
<sapn th:text="${student.name}">张三</sapn>
在没有后台数据的时候,显示张三,当我们在有后台渲染的情况下,后台会把这个标签渲染为对应的值
3.一般${}是用来引用变量名的,而@{}是引用路径的
4.很多情况下我们并不希望在代码里硬编码进文字,我们希望把文字提取成统一的代号,这样方便管理,也方便更改语言。
我们要做的首先是创建一个语言文件,比如abc.properties
title=这是标题
message1=这是消息2
message2=这是消息2
然后我们在application.properties里加上下面这行注册这个语言文件:
spring.messages.basename=abc
这样,我们在模板里就可以通过#{消息名}来获取这个消息对应的真正的文字:
<title th:text="#{title}"></title>
5.th:value
将值放入到input标签的value中
<iinpt th:value="${user.name}" />
6.th:field 双向绑定
<input th:field="*{name}"/>
经过解析后变成:
<input name="name" value="${name}" id="name" />
//后台和前端如果字段名一致,就能实现双向绑定
7.th:each 迭代遍历
状态变量 | 作用 |
---|---|
Index: | 当前遍历对象的下标 从0开始 |
Count | 当前迭代对象的计数 从1开始 |
Size | 当前迭代对象长度 |
Even /old | 当前迭代对象是否是偶数/奇数 布尔值 从0开始 |
First | 当前循环是否是第一条 是返回true 否则返回false |
Last | 当前循环是否是最后一条 是返回true 否则返回false |
<table border="1px" width="300px" >
<tr>
<td>ID</td>
<td>NAME</td>
<td>ADDRESS</td>
</tr>
<tr th:each="u : ${list}">
<td th:text="${u.id}"></td>
<td th:text="${u.name}"></td>
<td th:text="${u.address}"></td>
</tr>
</table>
使用状态变量时要:
8.th:if 条件判断
<span th:if="${sex}=='男'">男</span>
<span th:if="${sex}=='女'">女</span>
9.th:switch th:case
<div th:switch="${id}">
<span th:case="1">id为1</span>
<span th:case="2">id为2</span>
<span th:case="3">id为3</span>
</div>