请选择 进入手机版 | 继续访问电脑版
本站特色:极好的技术研究氛围!所有技术交流,必有回复!

疯狂Java联盟

 找回密码
 加入联盟
查看: 116|回复: 0

Spring Boot2.0连载(29)-- 测试Thymeleaf循环

[复制链接]
发表于 2018-5-15 20:47:34 | 显示全部楼层 |阅读模式
本帖最后由 xiaowenji 于 2018-5-16 20:27 编辑

更多Spring Boot2.0的知识敬请期待疯狂软件著作《Spring Boot企业应用实战》上市

Index.html:
  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-4">
  4.             <a th:href="@{eachtest}">测试循环</a><br/><br/>
  5.         </div>
  6.     </div>
  7. </div>
复制代码


Index.html中有一个超链接,用来测试thymeleaf的循环。

  1. import java.util.ArrayList;
  2. import java.util.List;
  3. import javax.servlet.http.HttpServletRequest;
  4. import javax.servlet.http.HttpSession;
  5. import org.fkit.springboot.thymeleaftest.domain.Book;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.context.request.WebRequest;

  9. @Controller
  10. public class ThymeleafController {
  11.     /*
  12.      * 保存数据到作用范围域,用于测试Thymeleaf的循环获取数据
  13.      * */
  14.     @RequestMapping("/eachtest")
  15.     public String eachtest(WebRequest webRequest){
  16.         // 模拟数据库数据保存到List集合
  17.         List<Book> books = new ArrayList<>();
  18.         books.add(new Book(1, "疯狂Java讲义", "java.jpg", "李刚 编著", 109.00));
  19.         books.add(new Book(2, "轻量级Java EE企业应用实战", "ee.jpg", "李刚 编著", 108.00));
  20.         books.add(new Book(3, "Spring+MyBatis应用实战", "SpringMyBatis.jpg", "疯狂软件 编著", 58.00));
  21.         books.add(new Book(4, "疯狂Android讲义", "android.jpg", "李刚 编著", 108.00));
  22.         books.add(new Book(5, "疯狂Ajax开发", "ajax.jpg", "李刚 编著", 79.00));
  23.         // 保存数据到request作用范围域
  24.         webRequest.setAttribute("books", books, webRequest.SCOPE_REQUEST);
  25.         return "success3";
  26.     }
  27.    
  28. }
复制代码



eachtest方法用来响应第三个请求<a th:href="@{eachtest}">测试循环</a>,eachtest方法中创建了5个Book对象分别保存了5本图书信息,再创建了一个List集合,将所有图书信息保存到List集合,最后将List集合保存到request作用范围域当中。然后返回success3.html。

success3.html:
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8"></meta>
  5. <title>thymeleaf示例</title>
  6. <link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
  7. <link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
  8. <script type="text/javascript" th:src="@{js/jQuery-1.11.0.min.js}"></script>
  9. <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
  10. </head>
  11. <body>
  12. <div class="panel panel-primary">
  13.     <div class="panel-heading">
  14.         <h3 class="panel-title">Thymeleaf循环</h3>
  15.     </div>
  16. </div>
  17. <div class="container">
  18.             <div class="col-md-12">
  19.                 <div class="panel panel-primary">
  20.                     <div class="panel-heading">
  21.                         <h3 class="panel-title">图书信息列表</h3>
  22.                   </div>
  23.                   <div class="panel-body">
  24.                     <!-- table-responsive:响应式表格,在一个表展示所有的数据,当不够显示的时候可以左右滑动浏览-->
  25.                     <div class="table table-responsive">
  26.                         <!--
  27.                             .table-bordered 类为表格和其中的每个单元格增加边框。
  28.                             .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
  29.                         -->
  30.                         <table class="table table-bordered table-hover">
  31.                             <thead>
  32.                                 <th class="text-center">封面</th ><th class="text-center">书名</th>
  33.                                 <th class="text-center">作者</th ><th class="text-center">价格</th>
  34.                             </thead>
  35.                             <tbody class="text-center">
  36.                                 <tr th:each="book : ${books}">
  37.                                      <td> <img src="images/java.jpg" th:src="@{'img/'+${book.image}}" height="60"/></td>
  38.                                     <td th:text="${book.title}">书名</td>
  39.                                     <td th:text="${book.author}">作者</td>
  40.                                     <td th:text="${book.price}">价格</td>
  41.                                 </tr>
  42.                             </tbody>
  43.                         </table>
  44.                     </div>
  45.                 </div>
  46.                 </div>
  47.             </div>
  48.         </div>
  49. </body>
  50. </html>
复制代码




Success3.html中可以看到,可以看到,使用th:each将集合数据很方便的提取出来并显示在html页面上。。
您需要登录后才可以回帖 登录 | 加入联盟

本版积分规则

小黑屋|手机版|Archiver|疯狂Java联盟 ( 粤ICP备11094030号 )

GMT+8, 2018-8-15 09:45 , Processed in 0.112223 second(s), 6 queries , File On.

快速回复 返回顶部 返回列表