Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,可以处理HTML,XML,JavaScript,CSS甚至纯文本。,能够彻底替代jsp,也是spring boot官方推荐的模版引擎javascript
1.能够独立运行 先后端分离的时候 前端能够直接运行模版进行样式调整css
2.不破坏html总体结构,更贴向htmlhtml
3.可使用模版实现JSTL、 OGNL表达式效果前端
1.引入pom依赖java
<!--thymeleaf模版--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
properties配置 根据实际须要配置web
# THYMELEAF (ThymeleafAutoConfiguration)
#开启模板缓存(默认值:true)
spring.thymeleaf.cache=false
#Check that the template exists before rendering it.
spring.thymeleaf.check-template=true
#检查模板位置是否正确(默认值:true)
spring.thymeleaf.check-template-location=true
#开启MVC Thymeleaf视图解析(默认值:true)
spring.thymeleaf.enabled=true
#模板编码
spring.thymeleaf.encoding=UTF-8
#要被排除在解析以外的视图名称列表,用逗号分隔
#spring.thymeleaf.excluded-view-names=
#要运用于模板之上的模板模式。另见StandardTemplate-ModeHandlers(默认值:HTML5)
spring.thymeleaf.mode=HTML5
#在构建URL时添加到视图名称前的前缀(默认值:classpath:/templates/)
spring.thymeleaf.prefix=classpath:/templates/
#在构建URL时添加到视图名称后的后缀(默认值:.html)
spring.thymeleaf.suffix=.html
#Thymeleaf模板解析器在解析器链中的顺序。默认状况下,它排第一位。顺序从1开始,只有在定义了额外的TemplateResolver Bean时才须要设置这个属性。
#spring.thymeleaf.template-resolver-order=
#可解析的视图名称列表,用逗号分隔
#spring.thymeleaf.view-names=
2.新建一个Contorllerspring
@Controller public class HelloWordContorller { @RequestMapping("/helloword") public String helloWord(Model model){ List<StudentConfig> studentConfigList=new ArrayList<StudentConfig>(); for(int i=0;i<10;i++){ studentConfigList.add(new StudentConfig("小明"+i,i)); } model.addAttribute("list",studentConfigList); return "index"; } }
3.再resource/template下面新建一个html页面后端
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> table td{ text-align: center; } </style> </head> <body> <table style="width:100%"> <thead> <tr> <th>学生姓名</th> <th>学生年龄</th> </tr> </thead> <tbody> <tr th:each="item : ${list}"> <td th:text="${item.name}">小明</td> <td th:text="${item.age}">20</td> </tr> </tbody> </table> </body> </html>
xmlns:th="http://www.thymeleaf.org" 将静态页面转换为动态的视图,须要进行动态处理的元素将使用“th:”前缀。
访问输出
thymeleaf模版引擎跟jsp比起来是否更易读。若是写jsp的话 里面有不少自定义标签 前端人员根本也没法阅读api
还有就是模版是html是能够直接运行的数组
4.找到模版地址
打开
因此前端是能够直接根据模版进行样式调整
<tr th:each="item : ${list}"> <td th:text="${item.name}">小明</td> <td th:text="${item.age}">20</td> </tr>
<td th:text="${item.name}">小明</td> <td th:text="${item.age}">20</td>
<p th:utext="${htmlcontent}">conten</p>
<input type="text" th:value="${user.name}" />
<td th:text="${item.sex==0?'男':'女'}">男</td>
<div th:if="${islogin}">已登陆</div> <div th:unless="${islogin}"><a th:href="login.html">请登录</a></div>
th:if是条件成立才渲染 ht:unless则是条件不成立才渲染
<div th:if="${islogin}"> <div th:switch="${role}"> <p th:case="'admin'">管理员</p> <p th:case="teacher">老师</p> <p th:case="*">普通用户</p> </div> </div> <div th:unless="${islogin}"><a th:href="login.html">请登录</a></div>
若是登录判断 当前用户角色 *表示default
<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
restful风格
<tr th:each="item : ${list}"> <td th:text="${item.name}">小明</td> <td th:text="${item.age}">20</td> <td th:text="${item.sex==0?'男':'女'}">男</td> <td><a th:href="@{'/edit/'+${item.id}}">编辑</a></td> </tr>
?参数传递
<tr th:each="item : ${list}"> <td th:text="${item.name}">小明</td> <td th:text="${item.age}">20</td> <td th:text="${item.sex==0?'男':'女'}">男</td> <td><a th:href="@{/edit/info(id=${item.id})}">编辑1</a></td> </tr>
?多参数传递
<a th:href="@{/edit/info(id=${item.id},age=${item.age})}">编辑1</a>
设置背景图片
<td><div th:style="'background:url('+@{${item.headPath}}+')'"></div></td>
好比格式化日期
<div>系统时间:<label th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')}"></label></div>
根据需求查api吧 太多了
<script th:inline="javascript"> var username = /*[[${islogin}]]*/ 'Sebastian'; var size = /*[[${islogin}]]*/ 0; </script>
注释表示经过模版引擎渲染 将注释后面的代码将取消渲染 渲染注释里面的模版代码。便于原型显示(直接打开html页面)
模版引擎渲染结果
直接html打开效果
使用th:inline="javascript"开启 [[....]]表示内联文本
js附加代码:
<script th:inline="javascript"> /*[+ var username = /*[[${islogin}]]*/ 'Sebastian'; var size = /*[[${islogin}]]*/ 0; +]*/ </script>
/*[++]*/ 使用模版引擎渲染将正常渲染
模版引擎渲染结果
模版html直接打开结果
js移除代码
<script th:inline="javascript"> /*[- */ var username = /*[[${islogin}]]*/ 'Sebastian'; var size = /*[[${islogin}]]*/ 0; /* -]*/ </script>
跟js添加代码同样 只是是相反 添加模版引擎渲染则渲染 普通html打开则渲染
引入pom依赖
<dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> </dependency>
后台管理系统为例子 头部 底部 菜单栏都是固定的。
1.新建一个页面都把架构复制过去 而后改中间那一块内容
缺点:
会致使咱们要修改总体风格每一个页面都要改,好比随着时间的迭代页面会愈来愈多。
2.定义好骨架 而后每一个部分引用对应的页面
头部引用头部的html 菜单引用菜单的html 底部引用底部的html
缺点:
页面排版要改动的时候 好比 菜单要放到右边 也会致使每一个页面都要改动
3.使用模版页面
使用模版页定义好 总体框架,而后每一个页面都来引用这个模版 将内容替换到指定位置
模版页定义公共的样式引入 还有总体风格
1。首先建立一个模版页面
layout.html
<!DOCTYPE html> <html lang="en" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #header { background-color: black; color: white; text-align: center; padding: 5px; } #nav { line-height: 30px; background-color: #eeeeee; height: 300px; width: 100px; float: left; padding: 5px; } #section { width: 350px; float: left; padding: 10px; } #footer { background-color: black; color: white; clear: both; text-align: center; padding: 5px; } </style> </head> <body> <div id="header"> 头部 </div> <div id="nav"> 菜单 </div> <div layout:fragment="content" id="section"> 内容 </div> <div id="footer"> 底部 </div> </body> </html>
定义命名空间:xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
要填充的区域:layout:fragment="content"
2.建立一个用户列表页面
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout"> <head> <meta charset="UTF-8"> <title>用户列表</title> <link href="userlist.css" rel="stylesheet" type="text/css"> <!--私有样式--> <style type="text/css"> table td{ text-align: center; } </style> </head> <body> <div layout:fragment="content">用户列表</div> </body> </html> <script type="text/javascript" src="userlist.js"></script> <script type="text/javascript"> $(function(){ alert('dd'); }) </script>
要填充模版页的位置:layout:fragment="content"
定义命名空间 xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout"
layout:decorator="layout"为模版页路径
效果
渲染后的html
<!DOCTYPE html> <html lang="en"> <head> <title>用户列表</title> <meta charset="UTF-8"> <style type="text/css"> #header { background-color: black; color: white; text-align: center; padding: 5px; } #nav { line-height: 30px; background-color: #eeeeee; height: 300px; width: 100px; float: left; padding: 5px; } #section { width: 350px; float: left; padding: 10px; } #footer { background-color: black; color: white; clear: both; text-align: center; padding: 5px; } </style> <meta charset="UTF-8"> <link href="userlist.css" rel="stylesheet" type="text/css"> <!--私有样式--> <style type="text/css"> table td{ text-align: center; } </style> </head> <body> <div id="header"> 头部 </div> <div id="nav"> 菜单 </div> <div id="section">用户列表</div> <div id="footer"> 底部 </div> </body> </html> <script type="text/javascript" src="userlist.js"></script> <script type="text/javascript"> $(function(){ alert('dd'); }) </script>
能够发现 页面使用的css 和 script 都自动替换到模版页的 head 和底部
这个时候就算咱们有上万个页面 页面风格要改变也就只须要改变模版页就好了
th:include
和 th:replace
建立一个广告页advertising.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>广告</title> </head> <body> <div id="advertisingContent" th:fragment="advertisingContent"> 我是广告 </div> </body> </html>
th:fragment="advertisingContent" 引用的时候会用到
页面引用advertisingContent内容
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>主页</title> </head> <body> <div > <div>主页</div> <div th:replace="advertising :: advertisingContent"></div> </div> </body> </html>
th:replace="advertising :: advertisingContent" 为把advertising(页面路径)advertisingContent为哪一块内容(省略则是整个页面)
传递参数
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <style type="text/css"> <!--自定义样式--> </style> </head> <body> <div id="advertisingContent" th:fragment="advertisingContent(name)"> 我是广告<label th:text="${name}"></label> </div> </body> </html>
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>主页</title> </head> <body> <div > <div>主页</div> <div th:replace="advertising(name='测试传递参数')"></div> </div> </body> </html>
th:replacehe 和th:include用法同样
区别th:include
只引用chilren
th:include
th:replacehe 引用包含自身