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>
正文到此结束
热门推荐
相关文章
近期评论
-
你这基本没有更新呀，最近文章显示还是2019年的文章。不符合要求哈
-
关键词：慕云博客 链接：https://www.lilun.me 描述：分享原创文字的个人博客
-
-
-
可以提供一下源码吗
-
不是商业站，鸡娃学习笔记
-
-
-
-
听他们说很厉害的样子
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
