【SpringBoot 】结合thymeleaf的一个前端表格展示的小小Demo

刘婉晴

已于 2022-10-07 16:51:34 修改

阅读量580

点赞数 1

分类专栏： # SpringBoot 文章标签： spring boot 前端 java

于 2022-10-07 16:45:10 首次发布

本文链接：https://blog.csdn.net/liuwanqing233333/article/details/127196042

版权

SpringBoot 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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