springboot?html調(diào)用js無效400問題怎么解決

本篇內(nèi)容介紹了“springboot html調(diào)用js無效400問題怎么解決”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

springboot html調(diào)用js無效400

html板在templates下面，js文件在static下面，在模板中引用時不需要加static這個路徑。

例如

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

在模板中引用test.js, 你引用的地址應(yīng)當(dāng)為/js/test.js，換成thymeleaf的屬性則應(yīng)當(dāng)為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文件夾下又多分了幾個文件夾，結(jié)構(gòu)如下圖：

第一種解決方法

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

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

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

第二種解決方法

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

在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文件夾下面的所有文件夾和以及相應(yīng)的子文件夾都添加到掃描路徑中去，于是就可以正常的使用了。

“springboot html調(diào)用js無效400問題怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！