使用thymeleaf实现div中加载html
目标：固定顶部或者左侧导航，点击导航动态更新中间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>
