目标：固定顶部或者左侧导航，点击导航动态更新中间content区域的页面，也就是在放一个div在页面上，把html加载到div里，以前类似的实现都是通过Iframe或者js实现，在使用springboot+thymeleaf后，以前的办法有点过时。
步骤一：
添加依赖
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
步骤二：确定最外层模板，就是导航框架什么的，这里是index.html
<!DOCTYPE html>
<html xmlns:th=”http://www.thymeleaf.org”
xmlns:layout=”http://www.ultraq.net.nz/web/thymeleaf/layout” ——->关键的命名空间
xmlns=”http://www.w3.org/1999/xhtml”
lang=”en”>
<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=”/css/bootstrap.min.css” th:href=”@{/css/bootstrap.min.css}”></link>
<!–jquery要放在前面–>
<script src=”/js/jquery-3.3.1.min.js” th:src=”@{/js/jquery-3.3.1.min.js}”></script>
<script src=”/js/bootstrap.min.js” th:src=”@{/js/bootstrap.min.js}”></script>
<title>index</title>
</head>
<body>
<nav id=”myNav” class=”navbar navbar-default” role=”navigation”>
<div class=”container”>
<!– Brand and toggle get grouped for better mobile display –>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”>
<img alt=”Brand” th:src=”@{/img/arrow_right.png}” width=”20″ height=”20″>
</a>
</div>
<!– Collect the nav links, forms, and other content for toggling –>
<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav” id=”mytab”>
<li class=”active”><a href=”#”>客户数量 <span class=”badge”>1545</span> <span class=”sr-only”>(current)</span></a></li>
<li><a href=”#”>首页</a></li>
<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>客户管理 <span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li><a th:href=”@{/customer/list}”>客户列表</a></li>
<li><a th:href=”@{/customer/add}”>添加客户</a></li>
<li><a href=”#”>Something else here</a></li>
<li role=”separator” class=”divider”></li>
<li><a href=”#”>Separated link</a></li>
<li role=”separator” class=”divider”></li>
<li><a href=”#”>One more separated link</a></li>
</ul>
</li>
</ul>
<form class=”navbar-form navbar-left”>
<div class=”form-group”>
<input type=”text” class=”form-control” placeholder=”Search” >
</div>
<button type=”submit” class=”btn btn-default”>Submit</button>
</form>
<ul class=”nav navbar-nav navbar-right” id=”mytab2″>
<button type=”button” class=”btn btn-default navbar-btn”>Sign in</button>
<p class=”navbar-text navbar-right”>Signed in as <a href=”#” class=”navbar-link”>Mark Otto</a></p>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Dropdown <span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Action</a></li>
<li><a href=”#”>Another action</a></li>
<li><a href=”#”>Something else here</a></li>
<li role=”separator” class=”divider”></li>
<li><a href=”#”>Separated link</a></li>
</ul>
</li>
</ul>
</div><!– /.navbar-collapse –>
</div><!– /.container-fluid –>
</nav>
<div class=”container” layout:fragment=”content”>
这里就是放内容的地方
</div>
<script>
$(function () {
$(“#mytab li”).click(function (e) {
$(this).tab(“show”);
});
})
</script>
</body>
</html>
步骤三：放入的页面，这里是list.html
<!DOCTYPE html>
<html lang=”en”
xmlns:th=”http://www.thymeleaf.org”
xmlns:layout=”http://www.ultraq.net.nz/web/thymeleaf/layout”
xmlns=”http://www.w3.org/1999/xhtml”
layout:decorator=”index” –>这里是关键，指向index.html页面
>
<head>
<meta charset=”UTF-8″/>
<title>List</title>
<!–在index模板中已经引入，div具备继承性–>
<!–<link rel=”stylesheet” href=”/css/bootstrap.min.css” th:href=”@{/css/bootstrap.min.css}”></link>–>
<!–jquery要放在前面–>
<!–<script src=”/js/jquery-3.3.1.min.js” th:src=”@{/js/jquery-3.3.1.min.js}”></script>–>
<!–<script src=”/js/bootstrap.min.js” th:src=”@{/js/bootstrap.min.js}”></script>–>
</head>
<body>
<div layout:fragment=”content”> –>这里指向index.html里的<div class=”container” layout:fragment=”content”>，替换里面内容
<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>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each=”customer : ${customers}”>
<th scope=”row” th:text=”${customer.id}”>1</th>
<td th:text=”${customer.filesNo}”>neo</td>
<td th:text=”${customer.customerName}”>Otto</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=”@{/toEdit(id=${customer.id})}”>edit</a></td>
<td><a th:href=”@{/delete(id=${customer.id})}”>delete</a></td>
</tr>
</tbody>
</table>
<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>
</div>
</body>
</html>
再加一个add.html页面
<!DOCTYPE html>
<html lang=”en”
xmlns:th=”http://www.thymeleaf.org”
xmlns:layout=”http://www.ultraq.net.nz/web/thymeleaf/layout”
xmlns=”http://www.w3.org/1999/xhtml”
layout:decorator=”index”
>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
</head>
<body>
<div layout:fragment=”content”>
add!!!
</div>
</body>
</html>
