Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用来Web与非Web应用。

  Thymeleaf的第一对象在于提供一种可被浏览器正确突显的、格式卓越的模版创设方式,因而也能够看作静态建模。你可以行使它创设经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这几个标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。Thymeleaf的可扩张性也分外棒。你可以运用它定义自己的模板属性集合,那样就可以计算自定义表明式并动用自定义逻辑。这表示Thymeleaf还足以视作模板引擎框架。

     
 Thymeleaf的模版仍可以当做工作原型,Thymeleaf会在运行期替换掉静态值。例如上边的html文件,当作为静态文件时,product
name展现为Red Chair,当运行在容器中并提供product那个目的时,product
name的值会自动替换为product.description对应的值。下边就概括的讲一讲springboot整合thymeleaf模板。

1.引入依赖
在maven(pom.xml)中直接引入:

1 <dependency>
2       <groupId>org.springframework.boot</groupId>
3       <artifactId>spring-boot-starter-thymeleaf</artifactId>
4 </dependency>

也足以在创制项目时候勾选thymeleaf模板,那样会自动生成。

2.安排视图解析器

(1)默认

spring-boot很多布局都有默许配置,比如默许页面映射路径为

classpath:/templates/*.html 

同等静态文件路径为

classpath:/static/

(2)自定义

在application.properties(或者application.yml)中可以配备thymeleaf模板解析器属性.就如使用springMVC的JSP解析器配置一样

1    #thymeleaf start
2    spring.thymeleaf.mode=HTML5
3    spring.thymeleaf.encoding=UTF-8
4    spring.thymeleaf.content-type=text/html 
5    #开发时关闭缓存,不然没法看到实时页面
6    spring.thymeleaf.cache=false
7    #thymeleaf end

 具体可以配备的参数可以查阅 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties 那么些类,下边的布局实际上就是流入到此类中的属性值.

3.编纂demo来表明使用办法

(1)控制器

1 @Controller
2  public class HelloController(){
3       @RequestMapping(value = "/")
4       public String index(){
5          return "index";
6       }
7     }

那样会回去一个新的视图页面index.html,当然也得以接纳上边的方法

 @RequestConteoller
   public class HelloController(){
      @RequestMapping(value = "/")
      public ModelAndView index(){
         return new ModelAndView("index");
      }
    }

如此那般能直接再次来到整个index页面。

(2)view 

 1 <!DOCTYPE html>
 2 <html  xmlns:th="http://www.thymeleaf.org" >
 3 <head>
 4 <meta charset="UTF-8"/>
 5 <title>Title</title>
 6 </head>
 7 <body>
 8        <b th:text="hello,world!"><b/>
 9 </body>
10 </html>

  注意,在html标签里一定要引入 xmlns:th=”http://www.thymeleaf.org” ,那样thymeleaf模板才会启用。至于thymeleaf的现进行使办法,将来在讲。

(3)测试

走访 localhost:8080/ 这些地点,会直接跳转到 index.html 页面,并突显如下

XML 1

4.基础语法

(1)引入标签

  首先要在html标签里引入xmlns:th=”http://www.thymeleaf.org"才能使用th:\*这样的语法。

(2)获取变量值

  通过在标签内部,使用 ${} 来取值,对于javaBean的话,使用 变量名.属性名 来取得,跟EL表达式一样
  注意:只有写在标签内部才会一蹴而就,例如: th:text=“hello” 的意趣是应用hello来代替p此前的情节,p里原本的值是为了给前端开发展示用的,那样做不难完成上下端分离。

(3)引入URL

 thymeleaf对于引入URL是使用@{…}来得到的

  例如:  <a
th:href=”@{http://www.baidu.com}"&gt;绝对路径&lt;/a&gt; 是访问相对路径下的URL, <a th:href=”@{/}”>相对路径</a> 是访问相对路径下的URL。
       <a
th:href=”@{css/bootstrap.min.css}”>  是引入默许的static下的css文件夹下的bootstrap文件,类似的价签有: th:href 和 th:src 

(4)字符串替换

  例如使用: <span th:text=”‘Welcome to our application, ‘ + ${user.name} +
‘!'”></span> 或者

                      <span th:text=”|Welcome to our application,
${user.name}!|”></span>  都可以达成替换

  注意:|…|中只可以分包变量表明式${…},无法包蕴其余常量、条件表明式等。

(5)运算符

  在表明式中得以行使种种算术运算符,例如 +,
-, *, /, % .例如: th:with=”isEven=(${prodStat.count} % 2 ==
0)” 
逻辑运算符 >, <,
<=,>=,==,!= 都得以采取,唯一必要专注的是选拔 <,> 时要求用它的HTML转义符:

th:if="${prodStat.count} &gt; 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

(6)条件

  if/unless 
 th:if是该标签在满足条件的时候才会彰显,unless是不成立刻候才突显,例如

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

  Switch  
thymeleaf支付switch结构,默许属性(default)用*表示,例如:

1  <div th:switch="${user.role}">
2     <p th:case="'admin'">User is an administrator</p>
3     <p th:case="#{roles.manager}">User is a manager</p>
4     <p th:case="*">User is some other thing</p>
5  </div>

(7)循环

  th:each是对此结果可以开展遍历的数据集,例如:    

1 <tr th:each="prod : ${prods}">
2      <td th:text="${prod.name}">Onions</td>
3      <td th:text="${prod.price}">2.41</td>
4      <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
5 </tr>

(8)Utilities

   
为了模板尤其易用,Thymeleaf还提供了一多如牛毛Utility对象(内置于Context中),可以透过#间接访问:

#dates  
#calendars  
#numbers  
#strings  
arrays   
lists  
sets   
maps   
… 

 

例如:

${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
${#dates.createNow()}
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}
${#strings.startsWith(name,'Don')}                
${#strings.endsWith(name,endingFragment)} 
${#strings.length(str)}
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}
${#strings.randomAlphanumeric(count)}

(8)补充

  在spring-boot1.4从此,帮助thymeleaf3,可以更改版本号来开展改动帮忙.
  3比较2极大的增强了频率,并且不需求标签闭合,类似的link,img等都有了很好的襄助,依据如下配置即可

 <properties>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
     <!-- set thymeleaf version -->
     <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
     <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
     <!--set java version-->
     <java.version>1.8</java.version>
  </properties>

(9)一些常用标签的选用验证

 th:text  替换原来text中的东西
 th:value  替换原来value的值
 th:object
 替换标签的靶子,th:object=“对象”
 th:field
 填充,如图上边又对象,可以一直用*{属性}取值
 th:checked  当check的值为true时候为当选,false时为未入选
 th:remove  删除
 th:href  用@{}替换连接地址
 th:if  要是值为true的时候才显示标签,否则不出示
 th:unless  不树立的时候才显得
 th:each  用户循环遍历结果集
 th:style  替换样式
 th:action
 替换action地址,用@{}取地址
 th:alt  用@{}取地址
 th:class   替换class的样式
 th:fragment
 定义一个framemet模板,在前面引用他

 

(10)实例一:页面的引用与替换

  日常费用中,大家常常会讲导航,页尾,菜单单独提取成模板供其余页面使用,在thymeleaf,我们得以应用th:fragment属性来定义一个模板,例如:

 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org"
 3       xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
 4 <head>
 5     <meta charset="utf-8"/>
 6 </head>
 7 <body>
 8 <div class="container-fluid all">
 9     <div class="sidebar">
10         <ul class="nav">
11             <li><a th:href="@{/index}">&nbsp;首页</a></li>
12             <li><a th:href="@{/add}">&nbsp;增加用户</a></li>
13             <li><a th:href="@{#}">&nbsp;员工信息</a></li>
14             <li><a th:href="@{#}">&nbsp;工资信息</a></li>
15             <li><a th:href="@{#}">&nbsp;任务信息</a></li>
16             <li><a th:href="@{#}">&nbsp;人员调动</a></li>
17             <li><a th:href="@{#}">&nbsp;档案管理</a></li>
18             <li><a th:href="@{#}">&nbsp;历史记录</a></li>
19         </ul>
20     </div>
21     <div class="maincontent row">
22        
23         <div th:fragment="content">
24         </div>
25         
26     </div>
27 </div>
28 <a href="#top" id="goTop"><i class="fa fa-angle-up fa-3x"></i></a>
29 </body>
30 </html>

   1.方面定义了一个号称content的一些,大家得以选用 th:include 或者 th:replace 属性来使用她,例如我们得以新建一个大致的页尾模板, 

新建一个html文件,路径如下:/WEB-INF/templates/footer.html ,然后大家得以在footer.html文件中引入上边的content片段。

 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3 <head>
 4     <meta charset="UTF-8"/>
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div th:include="footer :: content"></div>
 9 </body>
10 </html>

  其中 th:include 中的参数格式为 templatename::[domselector] ,其中templatename是模板名(如footer),domselector是可选的dom拔取器。若是只写templatename,不写domselector,则会加载整个模板。大家也可以动用三目表明式来写,例如
:

<div th:include=”footer :: (${user.isAdmin}? #{footer.admin} :
#{footer.normaluser})”></div> 

  模板片段可以被含有在任意th:*质量中,并且可以运用对象页面中的上下文变量。

XML, 

   2.不通过th:fragment引用模板,我们得以经过有力的dom接纳器,在不添加其余fragment属性的情事定义模板,例如:

1 <div id="copy-section">
2         &copy; xxxxxx
3 </div>

 

经过dom选拔器来加载模板,如id为copy-section, <div th:include=”footer :: #copy-section”> 

 

   3.施用layout布局加载模板

   在html标签中援引 
xmlns:layout=”http://www.ultraq.net.nz/web/thymeleaf/layout” ,使用layout来拓展布局,然后在急需被引述的head页面,要修改的地点添加

   <div
layout:fragment=”content”></div> 片段,例如:

 1 <!DOCTYPE html>
 2  <html xmlns:th="http://www.thymeleaf.org"
 3        xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
 4  <head>
 5      <meta charset="utf-8"/>
 6  </head>
 7  <body>
 8  <div class="container-fluid all">
 9      <div class="sidebar">
10          <ul class="nav">
11              <li><a th:href="@{/index}">&nbsp;首页</a></li>
12              <li><a th:href="@{/add}">&nbsp;增加用户</a></li>
13              <li><a th:href="@{#}">&nbsp;员工信息</a></li>
14              <li><a th:href="@{#}">&nbsp;工资信息</a></li>
15              <li><a th:href="@{#}">&nbsp;任务信息</a></li>
16              <li><a th:href="@{#}">&nbsp;人员调动</a></li>
17              <li><a th:href="@{#}">&nbsp;档案管理</a></li>
18              <li><a th:href="@{#}">&nbsp;历史记录</a></li>
19          </ul>
20      </div>
21      <div class="maincontent row">
22         
23          <div th:fragment="content">
24          </div>
25          
26      </div>
27  </div>
28  <a href="#top" id="goTop"><i class="fa fa-angle-up fa-3x"></i></a>
29  </body>
30  </html>

  然后新建一个html文件,在html中引入 layout:decorator=”head” ,然后径直在body里添加 <div layout:fragment=”content”></div> ,在新的页面中的div里添加必要的内容,加载出来就是重组了head.html的新页面。例如:

 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org"
 3       xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
 4       layout:decorator="head">
 5 <head>
 6     <meta charset="UTF-8"/>
 7     <title>添加用户</title>
 8 </head>
 9 <body>
10 
11 <div layout:fragment="content" class="col-sm-12">
12 </div>
13 
14 </body>
15 </html>

  在div里添加始末,加载出来的页面会蕴涵head的情节,而新页面div的始末,会体现在head页面中的 <div th:fragment=”content”></div> 中,那样使用布局更便利。

 

 

   4.th:include与th:replace的区别

   th:include  是加载模板的始末,而 th:replace 则会交替当前标签为模板中的标签,例如:

1 <body> 
2   <div th:include="footer :: copy"></div>
3   <div th:replace="footer :: copy"></div>
4 </body>

  那样显示的结果为:

1 <body> 
2   <div> &copy; 2016 </div> 
3   <footer>&copy; 2016 </footer> 
4 </body>

  第四个是加载了模版标签内的始末,第四个是替换了百分之百标签。

 

 

 

 

参考:http://blog.csdn.net/u012706811/article/details/52185345

           http://blog.csdn.net/pdw2009/article/details/44700897

           https://www.jianshu.com/p/ed9d47f92e37

相关文章

网站地图xml地图