SpringBoot的视图技术(3)

76 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第21天,点击查看活动详情

1.循环迭代标签<th:each>

th:each 常用语法

• th:each中迭代对象的类型:java.util.List、java.util.Map、数组等。

• th:each循环迭代的基本语法:th:each="obj,iterStat:${objList}"

• 使用循环迭代的常用html标签元素有哪些?可以在div、tr、li 等标签元素中使用;

2.th:each 循环迭代的内置方法介绍

<table border="1">

<tr>

<td>序号</td>

<td>用户名</td>

<td>密码</td>

</tr>

<tr th:each="user :${users}">

<td th:text="${user.username}"></td>

<td th:text="${user.password}"></td>

</tr>

</table>

最后的输出运行结果:

image.png

3.循环迭代下标变量

image.png

stat称作状态变量,属性有:

• index: 当前迭代对象的迭代索引,从0开始,这是索引属性;

• count: 当前迭代对象的迭代索引,从1开始,这个是统计属性;

• size: 迭代变量元素的总量,这是被迭代对象的大小属性;

• current: 当前迭代变量;

• even/odd: 布尔值,当前循环是否是偶数/奇数(从0开始计算);

• first: 布尔值,当前循环是否是第一个;

• last: 布尔值,当前循环是否是最后一个;

案例:按照前面的步骤,完成一个登录页面的设计。

1、创建Web控制类:LoginController

image.png

2、创建模板页面login.html,并引入静态资源文件

image.png

3、创建模板页面login.html,并引入静态资源文件

在标签中引入css文件 th:href="@{...}"

image.png

image.png

4.整合效果测试:http://localhost:8080/toLoginPage

image.png

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第21天,点击查看活动详情