快捷導(dǎo)航

springboot?html調(diào)用js無(wú)效400問(wèn)題及解決

更新時(shí)間：2022年03月21日 17:29:49 作者：子非魚(yú)yy

這篇文章主要介紹了springboot?html調(diào)用js無(wú)效400的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

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

例如

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}"，其中的絕對(duì)地址可以換成相對(duì)地址。

無(wú)法訪(fǎng)問(wèn)css,js,圖片等靜態(tài)資源的三種方案

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

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

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

第一種解決方法

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

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

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

第二種解決方法

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

在application.properties這個(gè)配置文件中添加：spring.mvc.static-path-pattern=/static/**

如果你的配置文件是application.yml文件則添加

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

添加之后recompile一下，果然可以在子文件夾中訪(fǎng)問(wèn)了，引用的格式是：

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

第三種解決方法

因?yàn)槲沂褂玫氖莟hymeleaf這個(gè)模版，所以可以直接使用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文件中配置，也可以引用到所需要的文件。

原因

為什么會(huì)出現(xiàn)這個(gè)問(wèn)題呢？

因?yàn)镾pring Boot的默認(rèn)掃描路徑是/static，并沒(méi)有包含static這個(gè)文件夾之中的文件夾里面的文件，所以如果把文件放在/static/css/me.css這種位置就無(wú)法被識(shí)別出來(lái)。

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

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

您可能感興趣的文章: