Thyme Leaf 百香草
SpringBoot 支持如JSP
、Thymeleaf
、FreeMarker
、Mustache
、Velocity
等各种模板引擎,同时还为开发者提供了自定义模板扩展的支持。
Thymeleaf 介绍
Thymeleaf是现代化服务器端的Java模板引擎,不同与其它几种模板的是:
Thymeleaf的语法更加接近HTML,并且具有很高的扩展性。详细资料可以浏览官网 https://www.thymeleaf.org/
特点
支持无网络环境下运行,由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。所以它可以让前端小姐姐在浏览器中查看页面的静态效果,又可以让程序员小哥哥在服务端查看带数据的动态页面效果。
开箱即用,为Spring提供方言,可直接套用模板实现JSTL、 OGNL表达式效果,避免每天因套用模板而修改JSTL、 OGNL标签的困扰。同时开发人员可以扩展自定义的方言。
SpringBoot官方推荐模板,提供了可选集成模块(spring-boot-starter-thymeleaf),可以快速的实现表单绑定、属性编辑器、国际化等功能。
使用
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
@Controller
@RequestMapping
public class ThymeleafController {
@GetMapping("/index1")
public ModelAndView index() {
ModelAndView view = new ModelAndView();
// 设置跳转的视图 默认映射到 src/main/resources/templates/{viewName}.html
view.setViewName("index");
// 设置属性
view.addObject("title", "我的第一个WEB页面");
view.addObject("desc", "欢迎进入battcn-web 系统");
Author author = new Author();
author.setAge(22);
author.setEmail("1837307557@qq.com");
author.setName("唐亚峰");
view.addObject("author", author);
return view;
}
@GetMapping("/index2")
public String index1(HttpServletRequest request) {
// TODO 与上面的写法不同,但是结果一致。
// 设置属性
request.setAttribute("title", "我的第一个WEB页面");
request.setAttribute("desc", "欢迎进入XXXX系统");
Author author = new Author();
author.setAge(22);
author.setEmail("1837307557@qq.com");
author.setName("Tom");
request.setAttribute("author", author);
// 返回的 index 默认映射到 src/main/resources/templates/xxxx.html
return "index";
}
class Author {
private int age;
private String name;
private String email;
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
}
index.yml
thymeleaf 是通过在标签里添加额外属性来绑定动态数据的;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!-- 可以看到 thymeleaf 是通过在标签里添加额外属性来绑定动态数据的 -->
<title th:text="${title}">Title</title>
<!-- 在/resources/static/js目录下创建一个hello.js 用如下语法依赖即可-->
<!-- yml中已经配置了html地址,这里不用写 -->
<!--<script type="text/javascript" th:src="@{/js/hello.js}"></script>-->
</head>
<body>
<h1 th:text="${desc}">Hello World</h1>
<h2>=====作者信息=====</h2>
<p th:text="${author?.name}"></p>
<p th:text="${author?.age}"></p>
<p th:text="${author?.email}"></p>
</body>
</html>
application.yml
模板热部署:关键是把spring: thymeleaf: cache
改为false
;以下都是默认;
spring:
thymeleaf:
cache: false
mode: HTML
servlet:
content-type: text/html
encoding: UTF-8
suffix: .html
check-template-location: true
prefix: classpath:/templates/
【静态效果】
如果直接在文件夹中打开此HTML,内容仅仅为正常渲染静态页面:
Hello World
=====作者信息=====
若想显示【动态效果】
在浏览器输入:http://localhost:8080/index 可以看到渲染后的效果,真正意义上的动静分离了
欢迎进入XXXX系统
=====作者信息=====
Tom
22
1837307557@qq.com
附
(未验证)
小技巧
模板热部署
在 IntelliJ IDEA 中使用 thymeleaf 模板的时候,发现每次修改静态页面都需要重启才生效,这点是很不友好的,百度了下发现原来是默认配置搞的鬼,为了提高响应速度,默认情况下会缓存模板。如果是在开发中请将spring.thymeleaf.cache 属性设置成 false。在每次修改静态内容时按Ctrl+Shift+F9即可重新加载了…
修改默认favicon.ico 图标
默认情况下使用springboot总能看到一片叶子,这是因为我们没配置自己的ico导致的,解决方法也很简单,只需要在src/main/static/目录下放置一张名为favicon.ico就可以了