springboot html呼叫js無效400問題及解決

2022-03-21 22:00:02

springboot html呼叫js無效400

html板在templates下面，js檔案在static下面，在模板中參照時不需要加static這個路徑。

例如

src
  └─main
     ├─java
     └─resources
         ├─static
         │  ├─css
         │  ├─img
         │  └─js
         │    └─test.js
         └─templates

在模板中參照test.js, 你參照的地址應當為/js/test.js，換成thymeleaf的屬性則應當為th:src="@{/js/test.js}"，其中的絕對地址可以換成相對地址。

無法存取css,js,圖片等靜態資源的三種方案

今天在寫一個Spring Boot專案的時候發現了一個問題，無法存取static目錄下的資料夾裡面的靜態資源，如css， js和圖片，在網站中也沒有找到這些靜態檔案的地址。在網上找了好幾種解決方法也沒有用。但是我之前使用Spring Boot的時候並沒有出現這個問題。

所以我找出了以前寫的專案，對比了一下，終於發現了問題：

以前的專案我是把所有的靜態檔案全都放在了static這個檔案下，於是直接存取了。但是現在我在static資料夾下又多分了幾個資料夾，結構如下圖：

第一種解決方法

發現了不同之後，我嘗試了將這個css檔案直接放在static最外面，然後更改檔案的參照地址為

<link rel="stylesheet" href="me.css" rel="external nofollow" >

發現果然可以正常的存取到了。

第二種解決方法

但是這種方法並不是我想要的，不過發現了問題之後就好辦了。我找到了另一種解決方法，可以保持這個檔案系統結構：

在application.properties這個組態檔中新增：spring.mvc.static-path-pattern=/static/**

如果你的組態檔是application.yml檔案則新增

spring:
    mvc:
        static-path-pattern: /static/**

新增之後recompile一下，果然可以在子資料夾中存取了，參照的格式是：

<link rel="stylesheet" href="../static/css/me.css" rel="external nofollow"  rel="external nofollow" >

第三種解決方法

因為我使用的是thymeleaf這個模版，所以可以直接使用Thymeleaf的引入檔案的方式，如下：

<link rel="stylesheet" href="../static/css/me.css" rel="external nofollow"  rel="external nofollow"  th:href="@{/css/me.css}" rel="external nofollow" >

這樣，即使不在application.properties檔案中設定，也可以參照到所需要的檔案。

原因

為什麼會出現這個問題呢？

因為Spring Boot的預設掃描路徑是/static，並沒有包含static這個資料夾之中的資料夾裡面的檔案，所以如果把檔案放在/static/css/me.css這種位置就無法被識別出來。

而方法一和方法二的這段程式碼的作用就是將/static資料夾下面的所有資料夾和以及相應的子資料夾都新增到掃描路徑中去，於是就可以正常的使用了。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。