7）Thymeleaf 内联表达式、文本、JavaScript、CSS

古城微笑少年丶 2022-04-12 14:25 251阅读 0赞

**目录**

内联表达式

th:inline="none" 禁用内联

内联 JavaScript

JavaScript ⾃然模版

⾼级内联表达式JS序列化

内联 CSS

--------------------

# 内联表达式 #

虽然通过 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转义）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

提示：当静态打开 HTML ⽂件时，内嵌的表达式将逐字显示在 HTML ⽂件中，因此⽆法将其⽤作设计原型了！比如 “<p>\[\[$\{info\}\]\]</p>” 如果是以静态原型打开，那么显示的就是 <p>\[\[$\{info\}\]\]</p>。

## th:inline="none" 禁用内联 ##

内联机制可以被禁⽤，因为在实际应⽤中可能会想输出 \[\[...\]\] 或 \[(...)\] 序列⽽不将其内容作为表达式处理的情况。 为此将使⽤   
th:inline =“none” 来禁⽤内联。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

# 内联 JavaScript #

JavaScript 内联允许在 HTML 模板模式中更好地集成 JavaScript <script>块。与⽂本内联⼀样，这实际上等同于处理脚本内容，就像它们是JavaScript 模板模式中的模板⼀样，因此⽂本模板模式的所有功能都可以在内联脚本中使⽤。   
     必须使⽤ th:inline ="javascript" 显式的启⽤此 JavaScript 模板模式：

<head lang="en">
        <meta charset="UTF-8">
        <title>用户首页</title>
        <link type="text/css" rel="stylesheet" th:href="@{/css/userHome.css}">
    
        <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>

![20181204102444450.png][]

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

>     <script type="text/javascript" th:inline="javascript" th:src="@{/js/userHome.js}"></script>
> 
> //如果在这个外置的 userHome.js 中进行内联表达式操作，则 Thymeleaf 无法解析，浏览器识别不了而报错。

## JavaScript ⾃然模版 ##

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

![20181204105117537.png][]

![20181204105144768.png][]

这种在前后端都可以运行的 JavaScript 脚本称为 JavaScript ⾃然模板！

## ⾼级内联表达式JS序列化 ##

关于 JavaScript 内联的⼀个重要的特性是，内联表达式的计算结果不限于字符串，它能⾃动的将以下对象序列化为 javascript 对象。 Thymeleaf ⽀持以下⼏种序列化对象：

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

Thymeleaf 对 JavaScript 序列化的⽅式是通过 org.thymeleaf.standard.serializer.IStandardJavaScriptSerializer 接⼝的实  
现，可以在模板引擎的 StandardDialect 的实例中进⾏配置。

该 JavaScript 序列化机制默认将在类路径中查找 Jackson 库，如果存在，将使⽤它。 如果没有，它将应⽤⼀个内置的序列化机制，内置的序列化机制涵盖⼤多数场景的需求，并和 Jackson 序列化机制产⽣类似的结果。

这里以后台控制器传出一个 List<User> 对象为例进行说明，其它都是同理，User 是 Java Beab，提供了 getter、setter 方法。

![20181204110516888.png][]

# 内联 CSS #

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

> <style th:inline="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}]];
                font-size: [(${fontSize}) ];
            }
        </style>
    </head>

![20181204112252483.png][]

**注意事项：**

1）获取变量赋值时，fontSizt 需要使用 \[(...)\] 不进行转义，如果是 \[\[...\]\] 转义则会多出来一个斜杠而导致无效。

2）与内联 JavaScript ⼀样，CSS 内联也允许 <style> 标签可以静态和动态地⼯作，即通过在注释中包含内联表达式作为CSS ⾃然模板。

>     <style type="text/css" th:inline="css" th:with="h4Color='yellow',fontSize='25px'">
>         p {
>             color: /*[[${h4Color}]]*/ red;
>             font-size: [(${fontSize})];
>         }
>     </style>

3）如上所示当服务器动态打开时，字体颜色为黄色；当以原型静态打开时，显示的是红色，因为 Thymeleaf 会自动忽略掉 css 注释之后 和 分号之前的代码。

4）因为 CSS 自然模板的问题，所以不能在 css 中像以前一样添加注释，因为 Thymeleaf 会将它们当做模板进行处理。

5）与 内联 JavaScript 一样，内联 CSS 同样只能 Html 内嵌的 <style 标签中进行使用，不能在外部 关联的 CSS 文件中进行使用。

>     <link type="text/css" rel="stylesheet" th:href="@{/css/userHome.css}" th:inline="css">
> 
> //这是错误的，不能在 userHome.css 文件中使用内联 CSS。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220412/dda708ef3e0d4943a050b5bbe35903e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220412/e2f52e79f8cf48819343be4a88cf03f5.png
[20181204102444450.png]: /images/20220412/c9c026c30b0a4dcea34dc9cbbe814dfe.png
[20181204105117537.png]: /images/20220412/49c6c417f07a4246987bc44bede97e39.png
[20181204105144768.png]: /images/20220412/e4ffa1fca6dd4aa392cf441b4826d437.png
[20181204110516888.png]: /images/20220412/9e01d3a3fb4e47e7b508b068bae4b8e1.png
[20181204112252483.png]: /images/20220412/0fcf438c8ef24070b48a85c39cd69b0e.png