SpringBoot入门教程(四)：SpringBoot 使用 Thymeleaf 模板引擎

avatar 2018年07月27日14:37:56 6 3142 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
在没有做前后端分离之前，我们还是需要 JSP / Thymeleaf 之类的模板引擎，Thymeleaf 据说是 SpringBoot 官方推荐的，集成地比较好，本文将介绍。


一、文件配置


1、在 pom.xml 添加依赖
  1. <dependency>
  2.     <groupId>org.springframework.boot</groupId>
  3.     <artifactId>spring-boot-starter-thymeleaf</artifactId>
  4. </dependency>



2、在 application.properties 里添加属性配置
  1. #去掉thymeleaf的严格的模板校验
  2. spring.thymeleaf.mode=HTML
  3. #关闭缓存及时刷新，上线的时候改成true
  4. spring.thymeleaf.cache=false
  5. spring.thymeleaf.prefix=classpath:/templates/
  6. spring.thymeleaf.suffix=.html
  7. spring.thymeleaf.encoding=utf-8


二、小试牛刀


1、创建 MainController
  1. @Controller
  2. public class MainController {
  4.     /**
  5.      * 访问localhost:8080 页面
  6.      * 将数据message填充到templates/index.html
  7.      * @param model
  8.      * @return
  9.      */
  10.     @GetMapping("/")
  11.     public String indexPage(Model model) {
  12.         String message = "Hello, Thymeleaf!";
  13.         model.addAttribute("message", message);
  14.         return "index";
  15.     }
  16. }



2、在 resource/templates 下新建 index.html
  1. <!doctype html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.       xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7. </head>
  8. <body>
  9.     <h1 th:text="${message}"></h1>
  10. </body>
  11. </html>

通过 EL 表达式将 Model 中的数据填充到 h1 标签中






三、再试牛刀


1、Model 中包含简单对象

Controller
  1. @Controller
  2. public class MainController {
  4.     /**
  5.      * model.addAttribute("name",value);
  6.      * addAttribute 两个参数，前者是对象名称，在 HTML 页面中，使用EL表达式${name}获取对应value
  7.      * @param model
  8.      * @return
  9.      */
  10.     @GetMapping("/")
  11.     public String indexPage(Model model) {
  12.         User user = new User();
  13.         user.setId(1);
  14.         user.setName("言小曌");
  15.         user.setAge(18);
  16.         model.addAttribute("user", user);
  17.         model.addAttribute("message","Hello Thymeleaf");
  18.         return "index";
  19.     }
  20. }



HTML
  1. <!doctype html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.       xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7. </head>
  8. <body>
  9.     <h1 th:text="${message}"></h1>
  10.     <span th:text="${user.id}"></span>
  11.     <span th:text="${user.name}"></span>
  12.     <span th:text="${user.age}"></span>
  13. </body>
  14. </html>



效果图











2、Model 中包含 List

Controller
  1. @Controller
  2. public class MainController {
  4.     /**
  5.      * model.addAttribute("name",value);
  6.      * addAttribute 两个参数，前者是对象名称，在 HTML 页面中，使用EL表达式${name}获取对应value
  7.      * @param model
  8.      * @return
  9.      */
  10.     @GetMapping("/")
  11.     public String indexPage(Model model) {
  12.         List<User> userList = new ArrayList<>();
  13.         User user = new User(1,"安琪拉",12);
  14.         User user2 = new User(2,"虞姬",14);
  15.         User user3 = new User(3,"公孙离",13);
  16.         User user4 = new User(4,"蔡文姬",11);
  17.         userList.add(user);
  18.         userList.add(user2);
  19.         userList.add(user3);
  20.         userList.add(user4);
  21.         model.addAttribute("userList", userList);
  22.         return "index";
  23.     }
  24. }



HTML
  1. <!doctype html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3.       xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>首页</title>
  7. </head>
  8. <body>
  9.     <table width="200" style="text-align: center;">
  10.         <tr>
  11.             <th>编号</th>
  12.             <th>姓名</th>
  13.             <th>年龄</th>
  14.         </tr>
  15.         <tr th:each="user : ${userList}">
  16.             <td th:text="${user.id}"></td>
  17.             <td th:text="${user.name}"></td>
  18.             <td th:text="${user.age}"></td>
  19.         </tr>
  20.     </table>
  21. </body>
  22. </html>





本篇文章目的不是介绍 Thymeleaf，如果想学习 Thymleaf 可以参考这篇文章

Thymleaf 快速入门教程

Thymleaf 模板表达式大全

Thymleaf 官方文档

历史上的今天
七月
27日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0