SpringBoot_web开发-thymeleaf语法

我们看一下Thymeleaf的自动配置规则,我们得按照规则用起来,这里有一个自动配置,这里专门有一个thymeleaf,Thymeleaf的自动配置,ThymeleafAutoConfiguration,自动配置不用看了,无非就是给里面添加一些组件,他有好多Thymeleaf2的,但是判断不生效,视图解析器添加组件,我们主要看默认规则,默认规则都在ThymeleafProperties里面,来看什么默认规则呢,@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");public static final String DEFAULT_PREFIX = "classpath:/templates/";public static final String DEFAULT_SUFFIX = ".html";照着他就直接用起来了,首先默认规则有一个默认的前缀,"classpath:/templates/",还有默认的后缀,前后缀就是我们视图解析的代名词,然后也是通过它我们就知道,只要我们把html页面,放在类路径下的templates里面,然后thymeleaf就能够帮我们自动渲染了,那我们就直接来看一下,比如我来写一个请求,如果我们以前写success,现在我们引入了thymeleaf模板引擎,我们要去success页面,thymeleaf默认在这拼,相当于在类路径下的templates里面,给你找到success,还得拼一个后缀htmlclasspath:/templates/success.html为了能达到目的地,我们就在这写一个success.html我们来发送这个success请求,看我们的模板引擎是不是来到success页面localhost:8080/success

package com.learn.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;@Controller
public class HelloController {@ResponseBody@RequestMapping("/hello")public String hello1() {return "hello controller";}@RequestMapping("/success")public String success() {// classpath:/templates/success.htmlreturn "success";}}

thymeleaf我们来参照他的文档https://www.thymeleaf.org/他这里有3.0.9版本和2.1.6版本,同时使用,这里也有对thymeleaf的简单介绍,它是现代的JAVA服务端的引擎hymeleaf is a modern server-side Java template engine for both web and standalone environments.特点是自然的模板语言,写法就比较像html的语法格式,我们主要来看他的文档Thymeleaf 3.0https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf体会一下thymeleaf的使用,我们就以一个最常用的场景,比如我们要发success请求,来到这个页面,查出数据在页面展示,如果是我们的JSP页面就简单多了,这个数据会放在我们请求域中,我想去success页面取值怎么取啊https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html如果是以前JSP,就直接${hello}就完事,现在不是JSP,要按照thymeleaf的语法来,他语法是什么就得来说一下,首先我们要用thymeleaf,你得在html导入一个thymeleaf的名称空间,示例里面把这段复制<html xmlns:th="http://www.thymeleaf.org">xmlns:th="http://www.thymeleaf.org"当然你也可以不导,不导的话就没有语法提示了,导入的作用就是为了语法提示,我们使用的第一步,导入thymeleaf的名称空间,第二步我们就可以使用thymeleaf的语法了,怎么使用呢,假设我这里有一个div,我们想在这里取出hello的值,th:text,意思就是文本内容,${hello},来访问一下hello请求,看能不能取出来呢,我们来访问一下,发现也取出来了http://localhost:8080/success

 @RequestMapping("/success")public String success(Map<String,Object> map) {// classpath:/templates/success.htmlmap.put("hello", "您好");return "success";}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><h1>成功!</h1><div th:text="${hello}"></div></body>
</html>

而且这样取值是有很大好处的,我们来给大家看一下,这是显示欢迎信息,如果这个页面不经过模板引擎解析,来直接访问,这个显示的是前端自己写的数据,如果经过了模板引擎解析访问,把它就替换成后台的数据,这个前后端分工起来就更好用了,接下来就详细来看一下thymeleaf的语法规则,thymeleaf的语法规则是什么样的呢

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><h1>成功!</h1><div th:text="${hello}">这是显示欢迎信息</div></body>
</html>

语法规则,首先就是第一个,th:text我们开始说,它是来改变我们当前元素里面的文本内容的,我们可以用th任意属性,这个什么意思啊,由于前端好多东西都有默认值,比如这个div他有id,他有他的默认id,叫div01,他还有他默认的class,我们就叫myDiv,而这些值我们想改怎么改呢,我都可以用th:id的方式,如果我们能够取出一个值,比如${hello},然后th:class的方式,我都能改掉他的值,${hello},这就是我们使用th任意属性替换原生属性的值,我们可以给大家看一下,id,class都是我们替换来的值

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><h1>成功!</h1><div id="div01" class="myDiv" th:id="${hello}" th:class="${hello}" th:text="${hello}">这是显示欢迎信息</div></body>
</html>

所以我们有th任意属性,我们th语法到底有多少呢,我们可以参照一下官方文档,在官方文档的第10章,属性的优先级,Attribute Precedence,这里列举了这些属性,那个是先执行,哪个是后执行,我们可以把它截一个图,说一下每一个都是怎么用的

包括我们可以跟JSP类比一下,第一个叫Fragment inclusion,我们就叫片段包含,来做片段包含操作的,一个是插入,一个是替换,就类似于jsp:include标签一样,我们抽取公共的片段,可以包含进来,然后第二个我们来看,叫Fragment iteration,这个是我们来做遍历的,th:each,类似于jsp里面用的c:forEach,就是这个,th:if,th:unless,th:switch,th:case是来做判断的,是来做条件判断的,条件判断就类似于以前的c:if等等,这里还有一个Local variable definition,做声明变量的,就类似于我们以前的c:set标签一样,可以来设置一些变量,还有一个General attribute modification,这个是来做属性修改的,这个属性修改啊,他这里叫th:attr,th:attrprepend,th:attrappend,这是来做任意属性修改的,我们以前来做属性修改,都是来替换值的,支持prepend,给他前面添加,给他append,给他后面来追加内容的,支持这些功能的,还有一个是Specific attribute modification,这就是来修改我们指定属性的,就是修改我们默认的值,还有我们使用的th:text,这个叫标签体里面文本内容的,这里有一个th:text,还有一个th:utext,一个是转义,一个是不转义,utext它是不转义,不转义特殊字符,这样的话我们文本里面,H1标签就是一个大标题,但是上面的th:text它是转义的,相同的如果我们写了一个html片段,用th:text展示出来,那片段就当成普通字符串了,才会给你在页面打印h1,但是不会给你转义特殊字符,还有个叫Fragment specification,这个片段能够包含进来,就在这声明一下,我们后来再说就行了,那这个就是我们th的整个语法

但是我们再来看,在th里面呢,需要写一些表达式,表达式能写什么,我们能写th来做功能标签,我们能写哪些表达式,我们官方文档里面也有说,这里有一个标准的表达式语法,有非常多的表达式语法,给你来做一个简单的总结

But there are more types of expressions, and more interesting details to learn about the
ones we already know. First, let’s see a quick summary of the Standard Expression
features:Simple expressions:
Variable Expressions: ${...}
Selection Variable Expressions: *{...}
Message Expressions: #{...}
Link URL Expressions: @{...}
Fragment Expressions: ~{...}
Literals
Text literals: 'one text', 'Another one!',…
Number literals: 0, 34, 3.0, 12.3,…
Boolean literals: true, false
Null literal: null
Literal tokens: one, sometext, main,…
Text operations:
String concatenation: +
Literal substitutions: |The name is ${name}|
Arithmetic operations:
Binary operators: +, -, *, /, %
Minus sign (unary operator): -
Boolean operations:
Binary operators: and, or
Boolean negation (unary operator): !, not
Comparisons and equality:
Comparators: >, <, >=, <= (gt, lt, ge, le)
Equality operators: ==, != (eq, ne)
Conditional operators:
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)
Special tokens:
No-Operation: _

这些表达式语法我们来看一下,我们能写哪些表达式,${},*{},#{},@{},~{},这都是什么意思,表达式语法,第一个${},我们之前是用来获取变量值的,每一个怎么用呢,每一个我们来参照文档来看一下,标准表达式语法,Variables变量,${}是用来获取值,底层就是OGNL表达式,既然是OGNLWe already mentioned that ${...} expressions are in fact OGNL (Object-Graph Navigation Language) expressions executed on the map of variables contained in the context.各种高大上的往下看,能怎么用呢,下面有各种例子,比如我们可以调用对象的属性,https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#variables/** Access to properties using the point (.). Equivalent to calling property getters.*/
${person.father.name}包括调属性的时候可以这样来使用/** Access to properties can also be made by using brackets ([]) and writing * the name of the property as a variable or between single quotes.*/
${person['father']['name']}/** If the object is a map, both dot and bracket syntax will be equivalent to * executing a call on its get(...) method.*/
${countriesByCode.ES}
${personsByName['Stephen Zucchini'].age}如果map中的key有空格,我们也可以这么来写,/** Indexed access to arrays or collections is also performed with brackets, * writing the index without quotes.*/
${personsArray[0].name}数组中来取,/** Methods can be called, even with arguments.*/
${person.createCompleteName()}
${person.createCompleteNameWithSeparator('-')}包括我们进行方法调用,包括方法我们还能给她传一个参数,这个就是我们OGNL表达式,不仅能调属性,获取对象的属性,这是最基本的功能,然后他还能调用方法,接下来他还有一些功能,下面还有一个Expression Basic Objects,我们表达式里边还能写"#.",#是内置的一些基本对象,使用内置的基本对象,内置的对象都是什么呢,#ctx: the context object.
#vars: the context variables.
#locale: the context locale.
#request: (only in Web Contexts) the HttpServletRequest object.
#response: (only in Web Contexts) the HttpServletResponse object.
#session: (only in Web Contexts) the HttpSession object.
#servletContext: (only in Web Contexts) the ServletContext object.一个叫ctx,当前上下文对象,当前上下文的变量值,包括locale代表区域信息的,如果是WEB环境,有我们的request,response,session,servletContext,它能够使用这几个内置对象,他还能用什么呢,包括内置对象怎么用,这一块也有文档,可以点进去,Established locale country: <span th:text="${#locale.country}">US</span>.如果我们要用我们国家的区域信息,哪个国家,区域代号,他的使用附录都在这,You can read the full reference of these objects in Appendix A.https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects比如我们获取请求参数的这个值,/** ============================================================================* See javadoc API for class org.thymeleaf.context.WebRequestParamsVariablesMap* ============================================================================*/${param.foo}              // Retrieves a String[] with the values of request parameter 'foo'
${param.size()}
${param.isEmpty()}
${param.containsKey('foo')}
...通过size我们知道请求参数中有多少个参数,包括请求参数是不是为空一大堆,还有我们从session获取值,我来举一个例子,例子都在附录里面,除了基本对象外,还有工具对象,Expression Utility Objects,内置的一些工具对象,工具对象会增强一些功能,是哪个对象呢,Besides these basic objects, Thymeleaf will offer us a set of utility objects that will
help us perform common tasks in our expressions.#execInfo: information about the template being processed.
#messages: methods for obtaining externalized messages inside variables expressions,
in the same way as they would be obtained using #{…} syntax.
#uris: methods for escaping parts of URLs/URIs
#conversions: methods for executing the configured conversion service (if any).
#dates: methods for java.util.Date objects: formatting, component extraction, etc.
#calendars: analogous to #dates, but for java.util.Calendar objects.
#numbers: methods for formatting numeric objects.
#strings: methods for String objects: contains, startsWith, prepending/appending, etc.
#objects: methods for objects in general.
#bools: methods for boolean evaluation.
#arrays: methods for arrays.
#lists: methods for lists.
#sets: methods for sets.
#maps: methods for maps.
#aggregates: methods for creating aggregates on arrays or collections.
#ids: methods for dealing with id attributes that might be repeated
(for example, as a result of an iteration).我们就来结合文档的演示,这个就是我们内置的工具对象,有演示在附录里打开,You can check what functions are offered by each of these utility objects in the Appendix B.https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects我们要使用numbers这个工具类,我们来做一些事情/* * Set minimum integer digits.* Also works with arrays, lists or sets*/
${#numbers.formatInteger(num,3)}
${#numbers.arrayFormatInteger(numArray,3)}
${#numbers.listFormatInteger(numList,3)}
${#numbers.setFormatInteger(numSet,3)}String工具类可以把他转成toString,/** Null-safe toString()*/
${#strings.toString(obj)}  下面也可以调用startWith方法,/** Check whether a String starts or ends with a fragment* Also works with arrays, lists or sets*/
${#strings.startsWith(name,'Don')}                  // also array*, list* and set*
${#strings.endsWith(name,endingFragment)}           // also array*, list* and set*有非常多的用法,这都有示例,我们都可以来对照使用,这个就是我们${},用的最多也是最强大的表达式,接下来我们再来看第二个,叫*{},这个叫变量的选择表达式,这个东西是什么呢,4.3 Expressions on selections (asterisk syntax)*{}是什么呢,Not only can variable expressions be written as ${...}, but also as *{...}.不仅变量表达式可以写成${},还可以写成*{},他和${}在功能上是一样的,只是有一个补充功能,比如我们有一个tb:object,我们取出一个对象,session里面取出user对象,我们先把tb:object对象重写,以后我们要用user对象的值,我们就可以在当前的div里面,星号就代表我刚才的对象,然后我们直接获取对象里的属性就行了,这个就类似于写session.user.firstName<div th:object="${session.user}">
<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div><div><p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p><p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p><p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>补充使用就是,就是配合th:object一起使用的,以后我们要获取里面的值呢,就可以直接这么来做了,这个都有文档片段,我们就参照这个文档,他都不难,我们就参照文档,我们来做就行了,我们再通过实验来深化使用,还有一个叫#{},这是干什么呢,一个叫Message,Message它是来取国际化内容的,包括@{},它是来帮我们定义url链接的,用它定义url有什么好处呢,我们可以在下面看到示例,比如这里就有一个示例,<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a><!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a><!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>如果要传多个变量,If several parameters are needed, these will be separated by commas:@{/order/process(execId=${execId},execType='FAST')}包括我们来看下面,前面都不写了,我们直接写一个杠,片段引用的表达式,我们文档里面也有Fragments,我们要插入一个片段文档,我们要用~{},我们在实验里面再说,<div th:insert="~{commons :: main}">...</div>这就是我们五种表达式,如果要用thymeleaf模板引擎,知道何时用哪种表达式就行了,接下来就是其他的一些用法了,你可以用字面量,比如普通的字符串,数字,包括多个数据用逗号隔开,文本操作,这里还有数学运算,他支持数学运算,表达式里边就会用这些数学运算,包括还有布尔运算,什么并且什么,什么或什么,包括还支持比较运算,比如有一些特殊字符,用后面这些来替代,条件运算,if-then,这个就是我们三元运算符,前面是一个条件

跟遍历有关Iteration,这一块我们看下面的示例,他这里有一段代码https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#iterationpublic void process(final HttpServletRequest request, final HttpServletResponse response,final ServletContext servletContext, final ITemplateEngine templateEngine)throws Exception {ProductService productService = new ProductService();List<Product> allProducts = productService.findAll(); WebContext ctx = new WebContext(request, response, servletContext, request.getLocale());ctx.setVariable("prods", allProducts);templateEngine.process("product/list", ctx, response.getWriter());}比如他用了一个Service查了一些数据,用prods保存起来,他用的是th:each标签,把我们要遍历的数据取出来${prods}<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><title>Good Thymes Virtual Grocery</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="stylesheet" type="text/css" media="all" href="../../../css/gtvg.css" th:href="@{/css/gtvg.css}" /></head><body><h1>Product list</h1><table><tr><th>NAME</th><th>PRICE</th><th>IN STOCK</th></tr><tr th:each="prod : ${prods}"><td th:text="${prod.name}">Onions</td><td th:text="${prod.price}">2.41</td><td th:text="${prod.inStock}? #{true} : #{false}">yes</td></tr></table><p><a href="../home.html" th:href="@{/}">Return to home</a></p></body></html>每一个数据要用什么变量名,他在冒号里面用了变量名,冒号后面要遍历的是集合,以后就用变量名取出这个数据,那我们也来这么遍历,th:each每次遍历都会生成当前这个标签,我如果是这种遍历,12 Inlining行内写法,我们就可以用[[...]] or [(...)]的方式,这两个有啥区别呢,其实[[...]]就是th:text,[(...)]就是th:utext,Expressions between [[...]] or [(...)] are considered inlined expressions in Thymeleaf, and inside them we can use any kind of expression that would also be valid in a th:text or th:utext attribute.Note that, while [[...]] corresponds to th:text (i.e. result will be HTML-escaped), [(...)] corresponds to th:utext and will not perform any HTML-escaping. So with a variable such as msg = 'This is <b>great!</b>', given this fragment:localhost:8080/success

package com.learn.controller;import java.util.Arrays;
import java.util.Map;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;@Controller
public class HelloController {@ResponseBody@RequestMapping("/hello")public String hello1() {return "hello controller";}@RequestMapping("/success")public String success(Map<String,Object> map) {// classpath:/templates/success.htmlmap.put("hello", "<h1>您好</h1>");map.put("users", Arrays.asList("张三","李四","王五"));return "success";}}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><h1>成功!</h1><div id="div01" class="myDiv" th:id="${hello}" th:class="${hello}" th:text="${hello}">这是显示欢迎信息</div><hr/><div th:text="${hello}"></div><div th:utext="${hello}"></div><hr/><!-- th:each每次遍历都会生成当前这个标签:3个h4 --><h4 th:text="${user}" th:each="user : ${users}"></h4><hr/><h4><span th:each="user : ${users}">[[${user}]]</span></h4></body>
</html>

SpringBoot_web开发-thymeleaf语法相关推荐

SpringBoot_Web开发基础内容
SpringBoot_Web开发 1.简介 2.静态资源映射 3.模板引擎 1.原理 2.引入Thymeleaf 3.Thymeleaf基础规则 4.语法 5.自己扩展类的写法 maven项目导入较慢 ...
thymeleaf 语法——th:text默认值、字符串连接、th:attr、th:href 传参、th:include传参、th:inline 内联、th:each循环、th:with、th:if
文章目录 1.表达式 1.1.简单表达式 1.2.三元运算.条件表达式: 1.3.默认表达式 1.4.综合使用,属性值的 if - else 2.字符串连接.拼接 3.th:attr 的使用 4.th ...
CodeLite开发Gtk 语法检查报错
CodeLite开发Gtk 语法检查报错 Unknown type name 'namespace' ,自动补全出错问题描述解决问题描述使用CodeLite创建Gtkmm C++项目,默认生成 ...
八一、 mpvue-使用介绍（美团团队开发的语法类似 vue的小程序的前端框架）
1. mpvue-介绍 mpvue 是美团团队开发的语法类似 Vue.js 的小程序的前端框架官网开发文档 1.1. 主要特性主要有以下特性彻底的组件化开发能力:提高代码复用性完整的 Vue ...
idea中使用Thymeleaf语法编写代码不提示解决方法
idea中使用Thymeleaf语法编写代码不提示解决方法 1.查看file-setting–pligins中thymeleaf是否开启 2.需要在pom工程中引入thymeleaf启动器坐标 < ...
Thymeleaf语法详解
本文主要介绍下Thymeleaf的基本使用的语法. Thymeleaf语法详解 1.变量输出与字符串操作 1.1 基本用法表达式说明 th:text 在页面中输出值 th:value 可以将一 ...
SpringBoot_web开发-引入thymeleaf
前端交给我们的是html页面,如果是我们以前开发,我们需要把它转成JPS文件,转JSP的好处,当我们查出一些数据,转化到JSP页面以后,我们可以用c:each进行遍历,c:if进行判断,我们JSP支持 ...
Spring Boot 系列（五）web开发-Thymeleaf、FreeMarker模板引擎
前面几篇介绍了返回json数据提供良好的RESTful api,下面我们介绍如何把处理完的数据渲染到页面上. Spring Boot 使用模板引擎 Spring Boot 推荐使用Thymeleaf. ...
Thymeleaf 语法快速入门
1.简介官方网站:https://www.thymeleaf.org Thymeleaf是用来开发Web和独立环境项目的现代服务器端Java模板引擎. Thymeleaf的主要目标是为您的开发工作流 ...

SpringBoot_web开发-thymeleaf语法

SpringBoot_web开发-thymeleaf语法相关推荐

最新文章

热门文章