Spring Boot 【模板引擎】thymeleaf
- 什么是Thymeleaf ?
- 为什么要使用Thymeleaf ?
- 使用Thymeleaf步骤
- Thymeleaf语法详细
- 源码分析
- th属性
-
1. Thymeleaf 是什么?
简单说, Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。
从代码层次上讲:Thymeleaf是一个java类库,他是一个xml/xhtml/html5的模板引擎,可以作为mvc的web应用的view层。2. 为什么要使用Thymeleaf?
使用jsp的弊端项目目录结构繁琐
页面不简洁
jsp内置错误页面不能覆盖springboot默认的错误页面
只能打成war不能打成jar
内置的jetty服务器不支持jsp
Thymeleaf的优点开箱即用,它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言;
Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
有网无网的情况下模版页面都可以执行,美工的页面拿来就可以用,相对jsp减少了额外的标签,页面也更加简洁。
注意:Spring-boot支持FreeMarker、Thymeleaf、jsp、veocity 。但是对freemarker和thymeleaf的支持最好,不推荐使用jsp3. 使用Thymeleaf
-
3.1 jar包依赖
- 3.2在application.properties中配置thymleaf
-
1.prefix:指定模板所在的目录
2.check-tempate-location: 检查模板路径是否存在
3.cache: 是否缓存,开发模式下设置为false,避免改了模板还要重启服务器,线上设置为true,可以提高性能。
4.encoding&content-type:这个大家应该比较熟悉了,与Servlet中设置输出对应属性效果一致。
5.mode:这个还是参考官网的说明吧,并且这个是2.X与3.0不同。 -
这个配置不是必须的,但是spring.thymeleaf.mode的默认值是HTML5,其实是一个很严格的检查,改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。
-
. Thymeleaf语法与案例操作
-
查看以上源码,thymeleaf的自动配置了规则前缀和后缀,所以只要我们把html页面放在calsspath:/templates/下,thymeleaf就能自动渲染。
4.2 案例
4.2.1 th属性
html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个。其中th属性执行的优先级从1~8,数字越低优先级越高。th:text :设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。优先级不高:order=7
th:value:设置当前元素的value值,类似修改指定属性的还有th:src,th:href。优先级不高:order=6
th:each:遍历循环元素,和th:text或th:value一起使用。注意该属性修饰的标签位置,详细往后看。优先级很高:order=2
th:if:条件判断,类似的还有th:unless,th:switch,th:case。优先级较高:order=3
th:insert:代码块引入,类似的还有th:replace,th:include,三者的区别较大,若使用不恰当会破坏html结构,常用于公共代码块提取的场景。优先级最高:order=1
th:fragment:定义代码块,方便被th:insert引用。优先级最低:order=8
th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。优先级一般:order=4
th:attr:修改任意属性,实际开发中用的较少,因为有丰富的其他th属性帮忙,类似的还有th:attrappend,th:attrprepend。优先级一般:order=5
-
使用Thymeleaf属性需要注意点以下五点:
若要使用Thymeleaf语法,首先要声明名称空间: xmlns:th="http://www.thymeleaf.org"
设置文本内容 th:text,设置input的值 th:value,循环输出 th:each,条件判断 th:if,插入代码块 th:insert,定义代码块 th:fragment,声明变量 th:object
th:each 的用法需要格外注意,打个比方:如果你要循环一个div中的p标签,则th:each属性必须放在p标签上。若你将th:each属性放在div上,则循环的是将整个div。
变量表达式中提供了很多的内置方法,该内置方法是用#开头,请不要与#{}消息表达式弄混。
th:insert,th:replace,th:include 三种插入代码块的效果相似,但区别很大。4.2.2 实操
- controller
- html