zoukankan      html  css  js  c++  java
  • Thymeleaf常用语法:模板片断

    系统中的很多页面有很多公共内容,例如菜单、页脚等,这些公共内容可以提取放在一个称为“模板片断”的公共页面里面,其它页面可以引用这个
    “模板片断”内容。

    一、模板片断的定义

    可以是html标签,也可以使用th:fragment属性定义片断。

    二、引用片断

    1、使用th:insert属性插入片断,除此之外,还可以使用th:replace和th:include插入。
    语法:
    (1) th:insert="~{模板名称}"
    插入模板的整个内容

    (2) th:insert="~{模板名称::选择器}"
    插入模板的指定内容,选择器可以对应th:fragment定义的名称,也可以用类似JQuery选择器的语法选择部分片断。
    片断选择器语法:
    a) /name,选择子节点中节点名称为name的节点
    b) //name,选择全部子节点中节点名称为name的节点
    c) name[@attr='value'] 选择名称为name并且属性值为value的节点,如有多个属性可用and连接
    d) //name[@attr='value'][index] 选择名称为name并且属性值为value的节点,指定节点索引
    片断选择器的简化语法:
    a) 可以省略 @ 符号
    b) 使用 # 符号代替 id 选择,如div#id等价于div[id='id']
    c) 使用 . 符号代替 class 选择,如div.class等于于div[class='class']
    d) 使用 % 代替片断引用,如片断节点使用了th:ref或th:fragment,则可使用div%ref来选取节点

    (3) th:insert="~{::选择器}"
    不指定模板名称,则选择器作用于当前页面

    (4) th:insert="~{this::选择器}"
    与"~{::选择器}"类似,不同之处是在本页面找不到片断时,会到模板引擎的process方法处理的模板中寻找片断。

    2、th:insert、th:replace、th:include的区别
    th:insert 当前标签里面插入模板中的标签
    th:replace替换当前标签为模板中的标签
    th:include前标签里面插入模板的标签内容

    3、模板片断也支持传入变量
    引用语法:~{footer.html::名称(参数)

    4、片断块引用
    可以使用th:block定义片断块,th:block是一个属性容器,可以在里面添加任何的th属性。
    例如表格的循环体中一般在tr中用th:each,也可以用th:block改写。

    5、删除模板
    使用th:remove删除模板,属性值:
    all:删除当前节点,包括子节点
    body:删除当前节点的全部子节点
    tag:删除当前节点,不包括子节点
    all-but-first:除了当前节点下面的第一个子节点,其它全部删除
    none:不进行任何操作

    三、使用实例

    开发环境:IntelliJ IDEA 2019.2.2
    Spring Boot版本:2.1.8

    新建一个名称为demo的Spring Boot项目。

    1、pom.xml
    加入Thymeleaf依赖

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

    2、src/main/java/com/example/demo/TestController.java

    package com.example.demo;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class TestController {
        @RequestMapping("/")
        public String test(){
            return "test";
        }
    }

    3、src/main/resources/templates/footer.html

    <span th:fragment="frag1">frag1</span>
    <span th:fragment="frag2">frag2</span>
    
    <div id="footer1">footer1</div>
    
    <div>
        <div id="footer2">footer2</div>
    </div>
    
    <div>
        <span class="content">footer3</span>
        <span class="content">footer4</span>
    </div>
    
    <div th:fragment="welcome(userName)">
        <span th:text="|hello,| + ${userName}"></span>
    </div>

    4、src/main/resources/templates/test.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <h4>th:insert引用片断</h4>
    引用指定模板的整个内容
    <div th:insert="~{footer.html}"></div>
    引用指定模板的片断
    <div th:insert="~{footer.html::frag1}"></div>
    引用本页面的片断
    <div th:insert="~{::frag3}"></div>
    <div th:insert="~{this::frag3}"></div>
    <div th:fragment="frag3">frag3</div>
    
    <h4>th:replace、th:include与th:insert的区别</h4>
    <div th:replace="~{footer.html::frag1}"></div>
    <div th:include="~{footer.html::frag1}"></div>
    
    <h4>片断选择器的部分用法</h4>
    <div th:insert="~{footer.html::/div[@id='footer1']}"></div>
    <div th:insert="~{footer.html:://div#footer2}"></div>
    <div th:insert="~{footer.html::span[class='content']}"></div>
    <div th:insert="~{footer.html:://span[class='content'][0]}"></div>
    <div th:insert="~{footer.html:://span.content}"></div>
    <div th:insert="~{footer.html::span%frag1}"></div>
    
    <h4>含有变量的片断引用</h4>
    <div th:insert="~{footer.html::welcome('小明')}"></div>
    
    <h4>片断块引用</h4>
    <table>
        <th:block th:each="number : ${#numbers.sequence(0,1)}">
            <tr>
                <td th:text="${number}"></td>
            </tr>
        </th:block>
    </table>
    
    <h4>删除模板</h4>
    <table>
        <th:block th:each="number : ${#numbers.sequence(0,1)}">
            <tr th:remove="${number > 0} ? all : none">
                <td th:text="${number}"></td>
            </tr>
        </th:block>
    </table>
    
    </body>
    </html>

    IDEA运行后,浏览器访问:http://localhost:8080,查看网页源代码,结果如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <h4>th:insert引用片断</h4>
    引用指定模板的整个内容
    <div><span>frag1</span>
    <span>frag2</span>
    
    <div id="footer1">footer1</div>
    
    <div>
        <div id="footer2">footer2</div>
    </div>
    
    <div>
        <span class="content">footer3</span>
        <span class="content">footer4</span>
    </div>
    
    <div>
        <span>hello,null</span>
    </div></div>
    引用指定模板的片断
    <div><span>frag1</span></div>
    引用本页面的片断
    <div><div>frag3</div></div>
    <div><div>frag3</div></div>
    <div>frag3</div>
    
    <h4>th:replace、th:include与th:insert的区别</h4>
    <span>frag1</span>
    <div>frag1</div>
    
    <h4>片断选择器的部分用法</h4>
    <div><div id="footer1">footer1</div></div>
    <div><div id="footer2">footer2</div></div>
    <div><span class="content">footer3</span><span class="content">footer4</span></div>
    <div><span class="content">footer3</span></div>
    <div><span class="content">footer3</span><span class="content">footer4</span></div>
    <div><span>frag1</span></div>
    
    <h4>含有变量的片断引用</h4>
    <div><div>
        <span>hello,小明</span>
    </div></div>
    
    <h4>片断块引用</h4>
    <table>
        
            <tr>
                <td>0</td>
            </tr>
        
            <tr>
                <td>1</td>
            </tr>
        
    </table>
    
    <h4>删除模板</h4>
    <table>
        
            <tr>
                <td>0</td>
            </tr>
        
            
        
    </table>
    
    </body>
    </html>
  • 相关阅读:
    python虚拟环境--virtualenv
    python使用smtplib发送邮件
    python网络编程
    python操作MySQL数据库
    python面向对象
    python内置函数总结
    python异常处理
    python文件I/O
    python模块
    python函数
  • 原文地址:https://www.cnblogs.com/gdjlc/p/11706281.html
Copyright © 2011-2022 走看看