解決SpringBoot頁面跳轉無法訪問靜態資源的問題


初學SpringBoot,寫項目的時候遇到了問題,原本的頁面是這樣的
在這里插入圖片描述
但啟動項目后是這樣的
在這里插入圖片描述
這是因為thymeleaf中引入靜態資源及模板需要使用到 th:xxx 屬性,否則無法在動態資源中訪問靜態資源。
記錄一下解決方案。

訪問css

需要用到 th:href 來引入css資源,格式為 th:href = “@{文件路徑}”

<link rel="stylesheet" href="css/jquery-ui.min.css" th:href="@{/css/jquery-ui.min.css}" />

訪問js

需要用到 th:src 來引入js資源,格式為 th:src = “@{文件路徑}”

<script src="js/jquery.js" th:src="@{/js/jquery.js}"></script>

這里如果項目結構是這樣:
在這里插入圖片描述
那么寫法上不需要像靜態頁面那樣引入
在這里插入圖片描述

include頁面

當要把頁面拆分為模板,使用include方式(html中為jquary.load方式)引入時,需要使用
th:include=“要引入的html文件名::html中th:fragment屬性中的值”

<div id="pageTop" >
   <header class="am-topbar am-topbar-inverse" th:include="topbar::topbarNav"></header>
</div>
<div class="super-bar">
   <div id="pageLeft"  >
      <div class="left-sidebar" th:include="leftsider::leftSiderNav"></div>
   </div>
   <div id="pageMain"  >
      <div class="main-content" th:include="maincontent::mainContentNav"></div>
   </div>
</div>


如th:include=“topbar::topbarNav”,即引用了topbar.html頁面的某個標簽
在這里插入圖片描述
注意!!!如上圖,topbar.html使用了th:fragment標簽引入到index.html頁面后,它的class屬性不會隨着過去(但它的子元素的不會受到影響),需要在index所引用的位置添加相應的class


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM