web实验-遍历数据
# 350.web实验-遍历数据
接下来改一下小的功能以及表格的遍历功能
# 修改Dashboard
我们左侧菜单中，Dashboard（可以理解为是）默认还是跳转到index.html：
common.html源码：
<li class="active">
<a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a>
</li>
1
2
3
2
3
因此要修改为@{/main.html}
<li class="active">
<a th:href="@{/main.html}"><i class="fa fa-home"></i> <span>Dashboard</span></a>
</li>
1
2
3
2
3
# 修改退出
同理，修改退出的链接为/：
<li><a th:href="@{/}"><i class="fa fa-sign-out"></i> Log Out</a></li>
1
# 表格遍历
需求：修改Advanced table页面，使其表格的数据不是固定的，而是从服务器获取数据后渲染：
假设我们返回的是用户信息，我们先给User类加上有参和无参的Lombok注解：
package com.peterjxl.learnspringbootwebadmin.bean;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@AllArgsConstructor
@NoArgsConstructor
@Data
public class User {
private String userName;
private String password;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 修改Controller
修改方法，返回一些用户数据：
@GetMapping("/dynamic_table")
public String dynamic_table(Model model){
List<User> users = Arrays.asList(new User("zhangsan", "123456"),
new User("lisi", "123444"),
new User("haha", "aaaaa"),
new User("hehe", "aaddd"));
model.addAttribute("users", users);
return "table/dynamic_table";
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 修改HTML
接下来修改dynamic_table.html文件，将下方的那个表格中tbody标签的内容删除（从522行到900多行）；
然后通过Thymeleaf 的遍历语法 (opens new window)，来输出数据：
<table class="display table table-bordered" id="hidden-table-info">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr class="gradeX" th:each="user,stats:${users}">
<td th:text="${stats.count}"></td>
<td th:text="${user.userName}"></td>
<td>[[${user.password}]]</td>
</tr>
</tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
测试：重启项目，登录，可以看到能正常渲染数据出来
# 源码
已将本文源码上传到Gitee (opens new window)或GitHub (opens new window) 的分支demo3，读者可以通过切换分支来查看本文的示例代码
在GitHub上编辑此页 (opens new window)
上次更新: 2023/8/23 10:10:57
