Thymeleaf 模板引擎
1、Thymeleaf 是 Web 和独立环境的现代服务器端 Java 模板引擎,能够处理HTML,XML,JavaScript,CSS 甚至纯文本。
2、Thymeleaf 的主要目标是提供一种优雅和高度可维护的创建模板的方式。为了实现这一点,它建立在自然模板的概念上,将其逻辑注入到模板文件中,不会影响模板被用作设计原型。这改善了设计的沟通,弥补了设计和开发团队之间的差距。
3、Thymeleaf 也从一开始就设计了Web标准 - 特别是 HTML5 - 允许您创建完全验证的模板,Spring Boot 官方推荐使用 thymeleaf 而不是 JSP。
4、Thymeleaf 官网:https://www.thymeleaf.org/
5、Thymeleaf 在 Github 的主页:https://github.com/thymeleaf/thymeleaf
6、Spring Boot 中使用 Thymeleaf 模板引擎时非常简单,因为 Spring Boot 已经提供了默认的配置,比如解析的文件前缀,文件后缀,文件编码,缓存等等,程序员需要的只是写 html 中的内容即可,可以参考《Spring Boot 引入 Thymeleaf 及入门》
模板引擎
1)市面上主流的 Java 模板引擎有:JSP、Velocity、Freemarker、Thymeleaf
2)JSP本质也是模板引擎,Spring Boot 官方推荐使用 “Thymeleaf”模板引擎
3)模板引擎原理图如下,模板引擎的作用都是将模板(页面)和数据进行整合然后输出显示,区别在于不同的模板使用不同的语法,如 JSP 的 JSTL 表达式,以及 JSP 自己的表达式和语法,同理 Thymeleaf 也有自己的语法
实例
pox.xml
引入thymeleaf的依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
application.properties
在spring-boot中配置thymeleaf
spring.thymeleaf.servlet.content-type=text/html
#配合nekohtml使用,避免语法严格
spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.cache=false
spring.mvc.static-path-pattern=/static/**
Controller
在controller中跳转页面
@Controller
public class testController {
@RequestMapping("index.html")
public String test(Model model){
model.addAttribute("data", "你好");
return "index";
}
}
需要注意的是,要在resources里面新建static和templates文件夹,前者装css文件等,后者装html
helloworld.html
需要注意的是必须要在命名空间引入 xmlns:th=“http://www.thymeleaf.org”
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${data}">你好,世界!</h1>
</body>
</html>
其他
格式化日期:
<span th:text="${#dates.format(dir.updateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
获取相对路径:
<script th:src="@{{path}/static/jquery-1.10.2.min.js (path=${contextPath})}" type="text/javascript"></script>
script中获取相对路径:
<script type="text/javascript" th:inline="javascript">
var basePath = ${#httpServletRequest.getContextPath()};
------基础操作------
- 循环
<option th:each="s:${suppliers}" th:value="${s.id}" th:text="${s.name}"></option>
相当于在jsp中
<option th:each="s:${supplierList}" ></option>
<c:forEach items="${suppliers}" var="s">
<option value="${s.id}">${s.name}</option>
</c:forEach>