三.四 each 循环 显示
三.四.一 后端响应
/** * for 循环展示 * @param model * @return */ @RequestMapping("/for") public String forModel(Model model){ model.addAttribute("title","学习 Thymeleaf的If标签"); //放置 java bean 对象 User user=new User(); user.setName("岳泽霖"); user.setAge(26); user.setDescription("一个快乐的程序员"); model.addAttribute("user",user); //放置if 语句 //放置foreach 语句 String[] hobbies=new String[]{"看书","编程","打游戏"}; model.addAttribute("hobbies",hobbies); List<User> userList=getUserList(); model.addAttribute("userList",userList); return "for"; }
返回到首页
三.四.二 前端页面 for.html
<!doctype html> <!--注意：引入thymeleaf的名称空间--> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>Welcome <span th:text="${title}"/></title> <link rel="StyleSheet" th:href="@{webjars/bootstrap/3.4.1/css/bootstrap.css}" type="text/css"> </head> <body class="container"> <h1>Java Bean 展示信息</h1> 我的名字是: <span th:text="${user.name}"/> 年龄是: <span th:text="${user['age']}"/> 描述是: <textarea th:block th:text="${user.getDescription()}"/> <h1>循环 th:each 的处理</h1> 我的爱好: <div th:each="hobby:${hobbies}"> <span th:text="${hobby}"></span> </div> <table class="table table-hover"> <th> <td>id编号</td> <td>名称</td> <td>年龄</td> <td>性别</td> <td>描述</td> </th> <th:block th:each="u:${userList}"> <tr> <td></td> <td th:text="${u.id}"></td> <td th:text="${u.name}"></td> <td th:text="${u.age}"></td> <td th:text="${u.sex=='男'}?'男':'女'"> </td> <td th:text="${u.description}"></td> </tr> </th:block> </table> <script type="text/javascript" th:src="@{webjars/jquery/3.5.1/jquery.js}"></script> <script type="text/javascript" th:src="@{webjars/bootstrap/3.4.1/js/bootstrap.js}"></script> </body> </html>
引入 thymeleaf 的名称空间
<!--注意：引入thymeleaf的名称空间--> <html lang="en" xmlns:th="http://www.thymeleaf.org">
th:each 表示循环处理
也可以
<th:block th:each="u,stat:${userList}"> <tr> <td></td> <td th:text="${u.id}"></td> <td th:text="${u.name}"></td> <td th:text="${u.age}"></td> <td th:text="${u.sex=='男'}?'男':'女'"> </td> <td th:text="${u.description}"></td> </tr> </th:block>
stat对象包含以下属性：
- index，从0开始的角标
- count，元素的个数，从1开始
- size，总元素个数
- current，当前遍历到的元素
- even/odd，返回是否为奇偶，boolean值
- first/last，返回是否为第一或最后，boolean值
进行处理.
三.四.三 响应展示
通过控制器 进行响应,会将数据展示出来。
三.五 js里面引入数据显示
三.五.一 后端响应
@RequestMapping("/myjs") public String myjs(Model model){ model.addAttribute("title","学习 Thymeleaf的If标签"); //放置 java bean 对象 User user=new User(); user.setName("岳泽霖"); user.setAge(26); user.setDescription("一个快乐的程序员"); model.addAttribute("user",user); return "myjs"; }
返回到首页
三.五.二 前端页面 myjs.html
<!doctype html> <!--注意：引入thymeleaf的名称空间--> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>Welcome <span th:text="${title}"/></title> <link rel="StyleSheet" th:href="@{webjars/bootstrap/3.4.1/css/bootstrap.css}" type="text/css"> </head> <body class="container"> <h1>Java Bean 展示信息</h1> 我的名字是: <span th:text="${user.name}"/> 年龄是: <span th:text="${user['age']}"/> 描述是: <textarea th:block th:text="${user.getDescription()}"/> <script th:inline="javascript"> const user = /*[[${user}]]*/ {}; const age = /*[[${user.age}]]*/ 24; const name = /*[[${user.name}]]*/ "两个蝴蝶飞"; console.log(user); console.log(age) console.log(name) </script> <script type="text/javascript" th:src="@{webjars/jquery/3.5.1/jquery.js}"></script> <script type="text/javascript" th:src="@{webjars/bootstrap/3.4.1/js/bootstrap.js}"></script> </body> </html>
引入 thymeleaf 的名称空间
<!--注意：引入thymeleaf的名称空间--> <html lang="en" xmlns:th="http://www.thymeleaf.org">
使用 th:inline ， 通过 /*[[Thymeleaf表达式]]*/ 默认值 进行处理
三.五.三 响应展示
通过控制器 进行响应,会将数据展示出来。
本章节的代码放置在 github 上:
https://github.com/yuejianli/springboot/tree/develop/SpringBoot_Thymeleaf
谢谢您的观看，如果喜欢，请关注我，再次感谢 !!!
