thymeleaf 总结

最新推荐文章于 2022-05-17 22:40:54 发布

lduzhenlin

最新推荐文章于 2022-05-17 22:40:54 发布

阅读量602

点赞数

分类专栏： # SpringBoot

本文链接：https://blog.csdn.net/lduzhenlin/article/details/91429527

版权

SpringBoot 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

#、* 和$的区别

1.$符号取上下文中的变量：<input type="text" name="userName"  th:value="${user.name}">
2.#符号取thymeleaf工具中的方法、文字消息表达式：<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
3.*{...}选择表达式一般跟在th:object后，直接选择object中的属性
<div th:object="${session.user}"><p th:text="*{name}"/><div>

内联表达式

定义

[[…]]之间的表达式在Thymeleaf被认为是内联表达式,

在其中可以使用任何类型的表达式,为了让内联工作,我们必须激活它使用th:inline 属性，此属性有三种值（text , javascript and none）。

内联文本

虽然通过 Thymeleaf 标准中的标签属性已经几乎满了开发中的所有需求，但是有些情况下更喜欢将表达式直接写到 HTML 本中：

例如有时候这样更合适：<p>Hello, [[${session.user.name}]]</p>
不喜欢这样写代码：<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

[[...]] 或 [(...)] 中的表达式就是 Thymeleaf 中内联表达式，任何在 th:text 或 th:utext 属性中使⽤的表达式都可以出现在 [[]] 或 [()] 中使用，
[[...]] 等价于 th:text（结果将被 HTML 转义），[(...)] 等价于 th:utext（结果不会执⾏HTML转义）。

例如：

<body>
<!--后台传出：model.addAttribute("info", "Love you <b>中国</b>");-->
<!--/*前者会转义，后者不会转义*/-->
<p>[[${info}]]</p>  输出：Love you <b>中国</b>
<p>[(${info})]</p>  输出：Love you 中国
 
<!--/*可以是任意的数据类型，如普通的文本，与 th:text、th:utext完全等价*/-->
<p>[[Love]]</p> 输出：Love
<p>[['I Love You Baby']]</p> 输出：I Love You Baby
<p>[(9527)]</p>  输出：9527
</body>

内联 JavaScript

1.基本使用

作用：在js中给变量赋值。

th:inline="javascript"表示能在js中使用[ [] ]取值。只有加入th:inline="javascript"在js代码中才能使用[ [...] ]

<head lang="en">
    <meta charset="UTF-8">
    <title>用户首页</title>
 
    <script type="text/javascript" th:inline="javascript">
        /**
         * 后台输出：
         * model.addAttribute("info", "Love you <b>中国</b>");
         * model.addAttribute("age", 35);//注意：使用 [(${info})] 时编译报错，浏览器运行也会报错
         * model.addAttribute("id", null);
         * model.addAttribute("name", "");
         * @type {*[]}
         */
        var info = [[${info}]];
        var age = [[${age}]];
        var id = [[${id}]];
        var name = [[${name}]];
        console.log(id, name, age, info);
    </script>
</head>

特别提示：th:inline ="javascript" 显式启用JavaScript 模板模式只能是在 Html 文件内部的 JavaScript 代码，如上所示。不能在引入的外部 JavaScript 文件中进行操作。

2.前后端分离

Thymeleaf 的目标就是希望前后端分离，即同一个 Html 文件前端人员以静态原型的方式打开时，看到的是它们的内容，而后端人员通过服务器打开时，看到的是动态的数据。内联的 JavaScript 同样可以实现这一点。在 JavaScript 注释中包含（转义）内联表达式即可满足此需求。

<script type="text/javascript" th:inline="javascript">
/**
* 后台输出：model.addAttribute("info", "Love you <b>中国</b>");
* Thymeleaf 将自动忽略掉注释之后 和 分号之前的所有内容,如下为 "前端测试"
*/
var info = /*[[${info}]]*/ "前端测试";
console.log(info);
</script>

3.内联表达式JS序列化

关于 JavaScript 内联表达式的计算结果不限于字符串，它能将以下对象序列化为 javascript 对象。 Thymeleaf 支持以下几种序列化对象：

1）Strings
2）Numbers
3）Booleans
4）Arrays
5）Collections
6）Maps
7）Beans (有getter _and _setter⽅法)

<script type="text/javascript" th:inline="javascript">
    /**
     * 后台输出：model.addAttribute("userList", userList);
    * userList 是一个 List<User> 的结构，其中有5个元素
    */
    var userList = [[${userList}]];
    /**已经被 Thymeleaf 序列化为 JS 对象，是一个数组加Object 的个数，即数组中有5个Object*/
    console.log("userList", userList);
    for (let i = 0; i < userList.length; i++) {
        /**取值打印*/
        console.log(i, userList[i], userList[i].uName);
    }
</script>

内联 CSS

Thymeleaf 还允许在 CSS <style> 标签中内联，如：

<head lang="en">
    <meta charset="UTF-8">
    <title>用户首页</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/userHome.css}">
    <!--/*为了测试简单，直接使用 th:with 定义两个局部变量；也可以后台传输来的*/-->
    <style type="text/css" th:inline="css" th:with="h4Color='yellow',fontSize='25px'">
        p {
            color:/*[[${h4Color}]]*/ red;
            font-size: [(${fontSize}) ];
        }
    </style>
</head>

lduzhenlin

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
thymeleaf 总结

#、* 和$的区别1.$符号取上下文中的变量：<input type="text" name="userName" th:value="${user.name}">2.#符号取thymeleaf工具中的方法、文字消息表达式：<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>3...
复制链接

扫一扫

专栏目录