thymeleaf的th:each遍历获取参数并拼接字符串

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标签也可以遍历获取参数 请见这里

三、参考文档

1、Thymleaf中th:each标签遍历list如何获取index

2、初步认识Thymeleaf：简单表达式和标签。（一）