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

素颜马尾好姑娘i 2023-10-10 11:23 6阅读 0赞

#### 文章目录 ####

*   *   *  一、问题描述
         *  二、解决办法

#### 一、问题描述 ####

今天在github上下载了一个项目，项目结构Springboot + thymeleaf，在使用过程中发现前端页面按钮点击后事件无响应，在F12调试后查看后发现问题所在：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70]  
在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问题：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70 1]

*  可用：

*  可用：

**注意**：使用…/static/\*\*写法引入js文件，需要将Springboot静态资源配置更改为以下方式：

*  这样引入的js文件也可用：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70 2]

--------------------

给文章点个赞吧~！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200728141743950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200728144437819.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020072814525874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M=,size_16,color_FFFFFF,t_70