SpringBoot使用thymeleaf实现一个前端表格方法详解

目录
  • 1. User 实体类
  • 2. Controller 类
  • 3. html 文件

1. User 实体类

注:这里使用了 Lombok 技术,通过 @Data 注释自动创建 get,set 方法;通过 @NoArgsConstructor 注释自动创建无参数的构造方法;通过 @AllArgsConstructor 注释自动创建有参数构造方法

如果不想使用,可以自行创建get,set 方法以及构造方法

import jdk.nashorn.internal.objects.annotations.Constructor;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@NoArgsConstructor
@AllArgsConstructor
@Data
public class User {
    private String userName;
    private String password;
}

2. Controller 类

创建一 user 的 list ,使用 addAttribute() 方法将其放入 medol 中,以便前端取出 medol 中的数据

注意:thymeleaf解析不能带 html 后缀,因此转发到 table下的dynamic_table.html 文件要写成 return "table/dynamic_table";

package com.wanqing.admin.controller;
import com.wanqing.admin.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Arrays;
import java.util.List;
@Controller
public class TableController {
    @GetMapping("/dynamic_table")
    public String dynamic_table(Model model){
        // 表格内容的遍历
        List<User> users = Arrays.asList(new User("刘婉晴", "520131"),
                new User("加油","aaa"),
                new User("不可以放弃","come on"));
        model.addAttribute("users", users);
        return "table/dynamic_table"; // thymeleaf解析不能带 html 后缀
    }
}

3. html 文件

创建 dynamic_table.html 文件在 templates 的 table 文件夹下

得到后端传入的数据的语法为 ${要操作的后端传入的数据}

  • 使用 th:each="user:${users}" 遍历得到每个 user。
  • 取出每个 user 值放入表格中时 可以使用 th:text="${user.userName}" 也可以使用[[${user.password}]]

注: stats 为自增 id,用于记录遍历到第几个 user,得到数量的方法为th:text="${stats.count}",用 逗号 与 user 隔开

        <!--body wrapper start-->
        <div class="wrapper">
        <div class="row">
        <div class="col-sm-12">
        <section class="panel">
	       <div class="panel-body">
	        <div class="adv-table">
	        <table  class="display table table-bordered table-striped" id="dynamic-table">
	        <thead> <!--标头-->
	        <tr>
	            <th>#</th>
	            <th>用户名</th>
	            <th>密码</th>
	        </tr>
	        </thead>
	        <tbody> <!--标体-->
	        <tr class="gradeX" th:each="user,stats:${users}">
	            <td th:text="${stats.count}">Trident</td>
	            <td th:text="${user.userName}">Internet</td>
	            <td>[[${user.password}]]</td>
	        </tr>
	        </tbody>
	        </table>
	        </div>
	        </div>
        </section>
        </div>
        </div>
        </div>
        <!--body wrapper end-->

到此这篇关于SpringBoot使用thymeleaf实现一个前端表格方法详解的文章就介绍到这了,更多相关SpringBoot thymeleaf内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 在SpringBoot中配置Thymeleaf的模板路径方式

    目录 配置Thymeleaf的模板路径 关于thymeleaf配置说明 配置Thymeleaf的模板路径 众所周知,Thymeleaf的模板文件默认是在项目文件夹的src\main\resources\templates目录下的. 不过出于特殊需要,要修改其路径怎么办呢? 在我们的项目配置文件application.properties中,添加如下配置: #Thymeleaf配置 spring.thymeleaf.prefix=自定义的Thymeleaf的模板位置,jar内部以classpath

  • SpringBoot+thymeleaf+ajax实现局部刷新详情

    目录 前言 什么是局部刷新? 优势和弊端? 实现流程 案列 前言 什么是局部刷新? 简而言之,就是当我发送一个请求到后端后拿到数据后返回当前 页面不会对整个页面进行重载而只对当前请求的模块进行刷新. 优势和弊端? 优势: 用户体验好,不需要对页面进行重载 利于开发人员开发,提高开发效率 前后端完全分离 弊端: 不利于优化!第一次从服务器端获取的内容不包含需要动态绑定的数据,所以页面的源代码中没有这些内容,不利于收录,后期通过js添加到页面中的内容,并不会写在页面的源代码中~ 时间上的些许浪费,没

  • SpringBoot整合Thymeleaf与FreeMarker视图层技术

    目录 整合Thymeleaf 1. 创建工程添加依赖 2. 配置Thymeleaf 3. 配置控制器 4. 创建视图 5. 运行 整合FreeMarker 1. 创建项目添加依赖 2. 配置FreeMarker 3. 控制器 4. 创建视图 5. 运行 整合Thymeleaf Thymeleaf是新一代Java模板引擎,类似于Velocity.FreeMarker等传统Java模板引擎.与传统Java模板引擎不同的是,Thymeleaf支持HTML原型,既可以让前端工程师在浏览器中直接打开查看样

  • SpringBoot+Thymeleaf实现生成PDF文档

    目录 前言 一.引入依赖 二.application.yml配置 三.PDF相关配置 四.Controller 五.生成PDF文件响应效果 前言 温馨提示:本博客使用Thymeleaf模板引擎实现PDF打印仅供参考: 在阅读该博客之前,先要了解一下Thymeleaf模板引擎,因为是使用Thymeleaf模板引擎实现的PDF打印的, Thymeleaf是一个现代的服务器端 Java 模板引擎,适用于 Web 和独立环境. Thymeleaf 的主要目标是为您的开发工作流程带来优雅的自然模板——HT

  • SpringBoot超详细讲解Thymeleaf模板引擎

    Jsp是最早的模板技术,用来处理视图层的,用来做数据显示的模板 B S结构: B:浏览器:用来显示数据,发送请求,没有处理能力 发送一个请求,访问a.jsp,a.jsp在服务器端变成Servlet,在将输出的数据返回给浏览器,浏览器就可以看到结果数据,jsp最终翻译过来也是个html页面 模板技术你就可以把它们当成字符串的替换,比如说:这里{data}这里有一个字符串,你把它换成固定值其他值,但是这个替换有一些附加的功能,通过模板技术处理视图层的内容 第一个例子: pom.xml:Thymele

  • SpringBoot thymeleaf实现饼状图与柱形图流程介绍

    今天给大家带来的是一个用SpringBoot + thymeleaf显示出饼状图和柱形图 首先我们先创建项目 注意:创建SpringBoot项目时一定要联网不然会报错 项目创建好后我们首先对 application.yml 进行编译 #指定端口号server: port: 8888#配置mysql数据源spring:  datasource:    driver-class-name: com.mysql.cj.jdbc.Driver    url: jdbc:mysql://localhost

  • SpringBoot使用thymeleaf实现前端表格

    目录 1. User实体类 2. Controller 类 3. html文件 1. User实体类 注:这里使用了 Lombok 技术,通过 @Data 注释自动创建 get,set 方法:通过 @NoArgsConstructor 注释自动创建无参数的构造方法:通过 @AllArgsConstructor 注释自动创建有参数构造方法 如果不想使用,可以自行创建get,set 方法以及构造方法 import jdk.nashorn.internal.objects.annotations.Co

  • SpringBoot使用thymeleaf实现一个前端表格方法详解

    目录 1. User 实体类 2. Controller 类 3. html 文件 1. User 实体类 注:这里使用了 Lombok 技术,通过 @Data 注释自动创建 get,set 方法:通过 @NoArgsConstructor 注释自动创建无参数的构造方法:通过 @AllArgsConstructor 注释自动创建有参数构造方法 如果不想使用,可以自行创建get,set 方法以及构造方法 import jdk.nashorn.internal.objects.annotations

  • SpringBoot+Vue实现EasyPOI导入导出的方法详解

    目录 前言 一.为什么做导入导出 二.什么是 EasyPOI 三.项目简介 项目需求 效果图 开发环境 四.实战开发 核心源码 前端页面 后端核心实现 五.项目源码 小结 前言 Hello~ ,前后端分离系列和大家见面了,秉着能够学到知识,学会知识,学懂知识的理念去学习,深入理解技术! 项目开发过程中,很大的需求都有 导入导出功能,我们依照此功能,来实现并还原真实企业开发中的实现思路 一.为什么做导入导出 为什么做导入导出 导入 在项目开发过程中,总会有一些统一的操作,例如插入数据,系统支持单个

  • SpringBoot集成JWT实现登陆验证的方法详解

    1:首先,我们需要在项目中导入两个依赖: <dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt</artifactId> <version>3.10.3</version> </dependency> <dependency> <groupId>cn.hutool</groupId> <artifa

  • SpringBoot整合EasyExcel进行大数据处理的方法详解

    目录 EasyExcel 需要的Maven 基础读案例 操作的excel 实体类 读取监听器 测试 基础写案例 实体类 测试 Excel模板方式 准备模块 实体类 测试 EasyExcel EasyExcel文档 我用过Poi和EasyPoi这些工具总体来说: POI 优点我觉得自由,但是迎来的就是复杂度,和大数据量时候性能的缺点 EasyPoi基于POI 的二次封装,解决了大部分的常用场景,简化了代码,但是特别复杂表格处理还是不行,而且性能的话和poi差不多,简单来说就是简化了Poi的操作,少

  • Springboot配置返回日期格式化五种方法详解

    目录 格式化全局时间字段 1.前端时间格式化(不做无情人) 2.SimpleDateFormat格式化(不推荐) 3.DateTimeFormatter格式化(不推荐) 4.全局时间格式化(推荐) 实现原理分析 5.部分时间格式化(推荐) 总结 应急就这样 格式化全局时间字段 在yml中添加如下配置: spring.jackson.date-format=yyyy-MM-dd HH:mm:ss 或者 spring: jackson: ## 格式为yyyy-MM-dd HH:mm:ss date-

  • python中读入二维csv格式的表格方法详解(以元组/列表形式表示)

    如何去读取一个没有表头的二维csv文件(如下图所示)? 并以元组的形式表现数据: ((1.0, 0.0, 3.0, 180.0), (2.0, 0.0, 2.0, 180.0), (3.0, 0.0, 1.0, 180.0), (4.0, 0.0, 0.0, 180.0), (5.0, 0.0, 3.0, 178.0)) 方法一,使用python内建的数据处理库: #python自带的库 rows = open('allnodes.csv','r',encoding='utf-8').readl

  • SpringBoot使用AOP统一日志管理的方法详解

    目录 前言 实现 1.引入依赖 2.定义logback配置 3.编写切面类 4.测试 前言 请问今天您便秘了吗?程序员坐久了真的会便秘哦,如果偶然点进了这篇小干货,就麻烦您喝杯水然后去趟厕所一边用左手托起对准嘘嘘,一边用右手滑动手机看完本篇吧. 实现 本篇AOP统一日志管理写法来源于国外知名开源框架JHipster的AOP日志管理方式 1.引入依赖 <!-- spring aop --> <dependency> <groupId>org.springframework

  • SpringBoot处理接口幂等性的两种方法详解

    目录 1. 接口幂等性实现方案梳理 1.1 基于 Token 1.2 基于请求参数校验 2. 基于请求参数的校验 在上周发布的 TienChin 项目视频中,我和大家一共梳理了六种幂等性解决方案,接口幂等性处理算是一个非常常见的需求了,我们在很多项目中其实都会遇到.今天我们来看看两种比较简单的实现思路. 1. 接口幂等性实现方案梳理 其实接口幂等性的实现方案还是蛮多的,我这里和小伙伴们分享两种比较常见的方案. 1.1 基于 Token 基于 Token 这种方案的实现思路很简单,整个流程分两步:

  • SpringBoot优雅地实现全局异常处理的方法详解

    目录 前言 异常工具 异常处理 异常捕捉 前言 在前一节的学习中,慕歌带大家使用了全局结果集返回,通过使用全局结果集配置,优雅的返回后端数据,为前端的数据拿取提供了非常好的参考.同时通过不同的状态码返回,我们能够清晰的了解报错的位置,排除错误.如果大家有需要,可以使用我提供的的同一结果集以及状态码,并且可以使用全局异常拦截,实现异常的标准返回.接下来,我们一起来了解如何使用全局异常处理吧! 异常工具 先定义一个合适 的异常处理类,在之后的异常都会以这种格式返回前端,前端根据我们的异常进行自己的返

  • SpringBoot 常用读取配置文件的三种方法详解

    目录 前言 一.使用 @Value 读取配置文件 二.使用 @ConfigurationProperties 读取配置文件 1.类上添加@Configuration注解 2.使用@EnableConfigurationProperties注解 3.使用@ConfigurationPropertiesScan扫描 三.使用 Environment 读取配置文件 四.常用的几种数据结构配置读取 我们在SpringBoot框架进行项目开发中该如何优雅的读取配置呢?或者说对于一些List或者Map应该如

随机推荐