springboot html調(diào)用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,圖片等靜態(tài)資源的三種方案

今天在寫一個Spring Boot項目的時候發(fā)現(xiàn)了一個問題，無法訪問static目錄下的文件夾里面的靜態(tài)資源，如css， js和圖片 ，在網(wǎng)站中也沒有找到這些靜態(tài)文件的地址。在網(wǎng)上找了好幾種解決方法也沒有用。但是我之前使用Spring Boot的時候并沒有出現(xiàn)這個問題。

所以我找出了以前寫的項目，對比了一下，終于發(fā)現(xiàn)了問題：

以前的項目我是把所有的靜態(tài)文件全都放在了static這個文件下，于是直接訪問了。但是現(xiàn)在我在static文件夾下又多分了幾個文件夾，結構如下圖：

第一種解決方法

發(fā)現(xiàn)了不同之后，我嘗試了將這個css文件直接放在static最外面，然后更改文件的引用地址為

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

發(fā)現(xiàn)果然可以正常的訪問到了。

第二種解決方法

但是這種方法并不是我想要的，不過發(fā)現(xiàn)了問題之后就好辦了。我找到了另一種解決方法，可以保持這個文件系統(tǒng)結構：

在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文件中配置，也可以引用到所需要的文件。

原因

為什么會出現(xiàn)這個問題呢？

因為Spring Boot的默認掃描路徑是/static，并沒有包含static這個文件夾之中的文件夾里面的文件，所以如果把文件放在/static/css/me.css這種位置就無法被識別出來。

而方法一和方法二的這段代碼的作用就是將/static文件夾下面的所有文件夾和以及相應的子文件夾都添加到掃描路徑中去，于是就可以正常的使用了。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論