正文
在我们平时的开发中，用了很久的jsp作view显示层，但是标签库和JSP缺乏良好格式的一个副作用就是它很少能够与其产生的HTML类似。所以，在Web浏览器或HTML编辑器中查看未经渲染的JSP模板是非常令人困惑的，而且得到的结果看上去也非常丑陋（也就是不放到服务器，直接本地打开）。
但是Thymeleaf模板是原生的，不依赖于标签库。它能在接受原始HTML的地方进行编辑和渲染（也就是说我们通过thymeleaf写一个页面，如果不放到服务器进行渲染，也是可以看到效果的，跟后端打开基本相同）
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
配置springbean视图
首先我们需要让springboot（springmvc通用）知道我们的页面是通过什么来渲染的（jsp,freemarker,thymeleaf等等，以及模板的位置等信息）
/** * 设置视图解析器 * @param templateEngine * @return */ @Bean public ViewResolver viewResolver(SpringTemplateEngine templateEngine){ ThymeleafViewResolver resolver = new ThymeleafViewResolver(); resolver.setTemplateEngine(templateEngine); return resolver; } /** * 设置模板引擎 * @param templateResolver * @return */ @Bean public SpringTemplateEngine templateEngine(TemplateResolver templateResolver){ SpringTemplateEngine engine = new SpringTemplateEngine(); engine.setTemplateResolver(templateResolver); return engine; } /** * 模板解析引擎 * @return */ @Bean public TemplateResolver templateResolver(){ TemplateResolver resolver = new SpringResourceTemplateResolver(); resolver.setPrefix("/WEB-INF/template/");//设置地址前缀 resolver.setSuffix(".html");//设置后缀 resolver.setCacheable(false);//设置不缓存 resolver.setTemplateMode("HTML5"); return resolver; }
ThymeleafViewResolver是Spring MVC中ViewResolver的一个实现类。像其他的视图解析器一样，它会接受一个逻辑视图名称，并将其解析为视图
TemplateResolver会最终定位和查找模板。与之前配置InternalResourceViewResolver类似，它使用了prefix和suffix属性。前缀和后缀将会与逻辑视图名组合使用，进而定位Thymeleaf引擎。它的templateMode属性被设置成了HTML 5，这表明我们预期要解析的模板会渲染成HTML 5输出
到这里我们就基本配置完了 。
接下来我们在WEB-INF/template下建立home.html,头部加入thymeleaf的命令空间
<html xmlns:th="http://www.thymeleaf.org">
建立一个controller，写我们的第一个controller，打开访问localhost:8080/home就会转发到/WEB-INF/template/home.html
@RequestMapping("/home")
public String hello(Map<String,Object> map){
User user = new User("1", "fei", 22, "爱好：篮球","admin");
map.put("user",user);
List<User> list = new ArrayList<>();
for(int i =0;i<5;i++){
User u = new User(""+(i+2), "fei"+(i+2), 22+(i+2), "爱好：篮球"+(i+2),"user"+i);
list.add(u);
}
map.put("userList",list);
return "home";
}
thymeleaf语法
文本显示
${}的使用和jsp的el表达式很类似，我们在后台绑定了一个user对象那么我们可以通过${user.name}获取用户名，相当于user.getName();但是注意这个只能放到th表达式里面
th:text就相当于把里面的渲染主来的值放到aaa的位置上，如果th:text里面的值只有${user.name},并且为null，那么就会显示aaa
<span th:text="'用户名：' +${user.name}">aaa</span> #或者下面的这种方式，|…|中只能包含变量表达式${…}，不能包含其他常量、条件表达式等 <span th:text="|用户名：${user.name}|"></span>
运算符
在表达式中可以使用各类算术运算符，例如+, -, *, /, %
<span th:text="'年龄*2='+ ${user.age}*2 "></span>
逻辑运算符
在表达式中可以使用逻辑运算符，但是除了==其他的要使用转义字符
>, <, >=, <= != 对应(gt, lt, ge, le, ne)
<span th:text="(${user.age} eq 22)">aaa</span> //输出true #可以使用二元表达式 <span th:text="(${user.age} ge 23?'超过年纪':'ok')"></span>
条件判断
th:if条件成立才会显示
th:unless条件不成立才会显示
<span th:if="(${user.age} gt 21)">年龄超过21才会显示</span> <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
Switch
* 代表default，其他都没匹配到会显示带*的
<div th:switch="${user.role}"> <p th:case="'admin'">用户是管理员</p> <p th:case="*">用户是普通人员</p> </div>
循环
第二个参数称作状态变量，属性有
- index:当前迭代对象的index（从0开始计算）
- count: 当前迭代对象的index(从1开始计算)
- size:被迭代对象的大小
- current:当前迭代变量
- even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
- first:布尔值，当前循环是否是第一个
- last:布尔值，当前循环是否是最后一个
<table> <tr> <th>index</th> <th>id</th> <th>name</th> <th>age</th> </tr> <tr th:each="user,iterStat: ${userList}" > <td th:text="${iterStat.index}">1</td> <td th:text="${user.id}">1</td> <td th:text="${user.name}">王五</td> <td th:text="${user.age}">55</td> </tr> </table>
* 号和$符号共用
*{}里面的值就是上层th:object对象里面对应的属性
<div th:object="${user}"> <p>Name: <span th:text="*{name}">wangwu</span>.</p> <p>AGE: <span th:text="*{age}">22</span>.</p> </div>
Utilities
Utilities为了模板更加易用，Thymeleaf还提供了一系列Utility对象（内置于Context中），可以通过#直接访问
- dates ： java.util.Date的功能方法类。
- calendars : 类似#dates，面向java.util.Calendar
- numbers : 格式化数字的功能方法类
- strings : 字符串对象的功能类，contains,startWiths,prepending/appending等等。
- objects: 对objects的功能类操作。
- bools: 对布尔值求值的功能方法。
- arrays：对数组的功能类方法。
- lists: 对lists功能类方法
- sets
- maps
表达式基本对象
- #ctx: 上下文对象.
- #vars: context中的变量们.
- #locale: context中的locale.
- #httpServletRequest: (只在web context中) HttpServletRequest对象.
- #httpSession: (只在web context中) HttpSession对象.
将date渲染成后面的格式 ${#dates.format(date, 'dd/MMM/yyyy HH:mm')} 得到当前时间 ${#dates.createNow()} 得到当前时间并显示 <span th:text=" ${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')} "></span>
内联
Text inlining
后面[[]]里面的值是从域中获取的text文本，跟使用th:text效果类似
<span th:inline="text">[[${user.name}]]</span>
JavaScript inlining
<script th:inline="javascript"> var name = [[${user.name}]]; </script>
下面这个意思是如果没有跑在服务器，name就会是我们的lisi，如果在服务器上，会取出user.name的值，忽略lisi
var name = /*[[${user.name}]]*/"lisi";
CSS inlining
<style th:inline="css"> .[[${classname}]] { text-align: [[${align}]]; } </style>
none inlining
但是如果我么就要显示[[${user.name}]]不需要他转换呢，就会用到none inlining
<span th:inline="none">[[${user.name}]]</span>
嵌套
在当前home.html路径下有个footer.html,内容如下
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <body> <footer th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </footer> </body> </html>
在home.html引用这个footer，footer代表html的名称，copy代表fragmen的值
<div th:replace="footer:: copy"></div> <div th:include="footer:: copy"></div>
展现的源码：
<footer> © 2011 The Good Thymes Virtual Grocery </footer> <div> © 2011 The Good Thymes Virtual Grocery </div>
得出结论：
- th:replace会将当前div整个替换成foot的元素
- th:include只是将footer里面的内容拷贝进来
链接
链接一般用th:href="@{地址}"，“@{}”表达式，用来计算相对于URL的路径,在html ==<a href="/register"></a>
<a th:href="@{/register}">register</a>
常用标签
springboot简化配置
当然在springboot中，上面的视图解析器等注册都不需要我们做了，因为springboot都默认帮我们做了，（只要我们将Thymeleaf maven依赖添加到项目的pom文件下，就启用了Spring Boot的自动配置。当应用运行时，Spring Boot将会探测到类路径中的Thymeleaf，然后会自动配置视图解析器、模板解析器以及模板引擎）
如果什么都不配置，springboot会默认查找类跟目录下的templates文件夹下的模板，home.html放到src/main/ resources/templates目录下
如果我们要在home的html中引入一些静态资源怎么办呢，这点springboot也帮我们考虑到了
springboot它会将“/**”映射到几个资源路径中
- META-INF/resources/
- resources
- static
- public
也就是说我们在有一个static/css/home.css
那么我们这样引入就可以了。
<link type="text/css" rel="stylesheet" th:href="@{/css/home.css}"></link>
当然，我们还是可以配置前缀后缀，以及是否缓存等，只需要一个简单的配置即可
#配置前缀 #spring.thymeleaf.prefix=classpath:/templates/ #配置后缀 #spring.thymeleaf.suffix=.html #spring.thymeleaf.mode=HTML5 #spring.thymeleaf.encoding=UTF-8 #spring.thymeleaf.content-type=text/html #是否开启缓存 spring.thymeleaf.cache=false
