最近在做針對框架的後臺管理系統，涉及到一些技術點做記錄。
項目框架 ： SpringBoot、Thymeleaf
頁面框架：x-admin
佈局框架: thymeleaf-layout-dialect
SpringBoot
pom.xml
<properties>
<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
</properties>
<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>
<version>2.3.0</version>
</dependency>
dev-yml
spring:
thymeleaf:
cache: false
prefix: classpath:/templates
suffix: .html
mode: LEGACYHTML5
enabled: true
check-template: false
controller
final static private String page = "/route/";
@RequestMapping(value = "/list.html", method = RequestMethod.GET)
public String list() throws Exception {
return page + "routeList";
}
Thymeleaf
由於x-admin是採用iframe佈局，所以大體頁面不用關注。
但是中間部分是動態的跳轉的，可能涉及到公共的JS以及CSS。所以這一部分可能需要獨立出來
路徑: /base/main.html
<html class="no-js" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
<meta name="renderer" content="webkit"/>
<!-- js/css 部分 -->
</head>
<header>
<h1>我是頭部</h1>
</header>
<div layout:fragment="content"></div>
<footer>
<p>我是尾部</p>
<p layout:fragment="custom-footer">自定義尾部 ....</p>
</footer>
</html>
引入公共頁面 list.html
<html xmlns:th="http://www.thymeleaf.org" lang="en"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorate="~{/base/main}">
<head>
<meta charset="UTF-8"/>
<title>路由列表</title>
</head>
<body>
<div>
<div layout:fragment="content">
<p>我是中間部分 ...</p>
</div>
</div>
</body>
</html>
注意這裏有個問題
從頁面效果演示來看
紅色部分居然沒有被合併掉，這是bug嗎？
坑爹了。
坑爹了
坑爹了
找了非常多的資料，都沒有解答。[眼淚都快流出來了。]
沒辦法了，看看源碼吧，簡單的看一下解析流程，猜測它的問題可能在替換內容的時候，出現了問題。
正常的話應該是該頁面的content替換佈局頁面的content
<body>
<div>這裏就是佈局頁面的部分</div>
<div>
<!-- 下面這一部分需要替換佈局部分的content，替換成功了，但是下面這一部分沒有刪除，導致頁面還是展現出來了 -->
<div layout:fragment="content">
<p>我是中間部分 ...</p>
</div>
</div>
</body>
然後自己靈光一閃，找了個退而求其次的方法。
<div style="display: none">
<div layout:fragment="content">
<p>我是中間部分 ...</p>
</div>
</div>
在這個外面包一層，div，然後是隱藏的，因爲模版替換的時候，這裏面的<div layout:fragment="content">會和佈局頁面部分做替換，替換完成了，上層不讓他顯示。也就只顯示一個。
這個方案不是很好。
如果有更好的方案，可以分享出來，節省更多人的辛酸淚。