5.8 Thymeleaf公共片段(標簽)和內聯JS · spring boot 2.x 技術參考文檔

### 一、片段表達式(標簽)`~{}` 使用方法：首先通過`th:fragment`定制片段，然后通過`th:replace`填寫片段路徑和片段名。例如：我們通常將項目里面經常重用的代碼抽取為代碼片段(標簽) ~~~  <head th:fragment="static(version)"> <script th:src="@{/webjars/jquery/${version}/jquery.js}"></script> </head> ~~~ 然后在不同的頁面引用該片段，達到代碼重用的目的 ~~~  <div th:replace="~{common/head::static(1.12.4)}"></div> ~~~ 在實際使用中，我們往往使用更簡潔的表達，去掉表達式外殼直接填寫片段名。例如： ~~~  <div th:replace="common/head::static"></div> <div th:insert="common/head::static"></div> <div th:include="common/head::static"></div> ~~~ 關于thymeleaf th:replace th:include th:insert 的區別 * th:insert ：保留自己的主標簽，保留th:fragment的主標簽。 * th:replace ：不要自己的主標簽，保留th:fragment的主標簽。 * th:include ：保留自己的主標簽，不要th:fragment的主標簽。（官方3.0后不推薦） > 值得注意的是，使用替換路徑`th:replace`開頭請勿添加斜杠`/`，避免部署運行的時候出現路徑報錯。（因為默認拼接的路徑為`spring.thymeleaf.prefix = classpath:/templates/`）片段表達式是Thymeleaf的特色之一，細粒度可以達到標簽級別，這是JSP無法做到的。片段表達式擁有三種語法： * `~{ viewName } 表示引入完整頁面` * `~{ viewName ::selector} 表示在指定頁面尋找片段其中selector可為片段名、jquery選擇器等`,即可以在一個heml頁面內定義多個片段. * `~{ ::selector} 表示在當前頁尋找` **舉例操作輔助解釋：** 先創建一個文件夾common，創建一個Form.html文件 ![](https://img.kancloud.cn/6b/0d/6b0d2375048e0390903c97ea341d21d5_354x145.png) 將原來html中form表單剪切進去 ![](https://img.kancloud.cn/b0/86/b086233eb1ca14720edec6731c2e1170_964x261.png) 修改為 ~~~ <form th:fragment="userForm(user)" id="userForm"> <input id="id" name="id" th:value="${user.id}"/> <input id="username" name="username" th:value="${user.username}"/> <input id="password" name="password" th:value="${user.password}"/> <input name="name" th:value="${'I am '+(user.username!=null?user.username:'NoBody')}"/> </form> ~~~ 原html頁面表格處添加如下代碼，實現form表格的復用 ~~~ <div th:replace="~{common/Form::userForm(${user})}"></div> <div th:insert="~{common/Form::userForm(${user})}"></div> ~~~ 實際情況表格引用和之前效果相同 ![](https://img.kancloud.cn/33/c4/33c4ee70a52348ac965fb7cb9dc4aa6c_828x190.png) replace、insert、includ的區別： replace是替換整個div標簽， insert是將公共片段放入div標簽內， includ是將form標簽內的內容放入div標簽內。大體含義如下圖： ![](https://img.kancloud.cn/b0/68/b068c775ea3d945c75617d26c17e7ead_616x415.png) includ已經不推薦使用了 ![](https://img.kancloud.cn/ff/5a/ff5a80a597bd283b2197fd32f5982db1_404x121.png) ## 二、內聯語法我們之前所講的內容都是在html標簽上使用的thymeleaf的語法，那么如果我們需要在html上使用上訴所講的語法表達式，怎么做？答：標準格式為：`[[${xx}]]`，可以讀取服務端變量，也可以調用內置對象的方法。例如獲取用戶變量和應用路徑： ~~~ <script th:inline="javascript"> var user = [[${user}]]; var APP_PATH = [[${#request.getContextPath()}]]; var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]]; console.log(user.password); console.log(APP_PATH); console.log(LANG_COUNTRY); </script> ~~~ ![](https://img.kancloud.cn/d9/b8/d9b8ebdd4a9936cd9b03f5a0cccdfd98_397x139.png) 頁面內容正常引用 ![](https://img.kancloud.cn/8b/00/8b00ded4eec13ff7096d422cdacf2686_716x256.png) log輸出正常引用 ![](https://img.kancloud.cn/1f/e7/1fe707b75d5ca0c66047af5a58beb6f6_527x304.png) * 標簽（代碼片段）內引入的JS里面能使用內聯表達式嗎？答：不能！內聯表達式僅在頁面生效，因為`Thymeleaf`只負責解析一級視圖，不能識別外部標簽JS里面的表達式。 * JS引用模板變量時要左右加兩個[]也就是[[${xx}]]