第二章、Thymeleaf 基础知识

最新推荐文章于 2023-04-08 22:41:57 发布

荒--

最新推荐文章于 2023-04-08 22:41:57 发布

阅读量140

点赞数

分类专栏： SpringBoot博客-前后端

本文链接：https://blog.csdn.net/wangqing84411433/article/details/112724107

版权

SpringBoot博客-前后端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

变量表达式 ${...}（美元表达式），用于访问容器上下文环境中的变量，功能同jstl中的${}

protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
	throws ServletException, IOException {
	...
	//Create Servlet context
	WebContext ctx = new WebContext(req, resp, this.getServletContext(), req.getLocale());
	ctx.setVariable("helloword","hello thymeleaf,wellcome!");
	//Executing template engine
	templateEngine.process("home", ctx, resp.getWriter());
}

获取 helloword变量的值

<span th:text="${helloword}"></span>

输出的值 hello thymeleaf,wellcome!

消息表达式 #{...}（井号表达式，资源表达式）。通常与th:text属性一起使用，指明声明了th:text的标签的文本是#{}中的key所对应的value，而标签内的文本将不会显示。

<!-- 读取属性文件中 key 为 name 的值 -->
<p th:text="#{name}"></p>

注意： 我们必须先要配置属性文件所在位置，在项目配置文件中配置以下内容：

spring:
  messages:
    basename: msg

然后在 resource 目录下创建 msg.properties 文件，并在属性文件中写入以下内容：

name=ZS

输出的值 ZS

通常用于显示页面静态文本，将静态文本维护在properties文件中也方面维护，做国际化等

项目中一般是用于读取属性文件（.properties）中的值，它常常用于国际化，不过我们的产品一般不会出口，所以一般情况下我们用不到。

选择表达式 *{...}（星号表达式）

<!-- book 中从上下文中取的一个变量 -->
<div th:object="${book}">
	<!-- title 是 book 中的属性 -->
	<span th:text="*{title}"></span>
</div>

其中 th:object 的意思是：用来接受后台传过来的对象

选择表达式与变量表达式有一个重要的区别：选择表达式是在当前选则的对象而不是整个上下文变量映射上执行。也就是：只要是没有选择的对象，选择表达式与变量表达式的语法是完全一样的

链接表达式 @{...}

链接表达式可以是相对路径，这种情况下，应用程序上下文不会作为URL的前缀 --相对路径（相对当前自身路径）：

<a th:href="@{../result}">...</a>

也可以是服务器相对(同样没有应用程序上下文前缀) --相对路径（相对服务器）：

<a th:href="@{~/result}">...</a>

和协议相对(就像绝对URL，但浏览器将使用在显示的页面中使用的相同的HTTP或HTTPS协议) --相对路径（相对协议）：

<a th:href="@{//localhost:8888/result}">...</a>

当然Link表达式可以是绝对的 --绝对路径：

<a th:href="@{http://www.mycompany.com/main}">...</a>
<a th:href="@{http://localhost:8888/result}">...</a>

分段表达式 th:insert 或 th:replace th:include主要用于模板布局时的引用。也就是在一个页面中引入另一个页面中的内容

th:insert 如同插入的字面意思，将指定的代码片段插入主标签内
th:replace 如同替换的字面意思，将主标签替换为指定的代码片段
th:include l类似insert，但不是插入片段，而是插入片段的内容(3.x版本后不推荐使用)

案例一如下：我们准备两个页面，分别是 result.html 和 foot.html，我们在 result.html 中引入 foot.html 的内容。

result.html：

<body>
	<p>这是 result.html 页面</p>
	<div th:insert="~{foot :: copy}"></div>
</body>

foot.html：

<body>
	<div th:fragment="copy">
		&copy; 2020 <a href="http://www.baidu.com">百度</a>
	</div>
</body>

浏览器显示效果

页面源代码

案例二如下:

<footer th:fragment="copy">
    &copy 2017 <a href="https://waylau.com">waylau.com</a>
</footer>

<body>
    <div th:insert="footer :: copy"></div>
    <div th:replace="footer :: copy"></div>
    <div th:include="footer :: copy"></div>
</body>

引入后页面变为如下：

<footer th:fragment="copy">
    &copy 2017 <a href="https://waylau.com">waylau.com</a>
</footer>

<body>
    <div>
        <footer>
            &copy 2017 <a href="https://waylau.com">waylau.com</a>
        </footer>
    </div>
    
    <footer>
        &copy 2017 <a href="https://waylau.com">waylau.com</a>
    </footer>

     <div>    
        &copy 2017 <a href="https://waylau.com">waylau.com</a>
    </div>
</body>

字面量

1.文本

<span th:text="'hello world'">...</span>

2.数字可以进行运算

<span th:text="2013 + 2">...</span>

3.布尔

<div th:if="${user.isAdmin()} == false"></div>

4.null

<div th:if="${variable.something} == null"></div>

5.算数操作 + - * / %

<div th:with="isEven=(${user.count} % 2 == 0)"></div>

6.比较和等价 > < >= <= (gt lt ge le) == != (eq ne)

<ul data-th-if="${page.totalPages le 7}"></ul>
<ul data-th-if="${page.totalPages eq 8}"></ul>

7.条件运算符(三目运算)

<tr th:class="${row.even}? 'even' : 'add'"></tr>

8.无操作 user.name 不存在则输出 666

<span th:text="${user.name} ?: _">666</span>

设置任意属性值 th:attr

<form action="xx.html" th:attr="action=@{/sub}">
    <input type="submit" value="xx" th:attr="value=#{sub.submit}" />
</form>

最终显示效果如下

<form action="/gtvg/login">
    <input type="submit" value="999" />
</form>

设置值到指定的属性 th:属性名

<form action="xx.html" th:action="@{/sub}">
<input type="submit" value="xx" th:value="#{sub.submit}" />

固定值布尔属性

<input type="checkbox" name="option2" checked />
<input type="checkbox" name="option1" checked="checked" />

在thymeleaf中如下

<input type="checkbox" name="option2" th:checked="${user.active}" />

若user.active为true 则表示选中状态若为false 则为未选中状态

基本的迭代 th:each

<li th:each="book : ${books}" th:text="${book.title}">xxx</li>

注意：list map均可使用迭代器

迭代器中的状态变量

index 迭代器索引从0开始

count 迭代器索引从1开始

size 迭代器中元素总数

current 当前迭代的变量

even/odd 奇数/偶数

first last 判断当前是否是第一个或最后一个

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
    <td th:text="${prod.name}">xxx</td>
    <td th:text="${prod.title}">xxx</td>
</tr>

条件语句 th:if th:unless if和unless是相反的

<div th:if="${a gt 1 && a lt 9}"></div>
或
<div th:if="（${a gt 1}） and ${a lt 9}"></div>
 
表示：如果 a > 1 且 a < 9

<div th:if="${a gt 1 || a lt 9}"></div>
或
<div th:if="（${a gt 1}） or ${a lt 9}"></div>
 
表示：如果 a > 1 或 a < 9

<td th:if="${test.Score} gt 0 and ${test.Score} lt 60">不及格</td>

<td th:unless="${test.Score} gt 0 and ${test.Score} lt 60">及格</td>

若是布尔值 true表示成立若为数字则也表示成立若为null 表示不成立

switch

<div th:switch="${user.role}">
    <p th:case="'admin'">xxx</p>
    <p th:case="#{roles.manager}">xxx</p>
    <p th:case="*">xxx</p>
</div>

属性优先级

<ul>
    <li th:each="item : ${items}" th:text="${item.description}">xxx</li>
</ul>

当在同一个标签中写入多个th:*属性时候，所有Thymeleaf属性定义一个数字优先,建立他们的顺序执行的标签。这个顺序是:

注释

1.标准 HTML/XML注释

<!-- xxx -->

2.Themeleaf解析器级注释块 Thymeleaf解析时会移除代码

语法：

单行    <!--/*  xxxxx  */-->
多行
<!--/*-->
    xxxx
    xxxx
<!--*/-->

<!--/*--> 
  <div>
     you can see me only before Thymeleaf processes me!
  </div>
<!--*/-->

3.原型注释块当模板静态打开时，原型注释块所注释的代码将被注释，而在模板执行时，这些注释的代码会被现实出来(与解析器级注释块相反)

语法：

<!--/*/    /*/-->

案例：

<span>hello!</span>
<!--/*/
  <div th:text="${...}">
    ...
  </div>
/*/-->
<span>goodbye!</span>

thymealeaf解析时会移除掉此标签对，但不会移除其中的内容。

解析完成：

<span>hello!</span>
 
  <div th:text="${...}">
    ...
  </div>
 
<span>goodbye!</span>

内联

1.内联表达式

[[...]] 对应 th:text (会对特殊符号转义)

[(...)] 对应 th:utext (不会对特殊符号转义)

<p>The message is "[(${msg})]"</p>  不转义文本里的特殊字符  <p>The message is "This is <b>great!</b>"</p>

<p>The message is "[[${msg}]]"</p>  会转义文本里的特殊字符  <p>The message is "This is &lt;b&gt;great!&lt;/b&gt;"</p>

2.禁用内联语法

th:inline="none"

有时需要禁用这种机制比如想输出[[xxx]]或者[(xxx)]文本内容

<p th:inline="none">A double array looks like this: [[1,2,3], [4,5]}!</p>

3.JavaScript内联只要加入th:inline="javascript"在js代码中才能使用[[]]

<script th:inline="javascript">
    ...
    var username = [[${session.user.username}]];
    alert(username);
    ...
</script>

4.CSS内联

classname = 'main elems' 
align = 'center'

<style th:inline="css">
    .[[${classname}]]{
        text-align: [[${align}]];
    }
</style>

解析完成后如下：空格被转义

<style th:inline="css">
    .main\ elems{
        text-align: center;
    }
</style>

表达式基本对象

#ctx：上下文对象。是org.thymeleaf.context.IContext或者org.thymeleaf.context.WebContext的实现

#local：直接访问与java.util.Local关联的当前请求

request/session等属性

param：用于检索请求参数

session：用于检索session属性

application：用于检索application/servlet上下文属性

Web上下文对象

#request：直接访问与当前请求关联的javax.servlet.http.HttpServletRequest对象

#session：直接访问与当前请求关联的javax.servlet.http.HttpSession对象

#servletContext：直接访问与当前请求关联的javax.servlet.ServletContext对象

荒--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第二章、Thymeleaf 基础知识

变量表达式 ${}（美元表达式），用于访问容器上下文环境中的变量，功能同jstl中的${}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { ... //Create Servlet context WebContext ctx = new WebContext(req, resp, this.getServletCont.
复制链接

扫一扫