thymeleaf利用fragment解決html頁面間獲取context-path問題

問題說明

我使用spring boot+thymeleaf做了個項目，那前臺頁面都是html，裏面有各種api調用和路徑跳轉。

大家都知道這些路徑不能寫死，爲保證任何情況下路徑的正確性，一般都是這種格式：項目路徑+接口路徑，例如：localhost:8080/system/api/user/1

現在已知thymeleaf頁面中js要獲取項目路徑時這樣的：

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var ctx = /*[[@{/}]]*/ '';
    /*]]>*/
</script>

ctx=/system/

那我又不想每個頁面都寫這麼一段，所以利用thymeleaf的片段引用特性可以把它抽成公共腳本供各html頁面用。

 

解決方法

1.創建fragment.html

<script type="text/javascript" th:inline="javascript" th:fragment="ctx">
    /*<![CDATA[*/
    var ctx = /*[[@{/}]]*/ '';
    /*]]>*/
</script>

 

2.頁面引用

<!--ctx-->
<script th:replace="~{fragment::ctx}"/>

 

3.調整接口和路徑格式

$.get(ctx+"api/book/list",
            {
                author: param.author,
                name: param.name,
                isbn: param.isbn,
                page: pageNo,
                limit: pageSize
            },

 

var href=ctx+"bookDetail/"+data[i].id;