从01开始 从01开始
首页
  • 计算机科学导论
  • 数字电路
  • 计算机组成原理

    • 计算机组成原理-北大网课
  • 操作系统
  • Linux
  • Docker
  • 计算机网络
  • 计算机常识
  • Git
  • JavaSE
  • Java高级
  • JavaEE

    • Ant
    • Maven
    • Log4j
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • Servlet
  • Spring
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC
  • SpringBoot
  • 学习网课的心得
  • 输入法
  • 节假日TodoList
  • 其他
  • 关于本站
  • 网站日记
  • 友人帐
  • 如何搭建一个博客
GitHub (opens new window)

peterjxl

人生如逆旅,我亦是行人
首页
  • 计算机科学导论
  • 数字电路
  • 计算机组成原理

    • 计算机组成原理-北大网课
  • 操作系统
  • Linux
  • Docker
  • 计算机网络
  • 计算机常识
  • Git
  • JavaSE
  • Java高级
  • JavaEE

    • Ant
    • Maven
    • Log4j
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • Servlet
  • Spring
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC
  • SpringBoot
  • 学习网课的心得
  • 输入法
  • 节假日TodoList
  • 其他
  • 关于本站
  • 网站日记
  • 友人帐
  • 如何搭建一个博客
GitHub (opens new window)
  • JavaSE

  • JavaSenior

  • JavaEE

  • JavaWeb

  • Spring

  • 主流框架

  • SpringMVC

  • SpringBoot

    • SpringBoot教程-尚硅谷

      • SpringBoot课程介绍
      • Spring和SpringBoot
      • HelloWorld
      • 了解自动配置原理
      • 底层注解-@Configuration详解
      • 底层注解-@Import导入组件
      • 底层注解-@Conditional条件装配
      • 原生配置文件引入-@ImportResource
      • 底层注解-配置绑定@ConfigurationProperties
      • 自动配置原理
      • 自动配置流程
      • Lombok简化开发
      • DevTools
      • Spring-Initailizr
      • 配置文件-Yaml用法
      • Web开发简介
      • web开发-静态资源规则于定制化
      • 静态资源配置原理
      • Rest映射及源码解析
      • 请求映射原理
      • 常用参数注解使用
      • MatrixVariable:矩阵变量
      • 各种类型参数解析原理
      • Servlet-API参数解析原理
      • Model、Map参数解析原理
      • 自定义对象参数绑定原理
      • 自定义Converter原理
      • 数据响应原理
      • 内容协商原理
      • 基于请求参数的内容原理
      • 自定义MessageConverter原理
      • Thymeleaf初体验
      • web实验-后台管理系统
      • web实验-抽取公共页面
      • web实验-遍历数据
        • 修改​Dashboard​​
        • 修改退出
        • 表格遍历
        • 修改Controller
        • 修改HTML
        • 源码
      • 源码分析-视图解析器与视图
      • 拦截器-登录检查与静态资源放行
      • 拦截器的执行时机和原理
      • 单文件和多文件上传的使用
      • 文件上传原理
      • 错误处理机制
      • 错误处理-底层组件源码分析
      • 异常处理流程
      • 几种异常处理原理
      • Web原生对象注入
      • 嵌入式Servlet容器
      • 定制化原理
      • 数据库场景的自动配置分析和整合测试
      • 自定义方式整合Druid
      • 通过starter整合Druid
      • 整合Mybatis
      • 使用注解整合Mybatis
      • 整合MybatisPlus操作数据库
      • MybatisPlus-列表分页展示
      • 整合Redis
      • 单元测试-Junit5
      • 单元测试-断言机制
      • 单元测试-前置条件
      • 单元测试-嵌套测试
      • 单元测试-参数化测试
      • 指标监控-基本概念
      • 指标监控-配置EndPoint
      • 指标监控-可视化
      • 原理解析-Profile功能
      • 配置文件深入
      • 自定义Starter
      • SpringApplication初始化过程
      • SpringBoot完整启动过程
      • SpringBoot
  • Java并发

  • Java源码

  • JVM

  • 韩顺平

  • Java
  • Java
  • SpringBoot
  • SpringBoot教程-尚硅谷
2023-08-22
目录

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>
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

‍

# 修改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,读者可以通过切换分支来查看本文的示例代码

在GitHub上编辑此页 (opens new window)
上次更新: 2023/8/23 10:10:57
web实验-抽取公共页面
源码分析-视图解析器与视图

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

Theme by Vdoing | Copyright © 2022-2023 粤ICP备2022067627号-1 粤公网安备 44011302003646号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式