广告
返回顶部
首页 > 资讯 > 后端开发 > Python >SpringBoot使用thymeleaf实现前端表格
  • 399
分享到

SpringBoot使用thymeleaf实现前端表格

SpringBootthymeleafSpringBootthymeleaf使用 2022-11-13 18:11:16 399人浏览 安东尼

Python 官方文档:入门教程 => 点击学习

摘要

目录1. User实体类2. Controller 类3. html文件1. User实体类 注:这里使用了 Lombok 技术,通过 @Data 注释自动创建 get,set 方法

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

--结束END--

本文标题: SpringBoot使用thymeleaf实现前端表格

本文链接: https://www.lsjlt.com/news/169853.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • SpringBoot使用thymeleaf实现前端表格
    目录1. User实体类2. Controller 类3. html文件1. User实体类 注:这里使用了 Lombok 技术,通过 @Data 注释自动创建 get,set 方法...
    99+
    2022-11-13
    SpringBoot thymeleaf SpringBoot thymeleaf使用
  • SpringBoot使用thymeleaf实现一个前端表格方法详解
    目录1. User 实体类2. Controller 类3. html 文件1. User 实体类 注:这里使用了 Lombok 技术,通过 @Data 注释自动创建 get,set...
    99+
    2022-11-13
  • 如何实现前端表格自动计算
    这篇文章将为大家详细讲解有关如何实现前端表格自动计算,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。序言当我的团队进行税务系统模块开发的时候,我发现他们需要花费80%的时间去解决计算问题,尤其体现在表格(G...
    99+
    2023-06-08
  • vue实现纯前端表格滚动分页加载
    本文实例为大家分享了vue实现表格滚动分页加载的具体代码,供大家参考,具体内容如下 实现效果 实现过程 <div     style="width: 100%; overfl...
    99+
    2022-11-13
  • 怎么在Springboot中使用Thymeleaf和Jpa实现登录
    本篇文章为大家展示了怎么在Springboot中使用Thymeleaf和Jpa实现登录,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。首先要创建一个springboot项目添加以下依赖项pom.xml...
    99+
    2023-06-15
  • Vue结合Springboot实现用户列表单页面(前后端分离)
    目录用户列表页面开发项目介绍1、前端html页面编写2、springboot框架搭建2.1、项目创建2.2、连接数据库2.3、项目完整依赖3、编写entity层4、查询用户信息4.1...
    99+
    2022-11-12
  • vue如何实现纯前端表格滚动分页加载
    今天小编给大家分享一下vue如何实现纯前端表格滚动分页加载的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。实现效果实现过程&l...
    99+
    2023-06-29
  • SpringBoot使用WebSocket实现前后端交互的操作方法
    目录背景实现一、导入依赖二、新建WebSocket配置类,注入Bean三、新建WebSocket服务端,在其中处理websocket逻辑四、客户端实现,可以借助FreeMarker模...
    99+
    2022-11-13
  • springboot vue接口测试前后端实现模块树列表功能
    目录基于 springboot+vue 的测试平台一、存放接口的js文件二、在vue文件中调用接口1. 触发接口2. 调用接口三、实现选择项目功能1. 后端增加获取所有项目接口2. ...
    99+
    2022-11-13
  • springboot vue测试前端项目管理列表分页功能实现
    目录基于 springboot+vue 的测试平台开发一、前后端调通1. 请求后端接口2. 项目列表页面3. 调整接口返回的时间格式问题二、实现列表数据显示1. 使用element ...
    99+
    2022-11-13
  • springboot vue接口测试前端动态增删表单功能实现
    目录基于 springboot+vue 的测试平台开发页面实现1. 基础信息部分2. 请求参数部分3. 响应内容部分基于 springboot+vue 的测试平台开发 继续更新 目前...
    99+
    2022-11-13
  • 怎么用sort()函数与文件碎片实现表格的前端排序
    本篇内容介绍了“怎么用sort()函数与文件碎片实现表格的前端排序”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!表格排序在网页的利用也很多,...
    99+
    2023-06-27
  • springboot 使用websocket技术主动给前端发送消息的实现
    目录使用websocket技术主动给前端发送消息WebSocketConfigWebSocketServerwebsocket基础入门-前端发送消息项目结构如下图使用websocke...
    99+
    2022-11-12
  • 使用SpringBoot+EasyExcel+Vue实现excel表格的导入和导出详解
    目录一、导入和导出二、导出数据为excel实现过程三、将excel中的数据导入到数据库中一、导入和导出 导入:通过解析excel表格中的数据,然后将数据放到一个集合中,接着通过对持久...
    99+
    2022-11-13
  • Springboot运用vue+echarts前后端交互实现动态圆环图
    目录前言一、环境配置1.1 安装acharts1.2 全局引用二、圆环图前端实现2.1 先在vue页面添加渲染盒子2.2 前端逻辑实现部分2.3 展示(可按自己需求更改前端样式)三、...
    99+
    2022-11-12
  • 如何使用director.js实现前端路由
    这篇文章主要介绍了如何使用director.js实现前端路由,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。director.js是什么? 理...
    99+
    2022-10-19
  • .Net使用SuperSocket框架实现WebSocket前端
    本文内容是搭配后端使用的,没看过WebSocket后端实现的童鞋们戳这里 咳咳,其实前端实现相对就容易很多了,因为我们有JavaScript WebSocket Api,它看上来大致...
    99+
    2022-11-13
  • Swift使用表格组件实现单列表
    本文实例为大家分享了Swift使用表格组件实现单列表的具体代码,供大家参考,具体内容如下 1、样例说明: (1)列表内容从Controls.plist文件中读取,类型为Array 。...
    99+
    2022-11-13
  • react中useState使用:如何实现在当前表格直接更改数据
    目录如何实现在当前表格直接更改数据需求效果如下具体做法useState修改对象的字段如何实现在当前表格直接更改数据 需求 用户点击修改按钮时直接在弹出框的当前页面内直接再次修改点击行...
    99+
    2022-11-13
    react使用useState 表格更改数据 react中useState
  • 使用Django怎么实现前后端登录
    这期内容当中小编将会给大家带来有关使用Django怎么实现前后端登录,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。前端登录1. login.vue<template>  &...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作