Java小白修炼手册--第四阶段--Thymeleaf


< !DOCTYPE html>
<!-- 一定要注意htm1标签中的属性，必须添加--> 
<html xmIns="http:/ /www . W3. org/1999/ xhtml"
    xm1ns : th="http: / /wWw . thymeleaf .org">
<head>
    <meta http-equiv="Content - Type" content= "text/html;
    charset=utf-8">
    <title> Thymeleaf</title>
</head>
<body>
    <!--这里的th:text="${msg}" 后续会讲解-->
    <div th:text=" ${msg}" >文本内容</div>
</body>
< /html>

导入Thymeleaf

pom文件中编写坐标


<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId> thymeleaf< /artifactId>
    <version>3.0.10.RELEASE</version>
</dependency>

编写Thymeleaf

在main方法中编写如下代码


//实例化模板引擎
TemplateEngine templateEngine=new TemplateEngine();
/ /实例化模板分析器
ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
/ /设定分析时的字符集
resolver . setCharacterEncoding( "utf-8");
/ /模板弓|擎加载分析器
templateEngine. setTemplateResolver(resolver);

//创建上下文对象,用于替换模板中的文字
Context ctx = new Context( ) ;
/ /设置msg值为Hello World!!!
ctx. setVariable("'msg","He1lo World!!!");
//套用模板引擎,返回字符串
String result = templateEngine . process("index.html", ctx);
System . out . println(result);

运行效果

在运行上面代码会在控制台看到如下输出

< !DOCTYPE html>
<html xmlns="http: //www . W3. org/1999/ xhtml">
    <head>
        <meta http- equiv= "Content - Type" content= "text/html; charset=utf-8">
        <title>Thymeleaf</title>
    </head>
    <body>
        <div>Hello World!!!</div>
    </body>
</html>

Thymeleaf使用注意事项

HTML模板文件中的html标签属性必须按照规定编写
java代码中所有相关类均导包自org.thymeleaf包下
上面示例中index.html文件在maven项目的src/main/java下

Thymeleaf运行原理

java通过Thymeleaf模板引擎，先将HTML模板读取到java,然后将模板中带有”th:"的部分根据特定含义修改或者替换为Context对象中对应的内容
Thymeleaf中有很多”th: "部分,每种的特定含义会在Thymeleaf详解中介绍

Thymeleaf模板

Thymeleaf使用思想

使用Thymeleaf的思想是在不删除HTML模板内容的情况下对HTML模板添加特定功能的th属性，这些th属性在模板被解析时按照特定功能生成HTML代码
使用Thymeleaf开发,原则上HTML模板页面可以直接执行经过Servlet处理后显示的内容是在静态HTML模板的基础，上进行修改而来的
我们要学习最常用的th属性及其功能

文本替换

th:text

HTML模板中代码如下


<!-- 没有编写th属性--> 
<div>Hello< /div>
<!-- 编写了th:text -->
<div th:text=" ${msg}">Hello</div> 
<!-- 编写了th:text并且其中有字符-->
<div th:text="'信息: '+${msg}" >Hello</div>

Servlet代码如下


String str="<p>第一 段</p><p>第二 _段</p>";
Context ctx=new Context( );
ctx. setVariable("msg", str);
ThymeleafHelper . ThymeleafWrite("index",response,ctx);

运行结果如下

th:utext

HTML模板中代码如下


<!--没有编写th属性--> 
<div>Hello< /div>
<!-- 编写了th:text -->
<div th:utext="${msg}" >Hel1o</div>
<!-- 编写了th:text并且其中有字符-->
<div th:utext="'信息: '+${msg}" >He11o< /div>

Servlet代码如下


String str="<p>第一 段</p><p>第二 段</p>";
Context ctx=new Context();
ctx. setVariable("msg"，str);
ThymeleafHelper . ThymeleafWrite(" index", response, ctx);

运行结果如下

文本替换小结

th:text是将内容直接显示在页面上，如果内容中包含html,页面不会解析
th:utext是将内容中的htm代码解析后显示在页面上

链接替换

th:src

一个HTML元素可以同时拥有src属性和th:src属性
运行HTML模板时,src属性生效，Thymeleaf解析时,th:src会生效
th:src中编写链接之前必须使用@{}将路径包起来
th:src中可以使用自定义名称的占位符,并为占位符赋值

//页面中有如下代码
<img src=" img1. png" th:src= "@{img2.png}" />
//占位符使用( num是自定义的名称)
<img src= ”img1. png" th:src= "@{ img{num} . png(num=2)}" />
//为占位符赋值可以是表达式(Context对象中保存着:键n值2)
<img src=" img1. png" th:src= "@{ img{num} . png(num=${n})}" />
//占位符可以是多个
<img src= " img1. png
    th: src="@{ img{ num}. {type }(num=${n},type='png')}"/>
//上面所有 代码Thymeleaf解析后生 成的都是
<img src= " img2.png" />

th:href

一个HTML元素可以同时拥有href属性和th:href属性
运行HTML模板时,href属性生效,Thymeleaf解析时,th:href会生效
th:href中编写链接之前必须使用@{}将路径包起来
th:href中可以使用自定义名称的占位符，并为占位符赋值

//页面中有如下代码
<a href-" index . html" th:href="@{ index . do}">链接</a>
//Thymeleaf解析后生成
<a href="index . do" >链接</a>
//URL需要传递信息的链接(一个或多个)
<a href=" index . html" th: href= "@{index . do(a=1, b=2)}" >链接</a>
//Thymeleaf解析后生成
<a href=" index. do?a=1&amp ;b=2" >链接</a>
//URL需要传递信息的链接的信息来自Context对象(键n值1)
<a href=" index . html" th: href= "@{index . do(a=${n}, b=2)}">链接</a>
//Thymeleaf解析后生成
<a href=" index . do?a=1&amp; b=2" >链接</a>

元素删除

th:remove

th:remove属性可以在Thymeleaf解析时忽略指定元素使生成的html不包含它们

1. all:删除包含标签和所有的孩子。
2.body:不包含标记删除但删除其所有的孩子。
3.tag:包含标记的删除,但不删除它的孩子。
4.all- but-first:删除所有包含标签的孩子除了第一个。
5.none:什么也不做。这个值是有用的动态评估。

以th: remove="all”帮助大家理解, HTML模板代码如下


<ul>
    <li >孙悟空</li>
    <li>猪八戒</ li>
    <li th: remove= "all">刘备</li>
    <li>唐三藏</li>
</ul>
//Thymeleaf解析后生成
<ul>
    <li >孙悟空</li>
    <li>猪八戒</ li>
    <li>唐三藏</li>
</ul>

Context保存引|用类型

获得Context中对象值

有些时候我们向Context对象中,保存的内容是一个对象,比如实体类对象
在页面上要获得保存的实体类对象的属性值，就需要在表达式中使用 " . "调用
注意这里调用的实际上还是实体类的get方法,但是编写时直接写属性值即可

注:

Context对象中保存了User类对象u,该对象中包含name属性值为tom,想获得
name属性值:


<div th: text="${u.name}">名字</div> 
    //Thymeleaf解析后生成
<div>tom< /div>

条件判断

th:if

在主页中,如果已经登录显示用户姓名，如果没有登录显示登录链接, u为用户实体类,代码如下


<div th:if="${u! =null}" th:text=" '欢迎您:'+${u. name}" >欢迎您:[用户名]</div>
<div th:if="${u==null}" >
    <a href="login. html" th :href="@{login. do}">登录</a>
</div>
///当用户已经登录时Thymeleaf解析后生成
<div >欢迎您: tom</div>
//当用户尚未登录时Thymeleaf解析后生成
<div ><a href="login. do" >登录</a></div>

集合迭代

th:each

我们经常在Servlet中查询出一个集合想把集合中的内容显示在页面上
集合中的元素数量通常不是一个我们需要迭代其中每一个元素
Thymeleaf提供了th:each来实现对集合的迭代
基本格式th:each="[自定义名称]: ${[Context中的集合]}”
html模板中迭代产生的内容代替的部分，可以设置为th:remove= " all"

一个由集合迭代产生的用户列表, list是Context用户的集合，代码如下


<ul>
    <li th:each=" user : ${list}" th:text="${user .name}">曹操</li>
    <li th: remove="al1" >孙权</li>
    <li th: remove="all">刘备</li> 
    <li th: remove="all">诸葛亮</li>
</ul>
//Thymeleaf解析后生成
<ul>
    <li>孙悟空</1i>
    <li>猪悟能</li>
    <li>沙悟净</1i>
</ul>

陳风弥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java小白修炼手册--第四阶段--Thymeleaf

目录ThymeleafThymeleaf简介什么是Thymeleaf为什么要使用Thymeleaf开始使用Thymeleaf第一个Thymeleaf程序HTML模板的创建导入Thymeleaf编写Thymeleaf运行效果Thymeleaf使用注意事项Thymeleaf运行原理Thymeleaf模板Thymeleaf使用思想文本替换th:textth:utext文本替换小结链接替换th:srcth:href元素删除.
复制链接

扫一扫