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

在没有做前后端分离之前,我们还是需要 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 {
  3.     /**
  4.      * 访问localhost:8080 页面
  5.      * 将数据message填充到templates/index.html
  6.      * @param model
  7.      * @return
  8.      */
  9.     @GetMapping("/")
  10.     public String indexPage(Model model) {
  11.         String message = "Hello, Thymeleaf!";
  12.         model.addAttribute("message", message);
  13.         return "index";
  14.     }
  15. }
  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 {
  3.     /**
  4.      * model.addAttribute("name",value);
  5.      * addAttribute 两个参数,前者是对象名称,在 HTML 页面中,使用EL表达式${name}获取对应value
  6.      * @param model
  7.      * @return
  8.      */
  9.     @GetMapping("/")
  10.     public String indexPage(Model model) {
  11.         User user = new User();
  12.         user.setId(1);
  13.         user.setName("言小曌");
  14.         user.setAge(18);
  15.         model.addAttribute("user", user);
  16.         model.addAttribute("message","Hello Thymeleaf");
  17.         return "index";
  18.     }
  19. }
  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 {
  3.     /**
  4.      * model.addAttribute("name",value);
  5.      * addAttribute 两个参数,前者是对象名称,在 HTML 页面中,使用EL表达式${name}获取对应value
  6.      * @param model
  7.      * @return
  8.      */
  9.     @GetMapping("/")
  10.     public String indexPage(Model model) {
  11.         List<User> userList = new ArrayList<>();
  12.         User user = new User(1,"安琪拉",12);
  13.         User user2 = new User(2,"虞姬",14);
  14.         User user3 = new User(3,"公孙离",13);
  15.         User user4 = new User(4,"蔡文姬",11);
  16.         userList.add(user);
  17.         userList.add(user2);
  18.         userList.add(user3);
  19.         userList.add(user4);
  20.         model.addAttribute("userList", userList);
  21.         return "index";
  22.     }
  23. }
  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 官方文档

发表评论

目前评论:1