2.Thymeleaf: The Standard Dialect标准方言 左手的ㄟ右手 2022-05-17 04:16 159阅读 0赞 ### Thymeleaf.html ### ### 一.声明当前文件是thymeleaf,避免编辑器出现html验证错误 ### <html xmlns:th="http://www.thymeleaf.org"></html> 将包含以th前缀开头的属性,如<span th:text="...">。 ### 二.5种表达式类型 ### 1. $\{...\} : 变量表达式。例如:<p th:text="$\{username\}"></p> 2. \*\{...\} : 选择表达式。例如:<p th:text="\*\{product.name\}"></p> 3. \#\{...\} : 消息 (i18n) 表达式。通常称为文本外部化,国际化或i18n)允许从外部源(如:`.properties`)文件中检索特定于语言环境的消息,通过键来引用这引用消息。 4. @\{...\} : 链接 (URL) 表达式。用来配合link src href使用的语法。例如: <script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@\{/static/js/thymeleaf.js\}"></script>使用的是相对路径。 5. ~\{...\} : 片段表达式。用来引入公共部分代码片段,并进行传值操作使用的语法,最常见的是使用th:insert或th:replace来插入片段:。例如: <div th:with="frag=~{footer :: #main/text()}"> <p th:insert="${frag}"> </div> ### 三.文字和操作 ### 有很多类型的文字和操作可用,它们分别如下: * 文字 * 文本文字,例如:`'one text'`, `'Another one!'`,`…` * 数字文字,例如:`0`,`10`, `314`, `31.01`, `112.83`,`…` * 布尔文字,例如:`true`,`false` * Null文字,例如:`Null` * 文字标记,例如:`one`, `sometext`, `main`,`…` * 文本操作: * 字符串连接:`+` * 文字替换:`|The name is ${name}|` * 算术运算: * 二进制操作:`+`, `-`, `*`, `/`, `%` * 减号(一元运算符):`-` * 布尔运算: * 二进制运算符,`and`,`or` * 布尔否定(一元运算符):`!`,`not` * 比较和相等: * 比较运算符:`>`,`<`,`>=`,`<=`(`gt`,`lt`,`ge`,`le`) * 相等运算符:`==`, `!=` (`eq`, `ne`) * 条件操作符: * If-then:`(if) ? (then)` * If-then-else:`(if) ? (then) : (else)` * Default: `(value) ?: (defaultvalue)` ### 四. 表达式预处理 ### 关于表达式的最后一件事是知道表达式预处理,在`__`之间指定,如下所示: #{selection.__${sel.code}__} ### 五.输出内容 ### 1. <p th:text="\#\{name\}">Welcome to our grocery store!</ 说明:$\{name\} 用来引用 name 变量 2.字符串转义与未转义,未转义可以渲染文本中的标签。 string s="<p style='color:red'> 红色文字</p>";<!--定义一个常量--> <p th:text="${s}"></p> 显示的结果为:<p style='color:red'> 红色文字</p> <p th:utext="${s}"></p>显示的结果为:红色文字 3.获取对象属性的两种方式,直接调用方法 例如:<p th:text="$\{product.name\}"></p><!--输出product对象的name属性--> <p th:text="$\{product.getName()"></p> 4.使用\*\{\}方式获得当前对象的属性 例如:<p th:text="\*\{name\}"></p> 5.算数运算,只演示了加法,其他的减法,乘法什么的略过不表 例如:<p th:text="$\{product.price+1000\}"></p> ### 六.访问对象 ### $\{param.x\} 返回名为x 的 request参数。(可能有多个值) $\{session.x\} 返回名为x的Session参数。 $\{application.x\} 返回名为 servlet context 的参数。 ### 七.其他语法 ### 1.字符串连接 方式一:使用加号<p th:text="$\{name\}+'hello world'"></p> 方式二:在前后放上| <p th:text="|$\{name\}hello world|"></p> 2.标准的URL用法 2.1 关于url:在使用html的过程,我们需要用到css和js,怎么引入它们? 第一步:在webapp在创建一个新的目录:static(表示静态文件),再创建js目录放入js文件,创建css目录放入css文件。 第二步:引入css和js文件。 引入css:<link th:href="@\{/static/css/style.css\}"/> 引入js:<script th:src="@\{/static/js/main.js\}"/> 注:使用 @这种方式引入,在渲染后的html 里会自动生成 上下文路径 2.2 在使用超链接的时候 <a href="product/list.html" th:href="@{/product/list}">Product List</a> <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a> 3.包含(include) 例如:在include.html中 <footer th:fragment="footer1"> <p>all rights reserved</p> </footer> <footer th:fragment="footer2(start,now)"> <p th:text="|${start}-${now}all rights reserved|"></p> </footer> 在测试test.html中 <div th:replace="include::footer1"></div>结果显示 all rights reserved <div th:repalce="include::footer2(2015,2018)"></div><!-- 结果显示 2015-2018all rights reserved --> 4.条件判断 4.1 if和unless <p th:if="${boolean}">如果boolean为真,则显示这句话</p> <p th:if="{not boolean}" >如果boolean为假,则显示这句话</p> <p th:unless="${boolean}">如果boolean为假,则显示这句话</p> <p th:text="${boolean}?'boolean为真显示这句话':'不然显示这句话'">三相表达式作为条件判断</p> 4.2 switch语句 <div th:switch="${user.role}"> <p th:case="'admin'">User is an administrator</p> <p th:case="#{roles.manager}">User is a manager</p> <p th:case="*">User is some other thing</p> --默认的 case 相当于default </div> 5.遍历(循环、迭代):四种遍历的方式 第一种:普通遍历 <tr th:each="p:${list}"> <td th:text="${p.id}"></td> <td th:text="${p.name}"></td> <td th:text="${p.price}"></td> </tr> 第二种:带状态的遍历,更多信息查看官网文档 <tr class="${status.even}?even:odd" th:each="p,status:${list}"> <td th:text="${status.index}"></p> <td th:text="${p.id}"></p> <td th:text="${p.name}"></p> <td th:text="${p.price}"></p> </tr> 第三种:下拉框遍历 <select size="3"> <option th:each="p:${list}" th:value="${p.id}" th:selected="${p.id==currentProduct.id} th:text="${p.name}"/> </select> 第四种:单选框遍历 <input name="product" type="radio" th:each="p:${list}" th:value="${p.id}" th:checked="${p.id==currentProduct.id}" th:text="{p.name}" /> 6.设置属性值(更多信息查看官网文档) 6.1 设置任何Attribute 的方法 <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/><!-- 设置单个--> <img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" /> <!-- 一次设置多个--> 6.2 设置一些内置的Attribute的方法 <li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li> <form action="subscribe.html" th:action="@{/subscribe}"> <input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/> <img src="../../images/gtvglogo.png" th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" /> -- 一次设置多个(alt title)的方法 </form> 6.3 设置html里没有指的任何属性的语法 <span th:whatever="$\{user.name\}">...</span> ---whatever 可以换成任何你想设的属性 7.内置工具:什么是内置工具?作用?为了模板更加易用,Thymeleaf还提供了一系列Utility对象(内置于Context中),可以通过\#直接访问。一共有16种,详情查看官网文档 date为例 Date date=new Date(); model.addAttribute("now",date); 直接输出日期:${now},<p th:text="${now}"></p> 默认格式化:${#dates.format(now)},<p th:text="{$dates.format(now)}"></p> 自定义格式化:${#dates.format(now,'yyyy-MM-dd,HH:mm:ss'},<p th:text="${#dates.format(now,'yyyy-MM-dd,HH:dd:ss')}"></p> 八.应用(在表单、curd和分页中应用) 很好的thymeleaf模板 入门例子:[https://blog.csdn.net/f0rd\_/article/details/80580225][https_blog.csdn.net_f0rd_article_details_80580225] [https_blog.csdn.net_f0rd_article_details_80580225]: https://blog.csdn.net/f0rd_/article/details/80580225
还没有评论,来说两句吧...