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 标签中

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

 

 

三、再试牛刀

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>

 

效果图

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

 

 

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 官方文档

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: