springboot~thymeleaf页面布局的步骤

栏目: Java · 发布时间: 6年前

内容简介：参考：https://ultraq.github.io/thymeleaf-layout-dialect/Installation.html注意里面的thymeleaf-layout-dialec就是模板包，必须要安装的，我之前就坑在这里了注意在layout模板里不能再使用其它模板片断了

参考：https://ultraq.github.io/thymeleaf-layout-dialect/Installation.html

依赖包

注意里面的thymeleaf-layout-dialec就是模板包，必须要安装的，我之前就坑在这里了

'org.springframework.boot:spring-boot-starter-thymeleaf',
 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.3.0'

default.html模板页

注意在layout模板里不能再使用其它模板片断了

<!DOCTYPE HTML>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.w3.org/1999/xhtml">
    <head lang="en" th:fragment="head">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <link href="../../static/css/bootstrap.min.css"
              th:href="@{/css/bootstrap.min.css}"
              rel="stylesheet" media="screen"/>


        <link href="../../static/css/jquery.dataTables.min.css"
              th:href="@{/css/jquery.dataTables.min.css}"
              rel="stylesheet" media="screen"/>

        <link href="../../static/css/mini_springboot.css"
              th:href="@{/css/mini_springboot.css}"
              rel="stylesheet" media="screen"/>

        <title>SpringBoot</title>
    </head>
    <body>
        <div class="container">
            <div th:fragment="header">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#" th:href="@{/}">Home</a>
                            <ul class="nav navbar-nav">
                                <li>
                                    <a href="#" th:href="@{/init}">初始化</a>
                                </li>
                                <li>
                                    <a href="#" th:href="@{/customers}">客户列表</a>
                                </li>
                                <li>
                                    <a href="#" th:href="@{/customerform}">建立客户</a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </nav>

            </div>

            <div class="panel panel-default">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    <div layout:fragment="content">content</div>
                </div>
            </div>

            <div th:fragment="footer">

                <div class="footer">大叔直通车:www.lindddd.top</div>


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


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

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

                <script src="../../static/js/mini_springboot.js"
                        th:src="@{/js/mini_springboot.js}"></script>

            </div>
        </div>

    </body>
</html>

使用它

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="~{layout/default}">
<head>
    <title>Spring Boot and Thymeleaf - Greeting with Thymeleaf Layout Dialect!</title>
</head>
<body>

<div layout:fragment="content">
    <div th:if="${not #lists.isEmpty(customers)}">
        <table id="customersTable" class="table table-striped">
            <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Age</th>
                <th></th>
            </tr>
            </thead>

            <tbody>
            <tr th:each="customer : ${customers}">
                <td th:text="${customer.id}"></td>
                <td th:text="${customer.name}"></td>
                <td th:text="${customer.email}"></td>
                <td th:text="${customer.age}"></td>
                <td><a th:href="${'/customerdetail/'+customer.id}">查看</a></td>
            </tr>
            </tbody>

        </table>
    </div>
</div>

</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Release It!

Michael T. Nygard / Pragmatic Bookshelf / 2007-03-30 / USD 34.95

“Feature complete” is not the same as “production ready.” Whether it’s in Java, .NET, or Ruby on Rails, getting your application ready to ship is only half the battle. Did you design your system to......一起来看看《Release It!》这本书的介绍吧!

码农工具

图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器

多种字符组合密码