thyme leaf学习笔记1

一.       模板简介

　　　　thyme leaf简单讲是一个前端模板引擎,目前在开发中通常与springboot后端框架配合使用,该框架的使用作用相当于''或''的概念,改模板支持HTML原型,它相当于是在HTML标签中增加额外的属性来达到:原数据模板+后台展示数据的效果,假如属性中标注的信息不存在,HTML在解析时会忽略该属性,直接展示原始的假数据,以便让美工或前端开发人员更好的看到页面效果.

　　它的优势在于:

　　　　1.使用该框架在项目启动与否的情况下都可以使页面运行,项目未启动时,页面会忽略标签中的thymeleaf元素,展示原页面中的静态数据,让人看到它的静态效果.后台人员在开发时,对原有的静态数据不需做大量的删除,只需要在需要展示后台数据的标签中加入thymeleaf框架所拥有的属性,这时从后台传过来的数据会把原静态数据替换,展示项目真实的效果.

　　　　2.thyme leaf有起开箱即用的特性,它提供标准和spring标准两种方言,在很大程度上,兼容了JSP中的EL表达式和OGNL,使得开发人员在对页面做修改时,不需要频繁的去做引库和套用模板的多次操作.并且值得一提的是,该框架所有的元素标签与原HTML的一些标签基本没有差别,开发人员在使用时不需要花费很大的精力和时间去学习磨合.

　　　　3.在项目开发中常用的一些如表单和数据便利上,鉴于thymeleaf框架提供了spring标准方言和springMVC完美集成的可选模块,可以快速简单的实现表单绑定和数据传输.极大程度上解决了功能模块在前后端交互时的表单绑定,属性编辑和国际化的过程.

二.使用

　　首先是在pom.xml文件中对thyme leaf引用其依赖:

<thymeleaf.version>2.1.5.RELEASE</thymeleaf.version>//thyme leaf版本引用
<thymeleaf-extras-springsecurity4.version>2.1.3.RELEASE</thymeleaf-extras-springsecurity4.version>//扩展spring安全控制版本号
<thymeleaf-extras-conditionalcomments.version>2.1.2.RELEASE</thymeleaf-extras-conditionalcomments.version>
<thymeleaf-layout-dialect.version>1.4.0</thymeleaf-layout-dialect.version>//thyme leaf layout模板版本引用
<thymeleaf-extras-data-attribute.version>1.3</thymeleaf-extras-data-attribute.version>
<thymeleaf-extras-java8time.version>2.1.0.RELEASE</thymeleaf-extras-java8time.version>
/** 依赖引用 */

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
   <version>1.5.6.RELEASE</version>
</dependency>

 

　　因为thymeleaf模板的使用在于简化前后端交互,所以在介绍前端之前,先介绍下后台代码的编写,我这里后台业务部分是使用的springboot框架.

前端部分:

　　数据格式化示例:

　　　　1.对BigDecimal类型的数据保留几位小数的处理:

<span th:text="${#numbers.formatDecimal(price, 0, 2)}"></span><!--保留两位小数，整数位自动--> 
<span th:text="${#numbers.formatDecimal(money, 3, 2)}"></span><!--保留两位小数，3位整数位-->

 

　　　　　　2.对时间进行格式化:

　　　　经常遇见后台传的值是long类型的数据,而前端显示时需要转为:2017-10-12这种格式的数据,可以直接使用thymeleaf框架对所获得的long类型数据进行格式化:

<td th:text="${#dates.format(resource.updDt,'yyyy.MM.dd')}">20分钟前</td><!--格式化出来的就是我们所需要的类型格式的数据-->

　　　　　　3.数据循环遍历:

　　　　在遍历数组时,th:each="resource : ${buildingForm.projectDto.resourceList}",":"两端的空格是必须要加上的,不然数据加载时会出现数据加载异常的情况.

<tr th:each="resource : ${buildingForm.projectDto.resourceList}">
     <td><a href="#" th:href="@{/search/office(resourceId=${resource.resourceId},projectId=${buildingForm.projectDto.projectId})}">
　　　　　　　　<img src="http://images.diandianzu.com/Uploads/Photo/s_59006f2c14cb4.jpg"/>
　　　</a></td>
     <td><span th:text="${resource.area}">397</span><em>m²</em></td>
     <td><span th:text="${resource.unitPrice}">5.5</span><em>[[${@codeService.getCodeLabel('PRICING_UNIT', resource.pricingUnit)}]]</em></td>
     <td>[[${@codeService.getCodeLabel('FLOOR_CATEGORY', resource.floorCategory)}]]</td>
     <td>[[${@codeService.getCodeLabel('FITMENT_CATEGORY', resource.fitmentCategory)}]]</td>
     <td th:text="${#dates.format(resource.updDt,'yyyy.MM.dd')}">20分钟前</td>
</tr>

 　　　　　　4.数据判断

　　　　　   thymeleaf在给我们提供了比较便捷的数据传递方式和便利之外,也为我们在页面内对数据判断提供了非常便利的方式.

　　　　　　　　1.对String字符串进行判断:

<span class="i-con" th:text="${#strings.isEmpty(buildingVo.projectDto.completionTime) ? '暂无信息' : buildingVo.projectDto.completionTime}">2016年09月</span>

　　　　　　　　2.对集合进行判断:

List集合判断是否为空:<div class="serviceJ" th:if="${#lists.isEmpty(buildingVo.serviceItemDtos)}"></div>

Set集合判断是否为空:<div class="serviceJ" th:if="${!#sets.isEmpty(buildingVo.serviceItemDtos)}"></div>

　　　　　这里需要注意的是,对数据进行判断的时候,诸如:string/list/set首字母要小写,且后面要加s.#号的作用在于页面校验的一种声明.相当于是位置标识符.

　　　　　　5.图片重新赋值.示例代码:

<img src="" th:src="@{${carouselPic.picUrl}}" th:onerror="'this.src=\'' + @{'/img/search/building/top.png'} + '\''"/>

　　　　　　这里使用"\"的目的在于不同的浏览器加载HTML资源时对页面代码进行转义校验.

　　　 6.集合数据大小显示

<span th:text="${#lists.size(xxxxList)}">24</span>