你我学习网
一、基本介绍
1，什么是 Thymeleaf
Thymeleaf 是新一代的 Java 模版引擎，类似于 Velocity、FreeMarker 等传统 Java 模版引擎。
Thymeleaf 的主要目标是将优雅的自然模板带到开发工作流程中，并将 HTML 在浏览器中正确显示，并且可以作为静态原型，让开发团队能更容易地协作。Thymeleaf 能够处理 HTML、XML、JavaScript、CSS 甚至纯文本。
Thymeleaf 也是 Spring Boot 官方推荐使用的模版引擎。同时 Spring Boot 也为 Thymeleaf 提供了完整的自动化配置解决方案。
2，常用的语法
（1）常用表达式
${...}：变量表达式。
*{...}：选择表达式。
#{...}：消息文字表达式。
@{...}：链接 url 表达式。
#maps：工具对象表达式。
（2）常用标签
th:action：定义后台控制器路径。
th:each：循环语句。
th:field：表单字段绑定。
th:href：定义超链接。
th:id：div 标签中的 ID 声明，类似 HTML 标签中的归属性。
th:if：条件判断语句。
th:include：布局标签，替换内容到引入文件。
th:fragment：布局标签，定义一个代码片段，方便其他地方引用。
th:object：替换对象。
th:src：图片类地址引入。
th:text：显示文本。
th:value：属性赋值。
（3）常用函数
#dates：日期函数。
#lists：列表函数。
#arrays：数组函数。
#strings：字符串函数。
#numbers：数字函数。
#calendars：日历函数。
#objects：对象函数。
#bools：逻辑函数。
3，安装配置
（1）Spring Boot 工程如果要使用 Thymeleaf，只需编辑 pom.xml 文件，添加 spring-boot-starter-web 和 spring-boot-starter-thymeleaf 依赖即可。
1 2 3 4 5 6 7 8 | <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId></dependency><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency> |
（2）如果我们需要对默认的 Thymeleaf 配置参数进行自定义，可以直接在 application.properties 中进行配置。下面是一些常见的配置：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #是否开启缓存，开发时可以设置为 false，默认为 truespring.thymeleaf.cache=true#检查模版是否存在，默认为 truespring.thymeleaf.check-template=true#检查模版位置是否存在，默认为 truespring.thymeleaf.check-template-location=true#模版文件编码spring.thymeleaf.encoding=UTF-8#模版文件位置spring.thymeleaf.prefix=classpath:/templates/#Content-Type配置spring.thymeleaf.servlet.content-type=text/html#模版文件后缀spring.thymeleaf.suffix=.html |
二、使用样例
1，配置控制器
（1）首先我们定义一个 Book 类：
1 2 3 4 5 6 7 8 | @Setter@Getter@AllArgsConstructorpublic class Book { private Integer id; private String name; private String author;} |
（2）然后在 Controller 中创建 Book 实体类，并返回 ModelAndView。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | @RestControllerpublic class HelloController { @GetMapping("/test") public ModelAndView test() { // 创建返回数据 List<Book> books = new ArrayList<>(); Book b1 = new Book(1, "hangge.com", "hangge"); Book b2 = new Book(2, "航歌", "hangge"); books.add(b1); books.add(b2); // 创建并返回 ModelAndView ModelAndView mv = new ModelAndView(); mv.addObject("books", books); // 设置返回的数据 mv.setViewName("index"); //设置视图名 return mv; }} |
2，创建视图
在 resource/templates 目录下创建 index.html，页面中通过遍历将 books 中的数据展示出来。内容如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table border="1"> <tr> <td>编号</td> <td>名称</td> <td>作者</td> </tr> <tr th:each="book:${books}"> <td th:text="${book.id}"></td> <td th:text="${book.name}"></td> <td th:text="${book.author}"></td> </tr> </table></body></html> |
3，测试运行
在浏览器中访问 http://localhost:8080/test，可以看到运行结果如下：
原文链接：https://www.hangge.com/blog/cache/detail_2525.html
