springboot~thymeleaf页面布局的步骤

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

内容简介：参考：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>

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

查看所有标签

猜你喜欢:

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

码农书籍

Head First Web Design

Ethan Watrall、Jeff Siarto / O’Reilly Media, Inc. / 2009-01-02 / USD 49.99

Want to know how to make your pages look beautiful, communicate your message effectively, guide visitors through your website with ease, and get everything approved by the accessibility and usability ......一起来看看《Head First Web Design》这本书的介绍吧!

码农工具