1.什么是thymeleaf
Thymeleaf是现代化服务器端的Java页面模板引擎,不同于JSP和FreeMarker,Thymeleaf的语法更加接近HTML
Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎。
Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以正确显示在浏览器中的HTML,也可以作为静态原型工作,从而在开发团队中进行更强大的协作。
随着Spring框架的模块,与您最喜欢的工具的集成,以及插入自己的功能的能力,Thymeleaf是现代HTML5 JVM Web开发的理想选择,尽管它可以做的更多。
好吧,我承认刚才那段是Thymeleaf官方的说明,我只不过机翻了一下。下面咱们说点人话。Thymeleaf就是jsp的高端升级版。
2.为什么使用thymeleaf
springboot官方的支持与推荐
Spring Boot为以下的模板引擎提供自动配置支持:
1.FreeMarker
2.Groovy
3.Thymeleaf
4.Velocity(1.4已不再支持)
5.Mustache
3.什么情况适合使用Thymeleaf
Thymeleaf显然是一个开发页面的技术,现在各种前端技术层出不穷,比如现在主流的Vue、React、AngularJS等。很多人可能会要问,这个Thymeleaf相对于这些前端框架到底有啥优势。
其实,Thymeleaf跟那些前端框架根本不是一个类型的东西,也没有啥可比性。
Thymeleaf和老牌的jsp属于非前后分离的思路来开发的。后端通过数据渲染html的模板,渲染后模板就是个完整的html页面,将页面返回给请求方。
主流的前端框架是基于前后端分离的思路来开发的,前端页面通过ajax来调用后端的rest接口来获取数据,再通过js进行渲染页面(不管什么前端技术其实都是对js进行了封装,js依然是底层核心)。
使用前后分离主要有下面几个好处
1.因为每次请求服务器获取的数据从整个页面变成了仅仅是核心数据,加载速度明显提升。
2.前端人员和后端人员可以互相独立开发,最后在通过接口联调即可。以前是不分前端工程师、后端工程师的,现在前后分离后,才出现了这样的分类。而且现在前端技术也越来越先进。前后分离以后可以方便两条技术路线的人员各自钻研自己的技术。
3.前端页面脱离后端服务器后,可以和后端分开部署。这时就可以对前端页面的服务器进行一些专门的网络优化进一步提高访问速度。
4.后端只需要一套rest接口就可以同时服务于电脑页面、IOS客户端、安卓客户端。甚至现在还有些前端技术可以直接把前端页面打包成IOS、安卓的客户端。
5.......
4.怎么使用(引入thymeleaf命名空间)
5.常用语法
th:text
th:text 用于文本的显示,并且可以进行简单的计算。
mlm -> maliming
2018 -> 16
th:utext
th:utext 用于html的文本替换,常用于富文本编辑器编辑后的内容显示到前台页面上。
->
my name is maliming
th:if
th:if 用于判断条件,还可以多条件 and,or(二元操作符),!,not非(一元操作符)。
如果user对象为空则不显示,不为空则显示 ->
不能用"<",">"等符号,要用"lt"等替代
运算符还可以写在${}里
->
运算符放在了 {} 内部, 此时整个 {} 内的表达式用 ognl/spel 引擎计算; 如果运算符放在外部, 那么 thymeleaf 引擎负责计算
进制运算符:+,-,\*,/,%
负号:-
二进制运算符:and 、or
布尔否定:!,not
比较运算符:>,<,> =,<=(gt,lt,ge,le)
相等运算符:==,!=(eq,ne)
字符串连接:+
文本替换:|The name is ${name}|
条件运算符:
If-then:ifif ? thenthen
If-then-else:ifif ? thenthen : elseelse
Default:valuevalue ?: defaultvalue
th:unless
th:unless 用于判断条件,与th:if作用相反。
如果user对象不为空则不显示,为空则显示 ->
th:switch th:case
th:switch th:case 用于多个同等级相同目的判断,多选一时使用。
first
若${user.name}中的值为maliming则显示,否则不显示second
th:action
th:action 用于定义后台控制器的路径,表单的提交地址,相当于
标签的action属性。
th:each
th:each 用于遍历集合中的对象,相当于jstl中的标签。
List集合循环遍历
Map集合循环遍历
数组循环遍历
th:value
th:value 用于属性赋值。
->
th:src
th:src 用于外部资源的引入,例如图片,js文件。
或
th:href
th:href 用于定义超链接,相当于标签的href属性。
传参。
th:remove
th:remove 用于删除。可以表达式传参。
th:selected
th:selected 用于选择框设置选中值。通常和th:each一起使用。
若相等就默认选
th:object
th:object 用于表单数据对象绑定,后台controller中参数保持一致,和选择(星号)表达式。
*号代替了${user}
th:attr
th:attr 用于设置任意属性
设置单个属性。
设置多个属性之间用逗号隔开。
th:block
Thymeleaf标准方言中唯一的元素处理器(不是属性)是:th:block。
th:block是一个只允许模板开发人员指定他们想要的属性的属性容器。
Thymeleaf将执行这些属性,然后简单地制作块。
所以它可能是有用的,例如,当为每个元素创建多个
... | ... |
... |
th:inline
Thymeleaf模板中的三个模板被认为是问本:TEXT,JAVASCRIPT和CSS。 这将它们与标记模板模式区分开来:HTML和XML。
文本模板模式和标记模式之间的关键区别在于,在文本模板中,没有标签以属性的形式插⼊逻辑,因此我们必须依赖其他机制。最基本的机制是内联, 内联语法是以文本模板模式输出表达式结果的最简单方法,因此邮件形式模板来说,内联是最好的机制。
内联文
Hello, [[#{test}]]
内联JavaScript
内联CSS
Thymeleaf还允许在CSS
表达式
变量表达式: ${...}
选择变量表达式:*{...}
国际化表达式: #{...}
链接网址表达式:@{...}
片段表达式: ~{...}
基本表达式对象
当对上下文变量计算OGNL表达式时,某些对象可用于表达式以获得更高的灵活性。 这些对象将被引用(按照OGNL标准),从#符号开始(请注意,这些对象不是Map集合/命名空间):
#ctx:上下文对象。
#locale:上下文区域设置。
#vars:上下文变量。
#request :(仅在Web Contexts中)HttpServletRequest对象。
#session :(仅在Web上下文中)HttpSession对象。
#servletContext :(仅在Web上下文中)ServletContext对象。
#response:(仅在Web上下文中)HttpServletResponse对象。
#ctx:上下文对象。 根据我们的环境(独立环境或Web环境),实现org.thymeleaf.context.IContext或org.thymeleaf.context.IWebContext。
${#ctx.locale}
${#ctx.variableNames}
${#ctx.request}
${#ctx.response}
${#ctx.session}
${#ctx.servletContext}
#locale:直接访问与当前请求关联的java.util.Locale。
${#locale}
...
#request:直接访问与当前请求关联的javax.servlet.http.HttpServletRequest对象。
${#request.getAttribute('foo')}
${#request.getParameter('foo')}
${#request.getContextPath()}
${#request.getRequestName()}
#session:直接访问与当前请求关联的javax.servlet.http.HttpSession对象。
${#session.getAttribute('foo')}
${#session.id}
${#session.lastAccessedTime}
...
#servletContext:直接访问与当前请求关联的javax.servlet.ServletContext对象。
${#servletContext.getAttribute('foo')}
${#servletContext.contextPath}
...
request和session属性的web命名空间
在Web环境中使用Thymeleaf时,我们可以使用一系列快捷方式来访问请求参数,会话属性和应用程序属性:
注意:这些不是上下文对象,而是添加到上下文中的Map集合作为变量,所以我们在没有#的情况下访问它们。 在某种程度上,它们作为命名空间。
param:用于获取请求参数。 $ {param.foo}是一个带有foo请求参数值的String [],所以$ {param.foo [0]}通常用于获取第一个值。
${param.foo} // Retrieves a String[] with the values of request parameter 'foo'
${param.size()}
${param.isEmpty()}
${param.containsKey('foo')}
...
session:用于获取session属性。
${session.foo}
...
application:用于获取应用程序或servlet上下文属性。
${application.foo}
...