title: 【java】SpringBoot+Thymeleaf中有關抽取公共代碼片段仍舊保持片段active類活動（不寫死）的辦法
date: 2019-01-12
tags: java
SpringBoot+Thymeleaf中有關抽取公共代碼片段仍舊保持片段active類活動（不寫死）的辦法
最近在進階練習java框架springboot時，因爲用的是thymeleaf模板，在使用過程中因爲每個頁面都有左側導航欄的形式，大概如圖：
因爲在右側展示的每個具體頁面都有這個左側導航欄，所以這部分左側導航欄的代碼可作爲公共代碼片段抽取出來，供每個頁面引入使用。
這裏首先把這個左側導航欄的有關代碼抽取出來放進一個public.html，這個public.html是新建的空白模板頁面，如下：
<!DOCTYPE html>
<html>
<!-- 命名head頭部代碼片段id爲public_head -->
<head lang="en">
<meta charset="UTF-8">
<title>公共代碼片段</title>
</head>
<body>
<!-- 把左側導航欄代碼片段抽取到這並設置id爲public_left -->
<div class="left" id="public_left">
<h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
<nav>
<ul class="list">
<li><a href="../bill/list.html">賬單管理</a></li>
<li><a href="../provider/list.html" id=“active”>供應商管理</a></li>
<li><a href="../user/list.html">用戶管理</a></li>
<li><a href="../main/password.html">密碼修改</a></li>
<li><a href="../main/login.html">退出系統</a></li>
</ul>
</nav>
</div>
</body>
</html>
這裏設置id的作用就是好讓其他頁面引入這整個代碼片段
接着在供應商展示主頁（主要代碼）引入（其實算替換）這個代碼片段：
<!--主體內容-->
<section class="publicMian ">
<!-- 展示左側導航欄的div塊 -->
<div class="left" th:replace="main/public:: #public_left">
</div>
<div class="right">
<div class="location">
<strong>你現在所在的位置是:</strong>
<span>供應商管理頁面</span>
</div>
<div class="search">
<span>供應商名稱：</span>
<input type="text" placeholder="請輸入供應商的名稱"/>
<input type="button" value="查詢"/>
<a href="add.html">添加供應商</a>
</div>
<!--供應商操作表格-->
<table class="providerTable" cellpadding="0" cellspacing="0">
<tr class="firstTr">
<th width="10%">供應商編碼</th>
<th width="20%">供應商名稱</th>
<th width="10%">聯繫人</th>
<th width="10%">聯繫電話</th>
<th width="10%">傳真</th>
<th width="10%">創建時間</th>
<th width="30%">操作</th>
</tr>
<tr>
<td>PRO-CODE—001</td>
<td>測試供應商001</td>
<td>韓露</td>
<td>15918230478</td>
<td>15918230478</td>
<td>2015-11-12</td>
<td>
<a href="view.html"><img th:src="@{/img/read.png}" alt="查看" title="查看"/></a>
<a href="update.html"><img th:src="@{/img/xiugai.png}" alt="修改" title="修改"/></a>
<a href="#" class="delete" ><img th:src="@{/img/schu.png}" alt="刪除" title="刪除"/></a>
</td>
</tr>
<tr>
<td>PRO-CODE—001</td>
<td>測試供應商001</td>
<td>韓露</td>
<td>15918230478</td>
<td>15918230478</td>
<td>2015-11-12</td>
<td>
<a href="view.html"><img th:src="@{/img/read.png}" alt="查看" title="查看"/></a>
<a href="update.html"><img th:src="@{/img/xiugai.png}" alt="修改" title="修改"/></a>
<a href="#" class="delete" ><img th:src="@{/img/schu.png}" alt="刪除" title="刪除"/></a>
</td>
</tr>
</table>
</div>
</section>
這裏主要分析以上代碼裏的這一句
<div class="left" th:replace="main/public:: #public_left"></div>
可以看出這裏採用了th標籤，它是thymeleaf模板提供的命名標籤，所以這個頁面一定要引入thymeleaf的命名規則，如下：
<html xmlns:th="http://www.thymeleaf.org">
即在html標籤頭部里加入這個網址即可
然後th:replace其實它的一個用法是替換這個通過replace後的內容替換當前的div塊的內容或者其他html標籤。
replace後面通過引號引起來的路徑則是存着公共代碼片段的html網頁，在這裏即是：main/public
他的含義是main文件夾下的public網頁，即public.html
因爲我的路徑如下
.html後綴可以不用寫
接着在路徑後用上兩個英文冒號 ::
最後像一般的js邏輯一樣
#public_left呼應了剛剛public.html頁面裏對左側導航欄設置的id名
所以這行代碼的意識就是通過利用th標籤找到main文件夾下的public.html網頁裏的id爲public_left的標籤內的代碼，用這段代碼替換當前的代碼，當前代碼div裏並沒有寫東西，直接填充進來就行。如圖：
這樣就能成功被各個頁面引入公共代碼片段
但是這裏就出現了一個問題，因爲這裏對左側導航欄設置了active類，點擊高亮，如圖
所以如果當我點擊賬單管理的時候，並在賬單管理頁面裏引入公共代碼片段，那豈不是還是供應商管理這個欄目高亮？
這裏就需要代碼片段引用並且傳遞參數
首先在要引用的地方改成如下，即：
<div class="left" th:replace="main/public:: #public_left(activeUri='provider')"></div>
即給這個引入同時設置一個叫做activeUri的參數並設置值爲provider
然後public代碼裏的代碼就改成了：
<!DOCTYPE html>
<html>
<!-- 命名head頭部代碼片段id爲public_head -->
<head lang="en">
<meta charset="UTF-8">
<title>公共代碼片段</title>
</head>
<body>
<!-- 把左側導航欄代碼片段抽取到這並設置id爲public_left -->
<div class="left" id="public_left">
<h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
<nav>
<ul class="list">
<li th:id="${activeUri == 'bill' ? 'active': ''}"><a href="../bill/list.html">賬單管理</a></li>
<li th:id="${activeUri == 'provider' ? 'active': ''}"><a href="../provider/list.html">供應商管理</a></li>
<li th:id="${activeUri == 'user' ? 'active': ''}"><a href="../user/list.html">用戶管理</a></li>
<li th:id="${activeUri == 'pwd' ? 'active': ''}"><a href="../main/password.html">密碼修改</a></li>
<li><a href="../main/login.html">退出系統</a></li>
</ul>
</nav>
</div>
</body>
</html>
通過給每個列表頭部設置th:id並作出判斷，判斷前端要用的參數activeUri在後臺是否有匹配的值即provider，是的話則id=active，即顯示高亮，否則則id=’’，即不顯示任何active效果，顯而易見，只有供應商管理作出的參數值判斷和前端用的參數值匹配，所以供應商管理這個欄目顯示高亮，這個意思就是
th:id=“是否前端的參數值等於bill？是則爲active，不是則爲空”
th:id=“是否前端的參數值等於provider？是則爲active，不是則爲空”
th:id=“是否前端的參數值等於user？是則爲active，不是則爲空”
th:id=“是否前端的參數值等於pwd？是則爲active，不是則爲空”
所以可以看出只有第二個欄目成功匹配，就會顯示id=“active”
其他的不匹配，則顯示id="",也就是空
這個時候也就達到了對應欄目引入代碼片段動態產生高亮的效果
所以，如果要在密碼修改頁面引入public頁面裏的這段公共代碼要怎麼做
當然是
<div class="left" th:replace="main/public:: #public_left(activeUri='pwd')"></div>
那麼這個時候密碼修改欄目成功匹配，就會顯示高亮了。