1-9springboot之thymeleaf常用语法(html页面)
一、引用命名空间 <html xmlns:th="http://www.thymeleaf.org"> 在html中引入此命名空间,可避免编辑器出现html验证错误,虽然加不加命名空间对Thymeleaf的功能没有任何影响。
引入css
<link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet" /> 引入js
<script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script> 二、输出内容 2.1 <p th:text="#{home.welcome}">Welcome to our grocery store!</p> 说明: 1. th:text 用来将内容输出到所在标签的body中。 2. #{home.welcome} 用来引入数据home对象中的 welcome属性。 3. 可以用th:utext 用来显示“unescaped ” 的html内容。 2.2 <p>Today is: <span th:text="${today}">13 February 2011</span></p> 说明:${today} 用来引用 today 变量 三、访问对象 ${param.x} 返回名为x 的 request参数。(可能有多个值) ${session.x} 返回名为x的Session参数。 ${application.x} 返回名为 servlet context 的参数。 四、基本语法 4.1 #{home.welcome} -- 访问数据 4.2 #{home.welcome(${session.user.name})} -- 格式化数据 当 home.welcome 为 "abcdegf{0}" 类似这种内容时。(多个参数以逗句分隔)。 4.3 ${today} --- 访问变量 4.4 访问基本对象 #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. 其它公共对象参考: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects 4.5 日期的输出 <span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span> 4.6 星号语法 <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> 4.7 输出URL <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> 4.8 使用代码段 <div th:insert="~{commons :: main}">...</div> 4.9 直接输出内容 <span th:text="'working web application'"> -- 输出字符 <span th:text="2013 + 2"> -- 输出数据表达式 <div th:if="${user.isAdmin()} == false"> --输出布尔表达式 <div th:if="${user.id}>2"> --输出判断表达式 <span th:text="'Welcome to our application, ' + ${user.name} + '!'"> -- 带变量的 4.10 条件表达式 <tr th:class="${user.id}? 'even' : 'odd'">
...
</tr> <tr th:class="${user.id} > 2? 'even' : 'odd'">
...
</tr> <tr th:class="${row.even}? 'alt'">
...省略 false 结果的表达方式
</tr> <div th:object="${session.user}">
...省略 true 结果的表达方式
<p>Age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p>
</div> <span th:text="${user.name} ?: _">no user authenticated</span> --不做任何处理时用下划线 _ 表示 4.11 格式化 <td th:text="${{user.lastAccessDate}}">...</td> --${{.}} 调用默认的格式化器来输出结果。 4.12 预处理 <p th:text="${__#{article.text('textVar')}__}">Some text here...</p> 说明:thymeleaf 的处理模板内容的顺序与书写顺序无关,只能通过 __${expression}__ ,来将需要先一步计算出来后面 要用的变量指定为优化处理。 五、设置 Attribute 值 5.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}" /> --一次设置多个 5.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)的方法 其它的可用属性:http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-value-to-specific-attributes 5.3 设置html里没有指的任何属性的语法 <span th:whatever="${user.name}">...</span> ---whatever 可以换成任何你想设的属性 六、循环输出的语法 6.1 基本循环 <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> 6.2 循环状态的使用 <table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
<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> 关于状态的其它信息的使用详细参考:http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#keeping-iteration-status 七、条件判断 7.1 if 和 unless <a href="comments.html" th:href="@{/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">view</a> <a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">view</a> 7.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> 八、模板 include 8.1 定义和引用代码块 定义代码块 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <body> <div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div> </body> </html> 引用代码块 <body> ... <div th:insert="~{footer :: copy}"></div> </body> 引用未用fragment 标注的代码块 <div id="copy-section">
© 2011 The Good Thymes Virtual Grocery
</div> <body> ... <div th:insert="~{footer :: #copy-section}"></div> </body> 8.2 th:insert th:replace th:include 之间的区别 th:insert --- 插入代码块 th:replace -- 替换代码块会替换掉容器标签 th:include ---- 和insert相似但只会插入fragment标注body内的内容。 需要替换的片段内容:
<footer th:fragment="copy">
<script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</footer> 导入片段: <div th:insert="footer :: copy"></div> <div th:replace="footer :: copy"></div> <div th:include="footer :: copy"></div> 结果为: <div>
<footer>
<script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</footer>
</div> <footer>
<script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</footer> <div>
<script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</div> 8.3 带参数的代码段 <div th:fragment="frag (onevar,twovar)">
<p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div> <div th:replace="::frag (${value1},${value2})">...</div>
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div> 九、局部变量的使用示例 <div th:with="firstPer=${persons[0]}">
<p>
The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
</p>
</div> <div th:with="firstPer=${persons[0]},secondPer=${persons[1]}">
<p>
The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
</p>
<p>
But the name of the second person is
<span th:text="${secondPer.name}">Marcus Antonius</span>.
</p>
</div> 十、注释 <!-- ... --> 十一、说明 以上只列出Thymeleaf了简要常用的语法和使用方式,更多详情的说明和规则请参见:http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#introducing-thymeleaf
1-9springboot之thymeleaf常用语法(html页面)的更多相关文章
- Thymeleaf常用语法:表达式语法之运算符
Thymeleaf表达式语法之常量分为字符串常量.数字常量.布尔值常量.空值常量:运算符分为算术运算符.关系运算符.条件运算符.无操作符. 开发环境:IntelliJ IDEA 2019.2.2Spr ...
- Thymeleaf常用语法:模板片断
系统中的很多页面有很多公共内容,例如菜单.页脚等,这些公共内容可以提取放在一个称为“模板片断”的公共页面里面,其它页面可以引用这个 “模板片断”内容. 一.模板片断的定义 可以是html标签,也可以使 ...
- Thymeleaf常用语法:模板注释
Thymeleaf模板注释分为标准HTML/XML注释.解析层注释.原型注释三种. 一.注释说明 1.标准HTML/XML注释 直接通过浏览器打开,不显示,Thymeleaf模板引擎解析也不处理,但查 ...
- thymeleaf常用语法
常用标签语法:①th:text<span th:text="${name}">1</span>注释:如果${name}有值则将替换掉1的值,若无则为1 ②t ...
- Thymeleaf常用语法:数据延迟加载
在处理模板时,可以由模板逻辑决定是否加载数据,以提高性能.在Spring Boot控制器中设置数据时,使用LazyContextVariable可以实现这功能. 开发环境:IntelliJ IDEA ...
- Thymeleaf常用语法:HTML属性设置
使用Thymeleaf的属性来设置HTML属性.(1)使用th:attr属性可以修改原来HTML节点的属性:(2)th:attr属性可以同时设置多个属性:(3)每一个HTML属性都有对应的Thymel ...
- Thymeleaf常用语法:模板文件中表达式调用Java类的静态方法
在模板文件的表达式中,可以使用“${T(全限定类名).方法名(参数)}”这种格式来调用Java类的静态方法. 开发环境:IntelliJ IDEA 2019.2.2Spring Boot版本:2.1. ...
- Thymeleaf常用语法:自定义数据转换类
在模板文件中,可以使用“${{...}}”表达式进行数据转换,Thymeleaf会使用配置好的数据转换类,来实现转换.例如一个User对象,简单起见假设有姓名和年龄两个字段,对象的toString() ...
- Thymeleaf常用语法:使用星号表达式
在处理模板时,一般情况都是使用变量表达式 ${...} 来显示变量,还可以使用选定对象表达式 *{...},它也称为星号表达式.如果在模板中先选定了对象,则需要使用星号表达式.Thymeleaf的内置 ...
随机推荐
- 【应急响应】Linux安全加固
一.补丁管理 1.查看系统信息 uname -a 2.配置yun源 CentosOS 可以直接升级 RHEL系列可以配置使用CentosOS源 3.升级软件包 yum –y update 二.安全工具 ...
- 1012 The Best Rank
1012 The Best Rank 1. 注意点 一名同学同样排名下的科目优先级问题 不同同学分数相同时排名相同,注意 排名不是 1 1 2 3 4 这种, 而是 1 1 3 4 5 注意到有些同学 ...
- 断点调试,issubclass和ininstance的使用
一等公民 只要可以把一个东西赋值给一个变量,这个东西就叫一等公民 断点调试 在想要加断点的地方用鼠标点击一下,你会看到一个红色圆圈 变红的地方,程序执行到,就会暂停 断电应该加载报错之前 绿色箭头表示 ...
- pgspider http fdw http 相关的几个配置参数
http 请求时间配置 session 级别的 set http.timeout_msec = 10000; SELECT http_set_curlopt('CURLOPT_TIMEOUT', '1 ...
- 七、linux基础-jdk1.8和weblogic12.2.1.3.0安装
1.环境探查与准备 安装jdk和weblogic前需要对进行安装的linux系统硬件和软件环境进行探查确认,以确保支持对jdk1.8.0_144_1和weblogic12.2.1.3和的安装.webl ...
- 用Fiddler实现手机抓包
手机用fiddler抓包 电脑最好是笔记本,这样能和手机保持统一局域网内:其他不多说,直接说步骤了. 一.对PC(笔记本)参数进行配置 1. 配置fiddler允许监听到https(fiddle ...
- docker-compose介绍及部署LNMP
一.简介 Compose是用于定义和运行多容器Docker应用程序的工具,是docker的服务编排工具,主要应用于构建基于Docker的复杂应用,compose通过一个配置文件来管理多个docker容 ...
- Python中,关于调用带参函数,一些需要注意的问题(监听时)
1.如果监听调用的函数不带参数(start()) Button.clicked.connect(start)) def strat(): ... 2.如果监听调用的函数带参数(start(x,y)) ...
- 「JSOI2016」灯塔
「JSOI2016」灯塔 传送门 我们先只计算照亮左边的灯塔的最低高度,计算右边的类同,然后只要取 \(\max\) 就好了. 那么稍微整理一下式子:\(p_i \ge h_j - h_i + \sq ...
- vtk学习记录(一)——vtk工程配置与生成
前言 图形图像这块儿,最近因为工作需要接触的相对多了点儿,精力基本上也都投入了这块儿,搞的天天要死要活,毕竟我一个.net的突然来到cxx的世界,也是很苦恼的,也是头一次见到新建工程就需要配置并且解决 ...