Thymeleaf入门（一）

目录

Thymeleaf简介

Thymeleaf是一个java的模板引擎，能够处理Html、Xml、Javascript、Css甚至纯文本，类似于Jsp和Freemarker

  • 自然模板，原型即页面
  • 语法优雅简单，OGNL、SpringEL
  • 遵从web标准，支持Html5

Thymeleaf的语法规则甚多，不一一记录，在使用过程再做说明

 较好文章示例：https://www.cnblogs.com/itdragon/archive/2018/04/13/8724291.html

　　　　　　　 https://www.cnblogs.com/tuanz/p/8709709.html

模板布局

　　通常网站中会有公用部分，比如头部、尾部和菜单等，可以提取出来作为模板片段供其他页面进行引用

定义和引用片段

定义-->th:fragment="copy"定义一个copy的片段的版权信息

<!DOCTYPE html>
<!--解决th报错 -->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>
</head>
<body>
    <div th:fragment="copy">
        &copy; 2019<a href="www.baidu.com">百度</a>
    </div>
</body>
</html>

引用-->th：insert="~{footer :: copy},指在footer处引入copy片段

<body>
    ...
    <div th：insert="~{footer :: copy}"></div>
</body>

也可以不使用th:fragment，也可以引入片段，使用id

<body>
    ...
    <div id="copy-section">
        &copy; 2019<a href="https://www.baidu.com">百度</a>
    </div>
</body>

引用-->th:insert="~{footer::#copy-section}"

th:insert、th:replace、th:include三者区别

  • th:insert 将简单地插入指定的片段作为正文的主标签
  • th:replace用指定的实际片段来替换其主标签
  • th:include类似于th:insert，但不是插入片段，它只插入此片段的内容（3.x版本后，不再推荐使用）
<footer th:fragment="copy">
        &copy; 2019<a href="www.baidu.com">百度</a>
</footer>

 对上述同一片段进行引用，观察三者的区别

<body>
    ...
    <div th:insert="footer::copy"></div>
    <div th:replace="footer::copy"></div>
    <div th:inlcude="footer::copy"></div>
</body>

最终效果：

<body>
    ...
    //将整个片段插入到div中
    <div>
        ...
        <footer>
            &copy;2019<a href="www.baidu.com">百度</a>
        </footer>
    </div>

    //将片段直接整体替换
    <footer>
        &copy;2019<a href="www.baidu.com">百度</a>
    </footer>

    //只引用片段的内容
    <div>
        &copy;2019<a href="www.baidu.com">百度</a>
    </div>
</body>

属性优先级

当在同一个标签中写入多个th：*属性时，会发生什么？

    <ul>
        <li th:each="item:${items}" th:text="${item.descriptiom}">Item</li>
    </ul>

后面的文本取值th:text依赖于th:each，理想预期前者应先于后者（由下图优先级表可看出th:each的优先级高于th:text）

属性优先级顺序表：

注释

除了<!-- -->注释，thymeleaf还有：

  • 解析器级注释块：删除<！--/* 和*/-->之间的所有内容

　　单行：<！--/* ... */-->

　　多行：<！--/* -->  ... ...<！-- */-->

  • 原型注释块：当模板静态打开时（比如原型设计），原型注释块所注释的代码<!--/*/ 和 /*/-->将被注释，而在模板执行时，这些注释的代码，就能被显示出来（注释th:block比较有效）
<span>hello!</span>
<!--/*/
    <div th:text="${...}">
        ...
    </div>
/*/-->
<span>goodbye!</span>

内联

内联表达式

  • [[...]]或[(...)]分别对应于th:text和th:utext

[(...)]：不会对msg中的特殊字符进行转义

<p >The message is "[(${msg})]" </p>


//执行效果
<p>The message is  “This is <b>great</b>” </p>

[[...]]：对特殊字符进行转义

<p>The message is "[[${msg}]]" </p>


//执行效果，不会对msg中的特殊字符进行转义
<p>The message is  “This is &lt;b&gt; great &lt;/b&gt;” </p>

禁用内联

  • 有时候需要禁用这种机制，比如：输出[[...]]或[(...)]文本内容，使用th:inline="none"
<p th:inline="none">this is msg</p>

JavaScript内联

<script th:inline="javascript">
    ...
    var username = /*[[${session.user.name}]]*/ 'echola';
    ...

</script>
在解释器解析代码时，会解析里面的[[${session.user.name}]]加载静态页时会解析后面的语句var name='echola'
注意:js内联代码需要加入/*<![CDATA[*/ ... /*]]>*/代码块，thymeleaf才能正确解析运算符和操作符号&、&&等

JS内联还有两个特性
  • 附加代码：/*[+ ... +]*/
  • 移除代码：/*[- */... /*-]*/
posted @ 2019-06-04 15:28  echola_mendes  阅读(308)  评论(0)  编辑  收藏  举报