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

第SpringBoot使用thymeleaf實(shí)現(xiàn)前端表格目錄1.User實(shí)體類2.Controller類3.html文件

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)造方法

importernal.objects.annotations.Constructor;

importlombok.AllArgsConstructor;

importlombok.Data;

importlombok.NoArgsConstructor;

@NoArgsConstructor

@AllArgsConstructor

@Data

publicclassUser{

privateStringuserName;

privateStringpassword;

}

2.Controller類

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

注意：thymeleaf解析不能帶html后綴，因此轉(zhuǎn)發(fā)到table下的dynamic_table.html文件要寫成returntable/dynamic_table

packagecom.wanqing.admin.controller;

importcom.wanqing.admin.bean.User;

importorg.springframework.stereotype.Controller;

importorg.springframework.ui.Model;

importorg.springframework.web.bind.annotation.GetMapping;

importjava.util.Arrays;

importjava.util.List;

@Controller

publicclassTableController{

@GetMapping("/dynamic_table")

publicStringdynamic_table(Modelmodel){

//表格內(nèi)容的遍歷

ListUserusers=Arrays.asList(newUser("劉婉晴","520131"),

newUser("加油","aaa"),

newUser("不可以放棄","comeon"));

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

!--bodywrapperstart--

div

div

div

section

div

div

tableid="dynamic-table"

thead!--標(biāo)頭--

th#/th

th用戶名/th

th密碼/th

/tr

/thead

tbody!--標(biāo)體--

trth:each="user,stats:${users}"

tdth:text="${stats.count}"Trident/td

tdth:text="${user.userName}"Internet/td

td[[${user.password}]]/td

/tr