2021年1月2日星期六

Thymeleaf语法总结 | 笔记分享

Thymeleaf语法总结

一、Thymeleaf介绍

Thymeleaf是Spring boot推荐使用的模版引擎，直接以html显示，前后端可以很好的分离。

二、Thymeleaf语法（Thymeleaf3）

在使用Thymeleaf时页面要引入名称空间：
1、th属性，常用th属性如下：
1）th:text：文本替换；

<h1 th:text="${session.vel2}"></h1>

    2）th:utext：支持html的文本替换。
    3）th:value：属性赋值
    4）th:each：遍历循环元素

//每次遍历都会产生th:each所标注的标签以及内部标签 

<tr th:each="user : ${users}"> 
　　<td th:text="${user.name}">Onions</td>
　　<td th:text="${user.age}">2.41</td>
</tr>

5）th:if：判断条件，类似的还有th:unless，th:switch，th:case

<div th:if="true"> 你填的是true</div> //这里引用了一个th:if指令，跟vue中的v-if类似

    6）th:insert：代码块引入，类似的还有th:replace，th:include，常用于公共代码块提取的场景
    7）th:fragment：定义代码块，方便被th:insert引用
    8）th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。

<h2 th:object="${user}"> 　　<p>Name: <span th:text="*{name}">Jack</span>.</p> 　　<p>Age: <span th:text="*{age}">21</span>.</p> 　　<p>friend: <span th:text="*{friend.name}">Rose</span>.</p> </h2>

9）th:attr：设置标签属性，多个属性可以用逗号分隔
例子：

前端HTML

<!DOCTYPE html><!--名称空间-->

<html lang="en" <head> <meta charset="UTF-8"> <title>Thymeleaf 语法</title>
</head>
<body> <h2>ITDragon Thymeleaf 语法</h2> <!--th:text 设置当前元素的文本内容，常用，优先级不高--> <p th:text="${thText}" /> <p th:utext="${thUText}" />  <!--th:value 设置当前元素的value值，常用，优先级仅比th:text高--> <input type="text" th:value="${thValue}" />  <!--th:each 遍历列表，常用，优先级很高，仅此于代码块的插入--> <!--th:each 修饰在div上，则div层重复出现，若只想p标签遍历，则修饰在p标签上--> <div th:each="message : ${thEach}"> <!-- 遍历整个div-p，不推荐-->  <p th:text="${message}" /> </div> <div> <!--只遍历p，推荐使用-->  <p th:text="${message}" th:each="message : ${thEach}" /> </div>  <!--th:if 条件判断，类似的有th:switch，th:case，优先级仅次于th:each, 其中#strings是变量表达式的内置方法--> <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>  <!--th:insert 把代码块插入当前div中，优先级最高，类似的有th:replace，th:include，~{} ：代码块表达式 --> <div th:insert="~{grammar/common::thCommon}"></div>  <!--th:object 声明变量，和*{} 一起使用--> <div th:object="${thObject}">  <p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->  <p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}-->  <p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}--> </div>
</body>
</html>

后台controller:

@Controllerpublic class ThymeleafController {  @RequestMapping("thymeleaf") public String thymeleaf(ModelMap map) {  map.put("thText", "th:text 设置文本内容 <b>加粗</b>");  map.put("thUText", "th:utext 设置文本内容 <b>加粗</b>");  map.put("thValue", "thValue 设置当前元素的value值");  map.put("thEach", Arrays.asList("th:each", "遍历列表"));  map.put("thIf", "msg is not null");  map.put("thObject", new ThObject(1L, "th:object", "用来偷懒的th属性"));  return "grammar/thymeleaf"; }}

2、标准表达式语法：

${...} 变量表达式，Variable Expressions
@{...} 链接表达式，Link URL Expressions
#{...} 消息表达式，Message Expressions
~{...} 代码块表达式，Fragment Expressions
*{...} 选择变量表达式，Selection Variable Expressions
~{...} 代码块表达式，支持两种语法结构

　　　　推荐：~{templatename::fragmentname}
　　　　支持：~{templatename::#id}

templatename：模版名，Thymeleaf会根据模版名解析完整路径：/resources/templates/templatename.html，要注意文件的路径。
fragmentname：片段名，Thymeleaf通过th:fragment声明定义代码块，即：th:fragment="fragmentname"
id：HTML的id选择器，使用时要在前面加上#号，不支持class选择器。

代码块表达式的使用

代码块表达式需要配合th属性（th:insert，th:replace，th:include）一起使用。
th:insert：将代码块片段整个插入到使用了th:insert的HTML标签中，
th:replace：将代码块片段整个替换使用了th:replace的HTML标签中，
th:include：将代码块片段包含的内容插入到使用了th:include的HTML标签中，

#{...} 消息表达式

消息表达式一般用于国际化的场景。

@{...} 链接表达式

链接表达式好处
不管是静态资源的引用，form表单的请求，凡是链接都可以用@{...} 。这样可以动态获取项目路径，即便项目名变了，依然可以正常访问
#修改项目名，链接表达式会自动修改路径，避免资源文件找不到 server.context-path=/itdragon
链接表达式结构
无参：@{/xxx}
有参：@{/xxx(k1=v1,k2=v2)} 对应url结构：xxx?k1=v1&k2=v2
引入本地资源：@{/项目本地的资源路径}
引入外部资源：@{/webjars/资源在jar包中的路径}
列举：

<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet"><link th:href="@{/main/css/itdragon.css}" rel="stylesheet"><form th:action="@{/user/login}" th:method="post" ><a th:href="@{/login.html(l='zh_CN')}">中文</a><a th:href="@{/login.html(l='en_US')}">English</a>

${...} 变量表达式功能

一、可以获取对象的属性和方法
二、可以使用ctx，vars，locale，request，response，session，servletContext内置对象
三、可以使用dates，numbers，strings，objects，arrays，lists，sets，maps等内置方法（重点介绍）

常用的内置对象

一、ctx ：上下文对象。
二、vars ：上下文变量。
三、locale：上下文的语言环境。
四、request：（仅在web上下文）的 HttpServletRequest 对象。
五、response：（仅在web上下文）的 HttpServletResponse 对象。
六、session：（仅在web上下文）的 HttpSession 对象。
七、servletContext：（仅在web上下文）的 ServletContext 对象
这里以常用的Session举例，用户刊登成功后，会把用户信息放在Session中，Thymeleaf通过内置对象将值从session中获取。
// java 代码将用户名放在session中 session.setAttribute("userinfo",username); // Thymeleaf通过内置对象直接获取 th:text="${session.userinfo}"

常用的内置方法

一、strings：字符串格式化方法，常用的Java方法它都有。比如：equals，equalsIgnoreCase，length，trim，toUpperCase，toLowerCase，indexOf，substring，replace，startsWith，endsWith，contains，containsIgnoreCase等
二、numbers：数值格式化方法，常用的方法有：formatDecimal等
三、bools：布尔方法，常用的方法有：isTrue，isFalse等
四、arrays：数组方法，常用的方法有：toArray，length，isEmpty，contains，containsAll等
五、lists，sets：集合方法，常用的方法有：toList，size，isEmpty，contains，containsAll，sort等
六、maps：对象方法，常用的方法有：size，isEmpty，containsKey，containsValue等
七、dates：日期方法，常用的方法有：format，year，month，hour，createNow等

 1 <!DOCTYPE html><html lang="en"

 1 @RequestMapping("varexpressions")public String varexpressions(ModelMap map) { 2 map.put("itdragonStr", "itdragonBlog"); 3 map.put("itdragonBool", true); 4 map.put("itdragonArray", new Integer[]{1,2,3,4}); 5 map.put("itdragonList", Arrays.asList(1,3,2,4,0)); 6 Map itdragonMap = new HashMap(); 7 itdragonMap.put("thName", "${#...}"); 8 itdragonMap.put("desc", "变量表达式内置方法"); 9 map.put("itdragonMap", itdragonMap);10 map.put("itdragonDate", new Date());11 map.put("itdragonNum", 888.888D); return "grammar/varexpressions";12 }

原文转载：http://www.shaoqun.com/a/504766.html

跨境电商：https://www.ikjzd.com/

net a porter：https://www.ikjzd.com/w/2132

eori：https://www.ikjzd.com/w/499

Thymeleaf语法总结一、Thymeleaf介绍Thymeleaf是Springboot推荐使用的模版引擎，直接以html显示，前后端可以很好的分离。二、Thymeleaf语法（Thymeleaf3）在使用Thymeleaf时页面要引入名称空间：1、th属性，常用th属性如下：1）th:text：文本替换；<h1th:text="${session.vel2}">
好卖家：好卖家
三维度科技：三维度科技
马尔代夫真的会沉没吗？：马尔代夫真的会沉没吗？
昆明市内一日游有什么好玩的呢？：昆明市内一日游有什么好玩的呢？
做巴西跨境电商，能赚到钱吗？：做巴西跨境电商，能赚到钱吗？

星空娱乐频道

2021年1月2日星期六