thymeleaf的th:each的使用
一、Demo描述
如何利用th:each,在数据库中没有存放个人用户头像信息的前提下,根据用户数,“动态”生成头像。假设springboot的static中存放10张不一样的头像,avatar1.jpg ~ avatar10.jpg。
二、如何“动态”拼接字符串
1、获取状态变量
<tr th:each="user,userStat:${users}">
userStat是状态变量,如果没有显示设置状态变量,thymeleaf会默认给个“变量名+Stat"的状态变量。
对arrayList对象users遍历,使用user作为接受参数接收,使用userStat作为users下标值,通过userStat.index得到当前所处下标值;
状态变量有以下几个属性:
- index:当前迭代对象的index(从0开始计算)
- count: 当前迭代对象的index(从1开始计算)
- size:被迭代对象的大小
- current:当前迭代变量
- even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)
- first:布尔值,当前循环是否是第一个
- last:布尔值,当前循环是否是最后一个
注意userStat状态变量是一个数组,里面存放多个状态属性。如果没有注意,会报这样的异常
<tr th:each="doctor,doctorStat : ${doctorsOffline}">
<td>
<img class="rounded-circle" th:src="@{'/assets/images/xs/avatar' + (${doctorStat} % 10 + 1) + '.jpg'}" src="/assets/images/xs/avatar2.jpg" alt="user" width="40"> </td>
<td>
<a href="javascript:;">[[${doctor.username}]]</a>
</td>
<td th:if="${doctor.gender} == 0">男</td>
<td th:if="${doctor.gender} == 1">女</td>
<td>[[${doctor.teachYear}]]年</td>
<td>
<small>[[${doctor.tel}]]</small>
</td>
<td>
<small>[[${doctor.email}]]</small>
</td>
<td>
<small style="color: rgb(0,0,0)">离线</small>
</td>
</tr>
org.thymeleaf.exceptions.TemplateProcessingException: Cannot execute division: operands are "{index = 0, count = 1, size = 5, current = Doctor{id='161401080801', username='小铭', password='123456', gender=0, age=40, teachYear=7, graduatedSchool='哈尔滨理工大学', tel='15965483265', email='15963245896@qq.com'}}" and "10" (template: "/stu/home" - line 160, col 69)
2、如何拼接字符串
这里以th:src为例,th:href也同理
-
法一:
在“@{…}”中进行"xx",${xx}的两者的拼接
<tr th:each="doctor,doctorStat : ${doctorsOffline}">
<td>
<img class="rounded-circle" th:src="@{'/assets/images/xs/avatar' + (${doctorStat.count} % 10 + 1) + '.jpg'}" ...>
</td>
...
</tr>
-
法二:
在“…”中进行@{xx},“xx”,${xx}三者的拼接
<img class="rounded-circle" th:src="@{/assets/images/xs/avatar} + (${doctorStat.count} % 10 + 1) + '.jpg'" ...> </td>
-
法三:(不可用)
在“…”中进行@{xx},${xx}两者的拼接, @{.jpg}会自动加上项目名(eg /mheal/.jpg)作为路径,所以图片加载失败
<img class="rounded-circle" th:src="@{/assets/images/xs/avatar} + (${doctorStat.count} % 10 + 1) + @{.jpg}" ...> </td>
效果:
备注:
- ${…} 变量表达式,@{…} 链接url表达式
- 若要求:对头像编辑后,刷新页面,头像动态显示。thymeleaf的th:each不适合,建议用vue的v-for
- 如果点击遍历的列表中的某个对象,需要传相应对象参数给后台,此时有两种方法
1)假如用vue进行对象事件处理,及绑定点击事件@click="[[${xx}]]"时,vue获取不到thymeleaf表达式中的值,页面加载异常。
2)用thymeleaf的th:href拼凑字符串传参实现页面点击跳转 - vue的v-for标签也可以遍历获取参数 请见这里