thymeleaf 总结

女爷i 2022-01-19 04:57 284阅读 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转义）。

例如：

## 内联 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}">
        
        <style type="text/css" th:inline="css" th:with="h4Color='yellow',fontSize='25px'">
            p {
                color:/*[[${h4Color}]]*/ red;
                font-size: [(${fontSize}) ];
            }
        </style>
    </head>