1. Thymeleaf 属性 99
1.1 解释
大部分属性和 html 的一样，只不过前面加了一个 th 前缀。 加了 th 前缀的属性，是经过
模版引擎处理的。
属性是放在html元素中的，就是html元素的属性，加入了th前缀。 属性的作用不变。 加入上th， 属性的值由模板引擎处理了。 在属性可以使用变量表达式
1.2 例如
<form action="/loginServlet" method="post"></form>
<form th:action="/loginServlet" th:method="${methodAttr}"></form>
2. 模板属性举例 99
2.1 action和method 99
定义后台控制器的路径，类似
标签的 action 属性，主要结合 URL 表达式,获取动态变量
......
th:method设置请求方法
......
//使用模板的属性 99
@GetMapping("/property")
public String useProperty(Model model){
model.addAttribute("methodAttr","post");
model.addAttribute("id","2342");
model.addAttribute("paramname","name");
model.addAttribute("uservalue","lisi");
model.addAttribute("textcolor","color:blue");
return "html-property";
}
html-property.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>属性 99-100</title>
</head>
<body>
<div style="margin-left: 400px">
<h3>属性使用， 在html元素的属性上加入th</h3>
<form th:action="@{/loginServlet}" th:method="${methodAttr}">
<input th:type="text" th:name="${paramname}" th:value="${uservalue}"/><br>
<input type="button" id="btn" th:onclick="btnClick()"value="按钮"/>
</form>
</div>
</body>
<script type="text/javascript">
function btnClick(){
alert("按钮单击了")
}
</script>
</html>
2.2 使用jquery 100
html-property.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>属性 99-100</title>
<!-- 引入jquery库 100-->
<script th:src="@{/js/jquery-3.4.1.js}" type="text/javascript"></script>
</head>
<body>
<div style="margin-left: 400px">
<h3>属性使用， 在html元素的属性上加入th</h3>
<form th:action="@{/loginServlet}" th:method="${methodAttr}">
<input th:type="text" th:name="${paramname}" th:value="${uservalue}"/><br>
<input type="button" id="btn" th:onclick="btnClick()" value="按钮"/>
</form>
</div>
</body>
<script type="text/javascript">
// 使用jquery 100
$(function (){
$("#btn").click(function (){
alert("111111")
})
})
</script>
</html>
2.3 设置颜色 100
<p th:style="${textcolor}">这是模板的例子</p>
3. each循环 101
这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与
JSTL 中的类似，此属性既可以循环遍历集合，也可以循环遍历数组及 Map.
each循环， 可以循环List，Array
语法：
在一个html标签中，使用th:each
集合循环成员,循环的状态变量:两个名称都是自定义的。 “循环的状态变量”这个名称可以不定义，默认是"集合循环成员Stat"
<div th:each="集合循环成员,循环的状态变量:${key}">
<p th:text="${集合循环成员}" ></p>
</div>
3.1 语法说明： 102
th:each="user, iterStat : ${userlist}"中的 ${userList} 是后台传过来的集合
◼ user
定义变量，去接收遍历${userList}集合中的一个数据
◼ iterStat
${userList} 循环体的信息
◼ 其中 user 及 iterStat 自己可以随便取名
◼ interStat 是循环体的信息，通过该变量可以获取如下信息
index: 当前迭代对象的 index（从 0 开始计算）
count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）
first: 布尔值，当前循环是否是第一个
last: 布尔值，当前循环是否是最后一个
注意：循环体信息 interStat 也可以不定义，则默认采用迭代变量加上 Stat 后缀，即
userStat
3.2 循环List 101
//循环List 101
@GetMapping("/eachList")
public String eachList(Model model){
List<SysUser> users = new ArrayList<>();
users.add( new SysUser(1001,"张三","m",20));
users.add( new SysUser(1002,"关羽","m",70));
users.add( new SysUser(1003,"张飞","m",60));
users.add( new SysUser(1004,"刘备","m",80));
users.add( new SysUser(1005,"孙尚香","f",50));
model.addAttribute("myusers",users);
return "eachList";
}
eachList.html
<div th:each="user,userIter:${myusers}">
<p th:text="${user.id}"></p>
<p th:text="${user.name}"></p>
<p th:text="${user.sex}"></p>
<p th:text="${user.age}"></p>
</div>
3.2.1 放入表格中显示数据 102
eachList.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>each循环 101</title>
</head>
<body>
<div style="margin-left: 400px">
<!--<div th:each="user,userIter:${myusers}">
<p th:text="${user.id}"></p>
<p th:text="${user.name}"></p>
<p th:text="${user.sex}"></p>
<p th:text="${user.age}"></p>
</div>-->
<br/>
<br/>
<table border="1" width="60%" cellpadding="0" cellspacing="0" >
<thead>
<tr>
<td> 编号</td>
<td> id 序号 </td>
<td> name </td>
<td> sex </td>
<td> age </td>
<td>姓名</td>
<td>是否是第一行</td>
</tr>
</thead>
<tbody>
<tr th:each="user:${myusers}">
<td th:text="${userStat.count}+'/'+${userStat.size}"></td>
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.sex}"></td>
<td th:text="${user.age}"></td>
<td th:text="${userStat.current.name}"></td>
<td th:text="${userStat.first}"/>
</tr>
</tbody>
</table>
</div>
</body>
</html>
3.3 循环数组 Array 104
th:each 语法同上
//循环数组 104
@GetMapping("/eachArray")
public String eachArray(Model model){
SysUser userarray[] = new SysUser[3];
userarray[0] = new SysUser(1001,"马超","男",20);
userarray[1] = new SysUser(1002,"黄忠","男",26);
userarray[2] = new SysUser(1003,"赵云","男",22);
model.addAttribute("userarray",userarray);
return "eachArray";
}eachArray.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>each循环数组 104</title>
</head>
<body>
<div style="margin-left: 400px">
<div th:each="user:${userarray}">
<p th:text="${user.id}"></p>
<p th:text="${user.name}"></p>
<p th:text="${user.sex}"></p>
<p th:text="${user.age}"></p>
<br/>
<hr/>
</div>
</div>
</body>
</html>
3.4 循环Map 105-106
在一个html标签中，使用th:each
集合循环成员,循环的状态变量:两个名称都是自定义的。 “循环的状态变量”这个名称可以不定义，默认是"集合循环成员Stat"
key:map集合中的key
value：map集合key对应的value值
<div th:each="集合循环成员,循环的状态变量:${key}">
<p th:text="${集合循环成员.key}" ></p>
<p th:text="${集合循环成员.value}" ></p>
</div>
3.4.1 map中存储引用数据类型 105
//循环Map 105
@GetMapping("/eachMap")
public String eachMap(Model model){
Map<String,SysUser> map = new HashMap<>();
map.put("user1",new SysUser(11001,"马超","男",20));
map.put("user2",new SysUser(11002,"黄忠","男",26));
map.put("user3",new SysUser(11003,"赵云","男",22));
model.addAttribute("mymap",map);
return "eachMap";
}
eachMap.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>循环Map 105</title>
</head>
<body>
<div style="margin-left: 400px">
<div th:each="map,userStat:${mymap}">
<p th:text="${map.key}"></p>
<p th:text="${map.value}"></p>
<p th:text="${map.value.id}"></p>
<p th:text="${map.value.name}"></p>
<p th:text="${userStat.count}"></p>
</div>
</div>
</body>
</html>
3.4.2 map中存储基本数类型 106
Map<String,String> strMap = new HashMap<>();
strMap.put("str1","Hello SpringBoot");
strMap.put("str2","MyBatis MySQL");
model.addAttribute("strmap",strMap);
eachMap.html
<br/>
<br/>
<div th:each="strmap:${strmap}">
<p th:text="${strmap.key}"></p>
<p th:text="${strmap.value}"></p>
</div>
3.4.3 list中存储map 106
//复杂的List<Map> 106
//将map放入到list
List<Map<String,SysUser>> listmap = new ArrayList<>();
listmap.add(map);
Map<String,SysUser> map1 = new HashMap<>();
map1.put("sanguo1",new SysUser(21001,"典韦","男",22));
map1.put("sanguo2",new SysUser(21002,"夏侯惇","男",28));
map1.put("sanguo3",new SysUser(21003,"关胜","男",16));
listmap.add(map1);
model.addAttribute("listmap",listmap);
eachMap.html
<h3>循环List《Map》 Map<String,SysUser> lm: listmap.get(0)</h3>
<div th:each="lm:${listmap}"><!--这层循环是得到list中的map-->
<!--这层循环是 循环map中的所有key，value-->
<div th:each="m:${lm}">
<p th:text="${m.key}"></p>
<p th:text="${m.value.id}"></p>
<p th:text="${m.value.name}"></p>
<p th:text="${m.value.age}"></p>
<br/>
<hr/>
</div>
<br>
<hr>
</div>
这章图片显示不全
4. 条件判断 107
4.1 th:if 107
语法：th:if=”boolean 条件” ， 条件为 true 显示体内容
th:if" : 判断语句， 当条件为true， 显示html标签体内， 反之不显示 没有else语句
重点 " " 空字符是true null是false
语法：
<div th:if=" 10 > 0 "> 显示文本内容 </div>
@GetMapping("/ifunless")
public String ifunless(Model model){
model.addAttribute("sex","m");
model.addAttribute("isLogin",true);
model.addAttribute("age",20);
model.addAttribute("name","");
model.addAttribute("isOld",null);
return "ifunless";
}ifunless.html
<div style="margin-left: 400px">
<h3> if 使用</h3>
<p th:if="${sex=='m'}">性别是男</p>
<p th:if="${isLogin}">已经登录系统</p>
<p th:if="${age > 20}">年龄大于20</p>
<!--""空字符是true-->
<p th:if="${name}">name是“”</p>
<!--null是false-->
<p th:if="${isOld}"> isOld是null</p>
</div>
4.2 th:unless 108
th:unless 是 th:if 的一个相反操作
当条件为false显示标签体内容
语法：
<div th:unless=" 10 < 0 "> 当条件为false显示标签体内容 </div>
@GetMapping("/ifunless")
public String ifunless(Model model){
model.addAttribute("sex","m");
model.addAttribute("isLogin",true);
model.addAttribute("age",20);
model.addAttribute("name","");
model.addAttribute("isOld",null);
return "ifunless";
}ifunless.html
<!-- unless 108-->
<br/>
<br/>
<div style="margin-left: 400px">
<h3>unless: 判断条件为false，显示标签体内容</h3>
<p th:unless="${sex=='f'}">性别是男的</p>
<p th:unless="${isLogin}">登录系统</p>
<p th:unless="${isOld}"> isOld是null </p>
</div>
5. switch，case判断语句 109
语法：类似 java 中的 switch，case
一旦某个 case 判断值为 true，剩余的 case 则都当做 false，“*”表示默认的
case，前面的 case 都不匹配时候，执行默认的 case
语法：
<div th:switch="要比对的值">
<p th:case="值1">
结果1
</p>
<p th:case="值2">
结果2
</p>
<p th:case="*">
默认结果
</p>
以上的case只有一个语句执行
//switch 109
@GetMapping("/switch")
public String doSwitch(Model model){
model.addAttribute("sex","m");
return "switch";
}
switch.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>switch 109</title>
</head>
<body>
<div style="margin-left: 400px">
<h3> switch 使用</h3>
<div th:switch="${sex}">
<p th:case="f">性别是女</p>
<p th:case="m">性别是男</p>
<p th:case="*">未知</p>
</div>
</div>
</body>
</html>
6. 内联 th:inline 110
th:inline 有三个取值类型 (text, javascript 和 none)
6.1 内联 text 110
内联text： 在html标签外，获取表达式的值
可以让 Thymeleaf 表达式不依赖于 html 标签，直接使用内敛表达式[[表达式]]即可获取动
态数据，要求在父级标签上加 th:inline = “text”属性
语法
<p>显示姓名是：[[${key}]]</p>
// 内联 text 110
@GetMapping("/inline")
public String inline(Model model){
model.addAttribute("sex","m");
model.addAttribute("age",20);
model.addAttribute("name","张三");
model.addAttribute("myuser" ,new SysUser(1005,"周峰","男",20));
return "inline";
}<div style="margin-left: 400px">
<h3>内联 text, 使用内联表达式显示变量的值</h3>
<div th:inline="text">
<p>我是[[${name}]]，年龄是[[${age}]]</p>
我是<span th:text="${name}"></span>,年龄是<span th:text="${age}"></span>
</div>
<div>
<p>使用内联text</p>
<p>我是[[${name}]],性别是[[${sex}]]</p>
</div>
</div>
里面的th:inline="text"可写可不写
6.2 内联javascript 111
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>内联 inline 110</title>
<!-- javascript中加入th:inline="javascript"说明js中可以使用内联 111-->
<script type="text/javascript" th:inline="javascript">
var myname = [[${name}]];
var myage = [[${age}]];
//alert("获取的模板中数据 "+ myname + ","+myage)
function fun(){
alert("单击事件，获取数据 "+ myname + ","+ [[${sex}]])
}
</script>
</head>
<body>
<div style="margin-left: 400px">
<h3>内联 text, 使用内联表达式显示变量的值</h3>
<div th:inline="text">
<p>我是[[${name}]]，年龄是[[${age}]]</p>
我是<span th:text="${name}"></span>,年龄是<span th:text="${age}"></span>
</div>
<div>
<p>使用内联text</p>
<p>我是[[${name}]],性别是[[${sex}]]</p>
<input type="button" name="btn" value="单击获取模板数据" onclick="fun()">
</div>
</div>
</body>
</html>
