快捷導(dǎo)航

SpringBoot使用thymeleaf實(shí)現(xiàn)前端表格

更新時(shí)間：2022年10月21日 10:44:33 作者：劉婉晴

雖然現(xiàn)在流行前后端分離，但是后端模版在一些關(guān)鍵地方還是非常有用的，例如郵件模版、代碼模版等。當(dāng)然也不排除一些古老的項(xiàng)目后端依然使用動(dòng)態(tài)模版。Thymeleaf 簡潔漂亮、容易理解，并且完美支持 HTML5，可以直接打開靜態(tài)頁面，同時(shí)不新增標(biāo)簽，只需增強(qiáng)屬性

1. User實(shí)體類

注：這里使用了 Lombok 技術(shù)，通過 @Data 注釋自動(dòng)創(chuàng)建 get，set 方法；通過 @NoArgsConstructor 注釋自動(dòng)創(chuàng)建無參數(shù)的構(gòu)造方法；通過 @AllArgsConstructor 注釋自動(dòng)創(chuàng)建有參數(shù)構(gòu)造方法

如果不想使用，可以自行創(chuàng)建get，set 方法以及構(gòu)造方法

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 類

創(chuàng)建一 user 的 list ，使用 addAttribute() 方法將其放入 medol 中，以便前端取出 medol 中的數(shù)據(jù)

注意：thymeleaf解析不能帶 html 后綴，因此轉(zhuǎn)發(fā)到 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){
        // 表格內(nèi)容的遍歷
        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文件

創(chuàng)建 dynamic_table.html 文件在 templates 的 table 文件夾下

得到后端傳入的數(shù)據(jù)的語法為 ${要操作的后端傳入的數(shù)據(jù)}

使用 th:each="user:${users}" 遍歷得到每個(gè) user。
取出每個(gè) user 值放入表格中時(shí) 可以使用 th:text="${user.userName}" 也可以使用[[${user.password}]]

注： stats 為自增 id，用于記錄遍歷到第幾個(gè) user，得到數(shù)量的方法為th:text="${stats.count}"，用逗號(hào) 與 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> <!--標(biāo)頭-->
	        <tr>
	            <th>#</th>
	            <th>用戶名</th>
	            <th>密碼</th>
	        </tr>
	        </thead>
	        <tbody> <!--標(biāo)體-->
	        <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-->

到此這篇關(guān)于SpringBoot使用thymeleaf實(shí)現(xiàn)前端表格的文章就介紹到這了,更多相關(guān)SpringBoot thymeleaf內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: