Thymeleaf是前端开发模板，springboot默认支持。前端模板用法大多数是类似的jsp、thymeleaf、vue.js都有while\for\if\switch等使用，页面组件化等。
1.前端模板区别
jsp是前后端完全不分离的，jsp页面写一堆Java逻辑。
thymeleaf好处是html改造方便，可以独立预览。vue.js是完全前后端分离的。
2.快速入门
(1)新建springboot项目
# 关闭Thymeleaf的缓存 spring.thymeleaf.cache=false
(可忽略)可以开启热部署，maven，引入devtool，配置SpringbootApplication,Running Application
Update Policies ,选择 Update resources
准备index.html
<html xmlns:th="http://www.thymeleaf.org">
th:text ="${name}"
创建Controller
@GetMapping("/index")
String index(Model model){
model.setAttribute("name","html");
return "index"
}
3.Thymeleaf语法
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
</head>
<body>
<!--通过${}来获取model中的变量，是ognl表达式-->
<p th:text="${name}">测试</p>
<!--字符串拼接-->
<p th:text="|测试-${name}|"></p>
<!--对象,星号选择-->
<ul th:object="${user}">
<li th:text="*{title}"></li>
<li th:text="*{name}"></li>
<li th:text="*{age}"></li>
<!--if判断-->
<li th:if="*{isVip}=='1'" th:text="*{isVip}"></li>
<!--追加css-->
<li th:styleappend="*{isVip}=='1' ? 'margin-top:50px' : _"></li>
<li th:classappend="*{isVip}=='1' ? 'css_test' : _"></li>
</ul>
<style>
.css_test{
margin-top:50px;
background-color: red;
}
</style>
<!--内联js-->
<script th:inline="javascript">
var name =/*[[${user.name}]]*/ '李四';
console.log(name);
</script>
<!--内嵌变量 dates,${#dates.format(date, 'dd/MMM/yyyy HH:mm')}-->
<!--组件-->
<div th:replace="include::body"></div>
</body>
</html>运行效果
3.引入静态文件
th:href="@{/blog/yummy-jekyll/plugins/jquery/dist/jquery.min.js}"
@表示static路径
假设html在templates目录下，
<link href="../static/blog/..."
th:href 与 href 的区别
href始终从端口开始作为根路径，如8080/channel/page/add
th:href会寻找项目路径作为根路径，如8080/dx/channel/page/add
4.定义组件及使用
th:fragment="header(title,keywords)" header是组件名称，后面是传递参数
使用方式： html页面::组件名称（参数）
th:replace="blog/yummy-jekyll/header::header('首页','My Blog')"
