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>

热门工具换一换