关于java:动力节点王妈妈Springboot教程九Thymeleaf模板引擎

39次阅读

共计 6609 个字符，预计需要花费 17 分钟才能阅读完成。

官网下载地址

能源节点 springboot 材料

视频观看地址

https://www.bilibili.com/vide…

Thymeleaf：是应用 java 开发的模板技术，在服务器端运行。把解决后的数据发送给浏览器。

模板是作视图层工作的。显示数据的。Thymeleaf 是基于 Html 语言。Thymleaf 语法是利用在 html 标签中。SpringBoot 框架集成 Thymealeaf, 应用 Thymeleaf 代替 jsp。

Thymeleaf 的官方网站：http://www.thymeleaf.org

Thymeleaf 官网手册：

https://www.thymeleaf.org/doc…

1. 规范变量表达式

语法：${key}

作用：获取 key 对于的文本数据，key 是 request 作用域中的 key，应用 request.setAttribute(), model.addAttribute()

在页面中的 html 标签中，应用 th:text=”${key}”

<h3> 规范变量表达式:  ${key}</h3>
<p th:text="${site}">key 不存在 </p>
<br/>
<p> 获取 SysUser 对象 属性值 </p>
<p th:text="${myuser.id}">id</p>
<p th:text="${myuser.name}"> 姓名 </p>
<p th:text="${myuser.sex}"> 姓名：m 男 </p>
<p th:text="${myuser.age}"> 年龄 </p>
<p th:text="${myuser.getName()}"> 获取姓名应用 getXXX</p>

</div>

2. 抉择变量表达式（星号变量表达式）

语法：*{key}

作用：获取这个 key 对应的数据，*{key} 须要和 th:object 这个属性一起应用。

目标是简略获取对象的属性值。

<p> 应用 *{} 获取 SysUser 的属性值 </p>
<div th:object="${myuser}">
    <p th:text="*{id}"></p>
    <p th:text="*{name}"></p>
    <p th:text="*{sex}"></p>
    <p th:text="*{age}"></p>

</div>
<p> 应用 *{} 实现的示意 对象的属性值 </p>
<p th:text="*{myuser.name}" ></p>

3. 链接表达式

语法：@{url}

作用：示意链接，能够

<script src="..."> , <link href="..."> <a href=".."> ,<form action="..."> <img src="...">

属性是放在 html 元素中的，就是 html 元素的属性，退出了 th 前缀。属性的作用不变。退出上 th，属性的值由模板引擎解决了。在属性能够应用变量表达式

例如：

<form action="/loginServlet" method="post"></form>

<form th:action="/loginServlet" th:method="${methodAttr}"></form>

each 循环，能够循环 List，Array

语法：

在一个 html 标签中，应用 th:each

<div th:each="汇合循环成员, 循环的状态变量:${key}">
    <p th:text="${汇合循环成员}" ></p>
</div>

汇合循环成员, 循环的状态变量: 两个名称都是自定义的。“循环的状态变量”这个名称能够不定义，默认是 ” 汇合循环成员 Stat”

each 循环 Map

在一个 html 标签中，应用 th:each

<div th:each="汇合循环成员, 循环的状态变量:${key}">
    <p th:text="${汇合循环成员.key}" ></p>
    <p th:text="${汇合循环成员.value}" ></p>
</div>

汇合循环成员, 循环的状态变量: 两个名称都是自定义的。“循环的状态变量”这个名称能够不定义，默认是 ” 汇合循环成员 Stat”

key:map 汇合中的 key

value：map 汇合 key 对应的 value 值

“th:if”: 判断语句，当条件为 true，显示 html 标签体内，反之不显示没有 else 语句

语法：

<div th:if="10 > 0"> 显示文本内容 </div>

还有一个 th:unless 和 th:if 相同的行为

语法：

<div th:unless="10 < 0"> 当条件为 false 显示标签体内容 </div>

例子：if

<div style="margin-left: 400px">
        <h3> if 应用 </h3>
        <p th:if="${sex=='m'}"> 性别是男 </p>
        <p th:if="${isLogin}"> 曾经登录零碎 </p>
        <p th:if="${age > 20}"> 年龄大于 20</p>
        <!--"" 空字符是 true-->
        <p th:if="${name}">name 是“”</p>
        <!--null 是 false-->
        <p th:if="${isOld}"> isOld 是 null</p>
 </div>

例子：unless

 <div style="margin-left: 400px">
        <h3>unless: 判断条件为 false，显示标签体内容 </h3>
        <p th:unless="${sex=='f'}"> 性别是男的 </p>
        <p th:unless="${isLogin}"> 登录零碎 </p>
        <p th:unless="${isOld}"> isOld 是 null </p>
 </div>

th:switch 和 java 中的 swith 一样的

语法：

<div th:switch="要比对的值">
    <p th:case="值 1">
        后果 1
    </p>
    <p th:case="值 2">
        后果 2
    </p>
    <p th:case="*">
        默认后果
    </p>
    以上的 case 只有一个语句执行
    
</div>

内联 text：在 html 标签外，获取表达式的值

语法：

<p> 显示姓名是：[[${key}]]</p>

 <div style="margin-left: 400px">
        <h3> 内联 text, 应用内联表达式显示变量的值 </h3>
        <div th:inline="text">
            <p> 我是 [[${name}]]，年龄是 [[${age}]]</p>
            我是 <span th:text="${name}"></span>, 年龄是 <span th:text="${age}"></span>
        </div>

        <div>
            <p> 应用内联 text</p>
            <p> 我是 [[${name}]], 性别是 [[${sex}]]</p>
        </div>
</div>

内联 javascript

例子：

 <script type="text/javascript" th:inline="javascript">
         var myname = [[${name}]];
         var myage = [[${age}]];

         //alert("获取的模板中数据"+ myname + ","+myage)

        function fun(){alert("单击事件，获取数据"+ myname + ","+ [[${sex}]])
        }
    </script>

例子：

 <div style="margin-left: 400px">
       <h3> 文本字面量: 应用单引号括起来的字符串 </h3>
       <p th:text="'我是'+${name}+', 我所在的城市'+${city}"> 数据显示 </p>

       <h3> 数字字面量 </h3>
        <p th:if="${20>5}"> 20 大于 5</p>

        <h3>boolean 字面量 </h3>
        <p th:if="${isLogin == true}"> 用户曾经登录零碎 </p>

        <h3>null 字面量 </h3>
        <p th:if="${myuser != null}"> 有 myuser 数据 </p>
    </div>

连贯字符串有两种语法

1）语法应用单引号括起来字符串，应用 + 连贯其余的字符串或者表达式

  <p th:text="'我是'+${name}+', 我所在的城市'+${city}"> 数据显示 </p>

2）语法：应用双竖线，| 字符串和表达式 |

<p th:text="| 我是 ${name}, 我所在城市 ${city|">

    显示数据

</p>

例子：

    <div style="margin-left: 400px">
       <h3> 字符串连贯形式 1：应用单引号括起来的字符串 </h3>
       <p th:text="'我是'+${name}+', 我所在的城市'+${city}"> 数据显示 </p>
        <br/>
        <br/>
        <h3> 字符串连贯形式 2：| 字符串和表达式 |</h3>
        <p th:text="| 我是 ${name}, 所在城市 ${city}, 其他人 ${myuser.name}|"></p>
    </div>

算术运算：+ , – – , * , / , %

关系比拟 : > , < , >= , <= (gt , lt , ge , le)

相等判断：== , != (eq , ne)


<div style="margin-left: 400px">
        <h3> 应用运算符 </h3>
        <p th:text="${age > 10}"> 年龄大于 10 </p>
        <p th:text="${20 + 30}"> 显示运算后果 </p>
        <p th:if="${myuser == null}">myuser 是 null</p>
        <p th:if="${myuser eq null}">myuser 是 null</p>
        <p th:if="${myuser ne null}">myuser 不是 null</p>

        <p th:text="${isLogin == true ?' 用户曾经登录 ':' 用户须要登录 '}"></p>
        <p th:text="${isLogin == true ? ( age > 10 ?' 用户是大于 10 的 ':' 用户年龄比拟小 ') :' 用户须要登录 '}"></p>

    </div>

三元运算符：

表达式？true 的后果 : false 的后果

三元运算符能够嵌套

文档地址：https://www.thymeleaf.org/doc…

session 示意 Map 对象的，是 #session 的简略示意形式，用来获取 session 中指定的 key 的值

这些是内置对象，能够在模板文件中间接应用。

例子：

 <div style="margin-left: 350px">
        <h3> 内置对象 #request,#session，session 的应用 </h3>
        <p> 获取作用域中的数据 </p>
        <p th:text="${#request.getAttribute('requestData')}"></p>
        <p th:text="${#session.getAttribute('sessionData')}"></p>
        <p th:text="${session.loginname}"></p>

        <br/>
        <br/>
        <h3> 应用内置对象的办法 </h3>
        getRequestURL=<span th:text="${#request.getRequestURL()}"></span><br/>
        getRequestURI=<span th:text="${#request.getRequestURI()}"></span><br/>
        getQueryString=<span th:text="${#request.getQueryString()}"></span><br/>
        getContextPath=<span th:text="${#request.getContextPath()}"></span><br/>
        getServerName=<span th:text="${#request.getServerName()}"></span><br/>
        getServerPort=<span th:text="${#request.getServerPort()}"></span><br/>
</div>

内置工具类型：Thymeleaf 本人的一些类，提供对 string，date，汇合的一些解决办法

<div style="margin-left: 350px">
      <h3> 日期类对象 #dates</h3>
      <p th:text="${#dates.format(mydate)}"></p>
      <p th:text="${#dates.format(mydate,'yyyy-MM-dd')}"></p>
      <p th:text="${#dates.format(mydate,'yyyy-MM-dd HH:mm:ss')}"></p>
      <p th:text="${#dates.year(mydate)}"></p>
      <p th:text="${#dates.month(mydate)}"></p>
      <p th:text="${#dates.monthName(mydate)}"></p>
      <p th:text="${#dates.createNow()}"></p>
      <br/>

      <h3> 内置工具类 #numbers，操作数字的 </h3>
      <p th:text="${#numbers.formatCurrency(mynum)}"></p>
      <p th:text="${#numbers.formatDecimal(mynum,5,2)}"></p>

      <br/>
      <h3> 内置工具类 #strings, 操作字符串 </h3>
      <p th:text="${#strings.toUpperCase(mystr)}"></p>
      <p th:text="${#strings.indexOf(mystr,'power')}"></p>
      <p th:text="${#strings.substring(mystr,2,5)}"></p>
      <p th:text="${#strings.substring(mystr,2)}"></p>
      <p th:text="${#strings.concat(mystr,'---java 开发的黄埔军校 ---')}"></p>
      <p th:text="${#strings.length(mystr)}"></p>
      <p th:text="${#strings.length('hello')}"></p>
      <p th:unless="${#strings.isEmpty(mystr)}"> mystring 不是 空字符串  </p>

      <br/>
      <h3> 内置工具类 #lists, 操作 list 汇合 </h3>
      <p th:text="${#lists.size(mylist)}"></p>
      <p th:if="${#lists.contains(mylist,'a')}"> 有成员 a </p>
      <p th:if="!${#lists.isEmpty(mylist)}"> list 汇合有多个成员 </p>

      <br/>
      <h3> 解决 null</h3>
      <p th:text="${zoo?.dog?.name}"></p>

  </div>

模板是内容复用，定义一次，在其余的模板文件中屡次应用。

模板应用：

1. 定义模板

2. 应用模板

模板定义语法：

th:fragment=” 模板自定义名称 ”

例如：

<div th:fragment="head">
    <p>
        能源节点 -java 开发
    </p>
    <p>
        www.bjpowernode.com
    </p>
</div>

援用模板语法：

1) ~{templatename :: selector}
templatename: 文件名称
selector：自定义模板名称

2）templatename :: selector
templatename: 文件名称
selector：自定义模板名称

对于应用模板：有蕴含模板（th:include），插入模板 (th:insert)

正文完

java

发表至： java

2022-02-15

0

前端vuejquery后台java实现生成二维码

关于java:从-Bitmap-到布隆过滤器再到高并发缓存设计策略

关于java:重新认识访问者模式从实践到本质

SpringBoot基本配置详解

关于javascript:实现页面水印到底跟MutationObserver有什么关系

关于java:动力节点王妈妈Springboot教程九Thymeleaf模板引擎

第九章 Thymeleaf 模板引擎

9.1 表达式

9.2 Thymeleaf 属性

9.3 each

9.4 th:if

9.5 th:switch

9.6 th:inline

9.7 字面量

9.8 字符串连贯

9.9 运算符

9.10 内置对象

request 示意 HttpServletRequest

session 示意 HttpSession 对象

session.getAttribute(“loginname”) == session.loginname

9.11 内置工具类

dates: 解决日器的工具类

numbers: 解决数字的

lists: 解决 list 汇合的

9.12 自定义模板

Just My Socks（注册教程内含优惠码）

关于java:动力节点王妈妈Springboot教程九Thymeleaf模板引擎

第九章 Thymeleaf 模板引擎

9.1 表达式

9.2 Thymeleaf 属性

9.3 each

9.4 th:if

9.5 th:switch

9.6 th:inline

9.7 字面量

9.8 字符串连贯

9.9 运算符

9.10 内置对象

request 示意 HttpServletRequest

session 示意 HttpSession 对象

session.getAttribute(“loginname”) == session.loginname

9.11 内置工具类

dates: 解决日器的工具类

numbers: 解决数字的

lists: 解决 list 汇合的

9.12 自定义模板

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）