Thymeleaf学习笔记

最新推荐文章于 2022-03-16 13:19:27 发布

云乐QAQ

最新推荐文章于 2022-03-16 13:19:27 发布

阅读量269

点赞数

分类专栏： Thymeleaf

本文链接：https://blog.csdn.net/qq_41658124/article/details/105515895

版权

Thymeleaf 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

thymeleaf 跟 JSP 一样，就是运行之后，就得到纯 HTML了。区别在与，不运行之前， thymeleaf 也是纯 html ...
所以 thymeleaf 不需要服务端的支持，就能够被以 html 的方式打开，这样就方便前端人员独立设计与调试, jsp 就不行了，不启动服务器 jsp 都没法运行出结果来。

还特地搜了下thymeleaf怎么读哈哈

首先在springboot项目里面，添加对thymeleaf的依赖：

 
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>	
</dependency>

然后增加一个控制器，页面的跳转：

package com.how2java.springboot.web;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
  
@Controller
public class HelloController {
  
    @RequestMapping("/hello")
    public String hello(Model m) {
        m.addAttribute("name", "thymeleaf");
        return "hello";
    }
}

然后就准备咱的thymeleaf的页面配置啦：

在 resources 下新建目录 templates, 然后新建文件 hello.html
注：并不是在 webapp下，这点和 jsp 不一样
hello.html 做了如下事情：
1. 声明当前文件是 thymeleaf, 里面可以用th开头的属性

<html xmlns:th="http://www.thymeleaf.org">

2. <head> 内容和普通 html 并无二致，略过

3. 把 name 的值显示在当前 p里，用的是th开头的属性: th:text, 而取值用的是 "${name}" 这种写法叫做 ognl，额。。。什么意思呢。。。就是跟EL表达式一样吧。这样取出来放进p 里，从而替换到原来p 标签里的 4个字符 "name" .

name

用这种方式，就可以把服务端的数据，显示在当前html里了。重要的是：这种写法是完全合法的 html 语法，所以可以直接通过浏览器打开 hello.html,也是可以看到效果的，只不过看到的是 "name", 而不是服务端传过来的值 "thymeleaf"。

4. 字符串拼写。两种方式，一种是用加号，一种是在前后放上 ||, 显然第二种方式可读性更好。
hello world
hello world
这两种方式都会得到： hello thymeleaf。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="${name}" >name</p>
<p th:text="'Hello！ ' + ${name} + '!'" >hello world</p>
<p th:text="|Hello！ ${name}!|" >hello world</p>
</body>
 
</html>

配置一下application.properties

其中的spring.thymeleaf.mode=HTML5可以修改成

spring.thymeleaf.mode=LEGACYHTML5

LEGACYHTML5 表示使用传统模式，比起 HTML5 来对 html的校验更宽松点，不然的话由于遇到不闭合标签（比如br）会这样报错

#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#缓存设置为false, 这样修改之后马上生效，便于调试
spring.thymeleaf.cache=false
#上下文
server.context-path=/thymeleaf

然后就可以试试启动访问啦。

URL

和jsp一样，thymeleaf也可以通过url的形式引入js文件和css文件

通过 th:href="@{/static/css/style.css}" 和 th:src="@{/static/js/thymeleaf.js}" 引入 css 和 js 文件
 
<link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css" th:href="@{/css/style.css}"/>
<script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/js/thymeleaf.js}"></script>

注意几点：
1. 使用 @这种方式引入，在渲染后的html 里会自动生成上下文路径，既如图所示的 /thymeleaf 这个路径
2. 如果使用浏览器直接打开当前的 hello.html, 依然可以看到css 和 js 效果，因为如下代码起作用：

href="../../webapp/static/css/style.css"

src="../../webapp/static/js/thymeleaf.js"

3. 在header标签里有这么一段：

testFunction();

</script>

这样才知道你使用了js里面的那些函数。

各种表达式用法

下面是一段HTML，展示了后端传过来的两个参数htmlContent和currentProduct。

使用的是th:text的表达式来显示

<div class="showing">
        <h2>显示 转义和非转义的html文本</h2>
        <p th:text="${htmlContent}"></p>
        <p th:utext="${htmlContent}"></p>
    </div>

    <div class="showing">
        <h2>显示对象以及对象属性</h2>
        <p th:text="${currentProduct}"></p>
        <p th:text="${currentProduct.name}"></p>
        <p th:text="${currentProduct.getName()}"></p>
    </div>

    <div class="showing" th:object="${currentProduct}">
        <h2>*{}方式显示属性</h2>
        <p th:text="*{name}"></p>
    </div>

    <div class="showing">

        <h2>算数运算</h2>
        <p th:text="${currentProduct.price}+1000"></p>
    </div>

结果：

包含另一个文件

和之前jsp使用的include有点差别：

新建一个 include.html 文件，然后里面用 th:fragment 标记代码片段。
footer1 是不带参数的
footer2 是带参数的
这两种情况也是包含业务经常会用到的做法

<html xmlns:th="http://www.thymeleaf.org">
<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>
</html>

在test里面写上

<div class="showing">
    <div th:replace="include::footer1" ></div>
    <div th:replace="include::footer2(2015,2018)" ></div>
</div>

效果

这个好像能做到只引用另外一个HTML中的一部分，而不是全部引用，更加灵活啦。

条件判断

在后端参数中提供一个布尔值对象testBlooean

Thymeleaf 的条件判断是通过 th:if 来做的，只有为真的时候，才会显示当前元素

如果testBoolean 是 true ，本句话就会显示

取反可以用not, 或者用th:unless.

取反，所以如果testBoolean 是 true ，本句话就不会显示

unless 等同于上一句，所以如果testBoolean 是 true ，本句话就不会显示

除此之外，三元表达式也比较常见

<div class="showing">
    <h2>条件判断</h2>
    <p th:if="${testBoolean}" >如果testBoolean 是 true ，本句话就会显示</p>
    <p th:if="${not testBoolean}" >取反 ，所以如果testBoolean 是 true ，本句话就不会显示</p>
    <p th:unless="${testBoolean}" >unless 等同于上一句，所以如果testBoolean 是 true ，本句话就不会显示</p>
    <p th:text="${testBoolean}?'当testBoolean为真的时候，显示本句话，这是用三相表达式做的':''" ></p>
</div>

效果

真假判断：

不只是布尔值的 true 和 false, th:if 表达式返回其他值时也会被认为是 true 或 false，规则如下:

boolean 类型并且值是 true, 返回 true
数值类型并且值不是 0, 返回 true
字符类型(Char)并且值不是 0, 返回 true
String 类型并且值不是 "false", "off", "no", 返回 true
不是 boolean, 数值, 字符, String 的其他类型, 返回 true
值是 null, 返回 false

遍历

<div class="showing">
    <h2>遍历</h2>
 
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="p: ${ps}">
                <td th:text="${p.id}"></td>
                <td th:text="${p.name}"></td>
                <td th:text="${p.price}"></td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="showing">
    <h2>带状态遍历</h2>
    <table>
        <thead>
            <tr>
                <th>index</th>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr th:class="${status.even}?'even':'odd'" th:each="p,status: ${ps}">
                <td  th:text="${status.index}"></td>
                <td th:text="${p.id}"></td>
                <td th:text="${p.name}"></td>
                <td th:text="${p.price}"></td>
            </tr>
        </tbody>
    </table>
</div>
 
<div class="showing">
    <h2>遍历 select </h2>
 
    <select size="3">
        <option th:each="p:${ps}" th:value="${p.id}"     th:selected="${p.id==currentProduct.id}"    th:text="${p.name}" ></option>
    </select>
 
</div>
 
<div class="showing">
    <h2>遍历 radio </h2>
 
    <input name="product" type="radio" th:each="p:${ps}" th:value="${p.id}"  th:checked="${p.id==currentProduct.id}"     th:text="${p.name}"  />
 
</div>

效果：

其中那个带状态的遍历挺好用的。

内置工具

Execution Info 获取页面模板的处理信息

Messages 在变量表达式中获取外部消息的方法，与使用＃{...}语法获取的方法相同

URIs/URLs 转义部分URL / URI的方法

Conversions 用于执行已配置的转换服务的方法

Dates 时间操作和时间格式化等

Calendars 用于更复杂时间的格式化

Numbers 格式化数字对象的方法

Strings 字符串工具类

Objects 一般对象类，通常用来判断非空

Booleans 常用的布尔方法

Arrays 数组工具类

Lists List 工具

类 Sets Set 工具类

Maps 常用Map方法

Aggregates 在数组或集合上创建聚合的方法

IDs 处理可能重复的id属性的方法

语法都是#{}

学习网站：https://how2j.cn/p/5351

云乐QAQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf学习笔记

thymeleaf 跟 JSP 一样，就是运行之后，就得到纯 HTML了。区别在与，不运行之前， thymeleaf 也是纯 html ...所以 thymeleaf 不需要服务端的支持，就能够被以 html 的方式打开，这样就方便前端人员独立设计与调试, jsp 就不行了，不启动服务器 jsp 都没法运行出结果来。还特地搜了下thymeleaf怎么读哈哈首先在spring...
复制链接

扫一扫