导读：
Thymeleaf是一种Web开发的模板引擎，它能够将后台的值准确的传给前台，很轻松去处理CSS、HTML、Javascript纯文本。在Spring Boots官网推荐使用Thymeleaf模板的时候，thymeleaf同时也全力打造一个优雅和高度可维护的创建模板，向世人证明它的优秀所在。Thymeleaf 官网：https://www.thymeleaf.org/
一、Spring Boots下面的优秀模板——Thymeleaf
1.Spring boots
众所周知，Spring Boots框架中内嵌置了servlet容器，同时Spring boots支持
创建独立的Spring应用程序
直接嵌入Tomcat，Jetty或Undertow（无需部署WAR文件）
提供自以为是的“入门”依赖项以简化构建配置
尽可能自动配置Spring和第三方库
提供生产就绪功能，例如指标，运行状况检查和外部化配置
绝对没有代码生成，也不需要XML配置
这个看上去是不是特别的厉害呢？搭建过ssm框架都知道，平常搭建ssm框架的时候都需要配置许多的文件，比如说xml的配置等，spring boots省去了这些繁琐的步骤，自身提供可强大的。
一款优秀而简易的框架自然受大众欢迎，因为Spring boots封装相当好，所以结合mybatis集成开发会大大的提高项目的开发速度。后边时间我会写出一篇介绍Spring boots+mybatis plus+thymeleaf的文章去介绍超级厉害且简单的开发框架。
2.Thymeleaf的配置
这里讲一下Thymeleaf的使用和配置
先配置pom.xml文件，添加maven依赖。
项目中导入
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>这样我们的项目中就有了thymeleaf的包。
加入thymeleaf的映射和格式配置在application.properties文件下
#thymeleaf\u914D\u7F6E
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.check-template-location=true 
这里， 默认的模板映射路径是：src/main/resources/templates，
最后，前端引入一句thymeleaf的链接即可
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
</html>ok，这样就引入thymeleaf模板。
那么，如何使用thymeleaf接收后端的传值呢？
如图所示，后端传回一个对象，对象里都有值，直接可以使用对象里的属性值。同时，如果是时间就要转换成yyyy-MM-dd HH：mm：ss格式，也就是年月日时分秒格式。这些都是thymeleaf提供的一个简单的接收模式，看上去是不是相当厉害呢？
介绍了后端传给前端，那么前端如何传值给后端呢？
这里举一个例子
<td th:onclick="'javascript:layer_show(\'详情\',\'/admin/'+'bdOldrecords'+'/oldmain/'+${bdRecords.id}+'\',1000,500)'"><span th:text="${bdRecords.keyword}" ></span></td>设置一个点击事件，这里需要注意的是，thymeleaf处理传值进js是有一些小区别的。如果我们希望在后台传给前台的值能够再次被利用，这里就需要将后台传入的值进行一个“包装”利用，也就是加一个事件去调用这个值。然而我们前端传值可以利用js中的格式$('id&&class').val()或者$('id&&class').text()或者$('id&&class').html()值来拿到值，但是这里唯一的难题是thymeleaf格式是如何写的？
这里我简化下上面的式子。
<td th:onclick="'javascript:layer_show()'"></td>- th是thymeleaf模板中常见的标识
- js事件需要加上'javascript:函数'
其实也不算很难，只要我们习惯了thymeleaf的开发模式，就会发现其实无论是传值还是接值都很简单，加上thymeleaf里面的集成封装了许多的前端api，完全不用自己再去写一些什么判断和特殊情况语句，因为开发者已经帮你写好了，只需要我们调用即可。
以下是成功通过thymeleaf模板接收后台数据，用th:each循环输出数据库表的demo。
后话：
看完上面的步骤，大家是不是觉得相当简单呢！！！
我自己用的时候也惊呆了，没想到好多东西不用自己写了~（流口水）。
在做项目的时候总是想着时间越短越好的开发出来，所以说优秀的模板是必不可少的。（其实前段时间用阿里的Ui-icont框架发现也很漂亮）
相信在之后会有更多优秀的模板和框架出现，稍微做一些笔记和框架积累有助于我们的开发速度的提升。
谢谢大家的观看~比心
扫一扫
2777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
