SpringBoot使用thymeleaf实现前端表格

 更新时间:2022年10月21日 10:44:33   作者:刘婉晴  
虽然现在流行前后端分离,但是后端模版在一些关键地方还是非常有用的,例如邮件模版、代码模版等。当然也不排除一些古老的项目后端依然使用动态模版。Thymeleaf 简洁漂亮、容易理解,并且完美支持 HTML5,可以直接打开静态页面,同时不新增标签,只需增强属性

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Java和SQL实现取两个字符间的值

    Java和SQL实现取两个字符间的值

    这篇文章主要介绍了Java和SQL实现取两个字符间的值操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-06-06
  • Spring 静态变量/构造函数注入失败的解决方案

    Spring 静态变量/构造函数注入失败的解决方案

    我们经常会遇到一下问题:Spring对静态变量的注入为空、在构造函数中使用Spring容器中的Bean对象,得到的结果为空。不要担心,本文将为大家介绍如何解决这些问题,跟随小编来看看吧
    2021-11-11
  • SpringMVC HttpMessageConverter报文信息转换器

    SpringMVC HttpMessageConverter报文信息转换器

    这篇文章主要为大家介绍了SpringMVC HttpMessageConverter报文信息转换器,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • Java邮件发送程序(可以同时发给多个地址、可以带附件)

    Java邮件发送程序(可以同时发给多个地址、可以带附件)

    不错的功能比较齐全的邮件发送程序源码
    2008-07-07
  • SpringBoot注册web组件的实现方式

    SpringBoot注册web组件的实现方式

    Servlet是Java Web应用程序的基础,它提供了处理客户端请求的机制,Servlet三大组件是指Servlet、Filter和Listener,它们是Java Web应用程序的核心组件,本文将给大家介绍一下SpringBoot注册web组件的实现方式,需要的朋友可以参考下
    2023-10-10
  • java实现FTP文件上传与文件下载

    java实现FTP文件上传与文件下载

    这篇文章主要为大家详细介绍了java实现FTP文件上传与文件下载的相关资料,通过以下两种方式实现,通过JDK自带的API实现,二是通过Apache提供的API是实现,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 详解springboot中各个版本的redis配置问题

    详解springboot中各个版本的redis配置问题

    这篇文章主要介绍了详解springboot中各个版本的redis配置问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Java的正则表达式深入分析

    Java的正则表达式深入分析

    本篇文章介绍了,Java的正则表达式深入分析。需要的朋友参考下
    2013-04-04
  • SpringBoot项目的配置文件中设置server.port不生效问题

    SpringBoot项目的配置文件中设置server.port不生效问题

    这篇文章主要介绍了SpringBoot项目的配置文件中设置server.port不生效问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • Springboot mybais配置多数据源过程解析

    Springboot mybais配置多数据源过程解析

    这篇文章主要介绍了Springboot+mybais配置多数据源过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03

最新评论