thymeleaf 布局layout

Posted asker009

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了thymeleaf 布局layout相关的知识,希望对你有一定的参考价值。

以前写过一篇使用thymeleaf实现div中加载html

大部分内容都没问题,只是部分知识已经过时了。

重新记录:

依赖依然是

        <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
        </dependency>

 

index.html作为layout模板,不需要引入xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"

引入xmlns:layout="http://www.w3.org/1999/xhtml"就可以

<!DOCTYPE html>
<html lang="en"
        xmlns:th="http://www.w3.org/1999/xhtml"
        xmlns:layout="http://www.w3.org/1999/xhtml"
>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"></link>

    <script src="../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>

    <title>客户管理系统</title>
</head>
<body>
<div th:replace="fragments/navTitle::navTitle"></div>
<div layout:fragment="content"></div>



<th:block layout:fragment = "bodyAssets">
</th:block>

 

list.html作为content直接显示在index.html 的<div layout:fragment="content"></div>

 

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorator="~{index}"  这里就是指向index.html
>

<head>

<!--这里注销是避免和index.html里的css重复-->
<!--<link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"></link>--> 

<title>客户列表</title> </head> <body> <div class="container" layout:fragment="content"> <!--<div class="container form-group">--> <!--<div class="col-sm-2 control-label">--> <!--<a href="/customer/add" th:href="@{/customer/add}" class="btn btn-info">add</a>--> <!--</div>--> <!--</div>--> <table class="table table-hover table-striped table-bordered"> <thead> <tr> <th>#</th> <th>filesNo</th> <th>customerName</th> <th>agreementNum</th> <th>agreementMoney</th> <th>inRoomNum</th> <th>编辑</th> <th>删除</th> </tr> </thead> <tbody> <!--等同于 <tr th:each="customer : ${customerPage.Content()}">--> <tr th:each="customer : ${customerPage.getContent()}"> <!--等同于<th scope="row" th:text="${customer.getCustomerId()}">1</th>--> <th scope="row" th:text="${customer.customerId}">1</th> <td th:text="${customer.filesNo}">neo</td> <td><a th:href="@{/customer/toEdit/{id}/{pageNo}(id=${customer.customerId},pageNo=${pageIndex})}" th:text="${customer.customerName}">detail</a></td> <td th:text="${customer.agreementNum}">6</td> <td th:text="${customer.agreementMoney}">6</td> <td th:text="${customer.inRoomNum}">6</td> <td><a th:href="@{/customer/toEdit/{id}/{pageNo}(id=${customer.customerId},pageNo=${pageIndex})}">编辑</a></td> <td><a th:href="@{/customer/delete/{id}(id=${customer.customerId})}">删除</a></td> </tr> </tbody> </table> <div class="text-right"> <input type="hidden" name="customerName" th:value="${customerName}"> <ul class="pagination" > <li class="text-center"><a th:text="‘共计‘+${customerPage.getTotalPages()}+‘页‘"></a></li> <li th:class="${pageIndex==1}?‘disabled‘ : ‘‘" th:if="${pageIndex-1 >=1}"><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-1})}">上一页</a></li> <li th:if="${pageIndex-3 >=1}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-3})}" th:text="${pageIndex -3}" >1</a></li> <li th:if="${pageIndex-2 >=1}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-2})}" th:text="${pageIndex -2}" >1</a></li> <li th:if="${pageIndex-1 >=1}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-1})}" th:text="${pageIndex -1}" >1</a></li> <li class="active"><a href="#" th:text="${pageIndex}" >1</a></li> <li th:if="${pageIndex+1 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+1})}" th:text="${pageIndex +1}" >1</a></li> <li th:if="${pageIndex+2 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+2})}" th:text="${pageIndex +2}" >1</a></li> <li th:if="${pageIndex+3 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+3})}" th:text="${pageIndex +3}" >1</a></li> <li th:class="${pageIndex==customerPage.getTotalPages()}?‘disabled‘ : ‘‘" th:if="${pageIndex+1 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+1})}">下一页</a></li> </ul> </div> <br> </div> <script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script> <!-- 在这里引入是避免和index.html里重复引入,单页也可以安全调试--> <script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script> </body> </html>

 





以上是关于thymeleaf 布局layout的主要内容,如果未能解决你的问题,请参考以下文章

Thymeleaf利用layout.html文件生成页面布局框架

Thymeleaf(第八章)模板布局

Spring boot:thymeleaf 没有正确渲染片段

thymeleaf 片段渲染后重新加载 javascript

使用 thymeleaf 用父布局包装模板

Android 底部工作表布局边距