zoukankan      html  css  js  c++  java
  • springboot~thymeleaf页面布局的步骤

    参考: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>
    
  • 相关阅读:
    书籍下载点
    总结一下散乱的开发点滴(3) (高手勿入)
    [收藏]Dynamic Controls in ASP.NET
    [收藏] ORACLE中函数
    面试题收集,面试和被面试中煎熬~~
    一句SQL得出表中重复的数据(TMP)
    总结一下散乱的开发点滴(4) (高手勿入)
    一个同步的例子
    关于学习的反思(下)系网开发记(4)
    关于学习的反思(上)系网开发记(2)
  • 原文地址:https://www.cnblogs.com/lori/p/10001515.html
Copyright © 2011-2022 走看看