一、问题描述
今天在github上下载了一个项目,项目结构Springboot + thymeleaf,在使用过程中发现前端页面按钮点击后事件无响应,在F12调试后查看后发现问题所在:
在F12调试后发现是相应的js文件全是404,为什么会找不到引入的js文件呢?以下是原HTML中js文件的引入写法
/*这里是HTML引入js文件的代码*/
<script type="text/javascript" th:src="@{~/js/aes.js}"></script>
<script type="text/javascript" th:src="@{~/js/pad-zeropadding.js}"></script>
<script type="text/javascript" th:src="@{~/js/security.js}"></script>
<script type="text/javascript" th:src="@{~/js/jquery-2.2.3.min.js}"></script>
<script type="text/javascript" th:src="@{~/js/random.js}"></script>
后续我将引入js文件的方式做了以下改变:
/********第一次更改********//********无效 依旧404********/
<script type="text/javascript" th:src="@{./js/aes.js}"></script>
<script type="text/javascript" th:src="@{./js/pad-zeropadding.js}"></script>
<script type="text/javascript" th:src="@{./js/security.js}"></script>
<script type="text/javascript" th:src="@{./js/jquery-2.2.3.min.js}"></script>
<script type="text/javascript" th:src="@{./js/random.js}"></script>
/********第二次更改********//********无效 依旧404********/
<script type="text/javascript" th:src="@{../static/js/aes.js}"></script>
<script type="text/javascript" th:src="@{../static/js/pad-zeropadding.js}"></script>
<script type="text/javascript" th:src="@{../static/js/security.js}"></script>
<script type="text/javascript" th:src="@{../static/js/jquery-2.2.3.min.js}"></script>
<script type="text/javascript" th:src="@{../static/js/random.js}"></script>
在经过两次更改js文件引入方式后,都没能解决404的问题,接下来我把矛头指向了Springboot,怀疑是Springboot在资源转发的过程中进行了拦截。
二、解决办法
在转变思想后,给Springboot添加了静态资源配置:
@Controller
@SpringBootApplication
public class CustomeWebConfiguration extends WebMvcConfigurationSupport {
public void addResourceHandlers(ResourceHandlerRegistry registry){
registry.addResourceHandler("/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+"/templates/");
registry.addResourceHandler("/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+"/static/");
}
}
结果解决了js文件引入404问题:
- 可用:
<script type="text/javascript" th:src="@{./js/aes.js}"></script>
<script type="text/javascript" th:src="@{./js/pad-zeropadding.js}"></script>
<script type="text/javascript" th:src="@{./js/security.js}"></script>
<script type="text/javascript" th:src="@{./js/jquery-2.2.3.min.js}"></script>
<script type="text/javascript" th:src="@{./js/random.js}"></script>
- 可用:
<script type="text/javascript" th:src="@{~/js/aes.js}"></script>
<script type="text/javascript" th:src="@{~/js/pad-zeropadding.js}"></script>
<script type="text/javascript" th:src="@{~/js/security.js}"></script>
<script type="text/javascript" th:src="@{~/js/jquery-2.2.3.min.js}"></script>
<script type="text/javascript" th:src="@{~/js/random.js}"></script>
注意:使用…/static/**写法引入js文件,需要将Springboot静态资源配置更改为以下方式:
@Controller
@SpringBootApplication
public class CustomeWebConfiguration extends WebMvcConfigurationSupport {
public void addResourceHandlers(ResourceHandlerRegistry registry){
registry.addResourceHandler("/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+"/templates/");
registry.addResourceHandler("/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+"/");
}
}
- 这样引入的js文件也可用:
<script type="text/javascript" th:src="@{../static/js/aes.js}"></script>
<script type="text/javascript" th:src="@{../static/js/pad-zeropadding.js}"></script>
<script type="text/javascript" th:src="@{../static/js/security.js}"></script>
<script type="text/javascript" th:src="@{../static/js/jquery-2.2.3.min.js}"></script>
<script type="text/javascript" th:src="@{../static/js/random.js}"></script>
给文章点个赞吧~!