- 首先建立相同部分的html,这里我命名为layout.html,放在了`templates/layout'文件夹下,这个路径以后是会用到的,以下是我的layout的代码,比较粗糙.
但是应该会更好的帮助理解.
要提到几个重要的部分
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> * {font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;} .header {background-color: #f5f5f5;padding: 20px;} .header a {padding: 0 20px;} .container {padding: 20px;margin:20px auto;} .footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;} </style> </head> <body> <header class="header"> <div> 测试接口Demo </div> </header> <div class="container" layout:fragment="content"></div> <footer class="footer"> <div> <p style="float: left">©TestS</p> </div> </footer> </body> </html>
- 然后建立新的html,这里我建立的是一个简单的添加用户的界面add.html,代码如下
要提到的几个重要的部分
-
<html lang="zh-CN"
前边我们提到的路径,这个就是你layout.html文件的位置.
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="demolayout/layout1"> - <div layout:fragment="content" > 设置div content 然后就可以将你需要更改的内容写在这个位置
- 之前在写到这的时候就直接跑程序了 ,发现不好用,但是感觉写的没有问题 ,最后找到了问题所在,在meaven中没有配置thmeleaf,
所以在meaven中添加如下代码
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
参考：https://www.jianshu.com/p/3b5ebc545a99