Springboot 集成Thymeleaf 引入js失效 解决方法

一、问题描述

今天在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>

---

给文章点个赞吧~！