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

因此要修改为 @{/main.html}

<li class="active">
    <a th:href="@{/main.html}"><i class="fa fa-home"></i> <span>Dashboard</span></a>
</li>

1
2
3

# 修改退出

同理，修改退出的链接为 /：

<li><a th:href="@{/}"><i class="fa fa-sign-out"></i> Log Out</a></li>

‍

# 表格遍历

需求：修改 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

‍

# 修改 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

‍

# 修改 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

‍ 测试：重启项目，登录，可以看到能正常渲染数据出来

# 源码

已将本文源码上传到 Gitee (opens new window) 或 GitHub (opens new window) 的分支 demo3，读者可以通过切换分支来查看本文的示例代码

上次更新: 2025/6/3 09:31:54

← web 实验-抽取公共页面源码分析-视图解析器与视图→