springboot html调用js无效400问题及解决

目录
  • springboot html调用js无效400
    • 例如
  • 无法访问css,js,图片等静态资源的三种方案
    • 第一种解决方法
    • 第二种解决方法
    • 第三种解决方法

springboot html调用js无效400

html板在templates下面，js文件在static下面，在模板中引用时不需要加static这个路径。

例如

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

在模板中引用test.js, 你引用的地址应当为/js/test.js，换成thymeleaf的属性则应当为th:src="@{/js/test.js}"，其中的绝对地址可以换成相对地址。

无法访问css,js,图片等静态资源的三种方案

今天在写一个Spring Boot项目的时候发现了一个问题，无法访问static目录下的文件夹里面的静态资源，如css， js和图片 ，在网站中也没有找到这些静态文件的地址。在网上找了好几种解决方法也没有用。但是我之前使用Spring Boot的时候并没有出现这个问题。

所以我找出了以前写的项目，对比了一下，终于发现了问题：

以前的项目我是把所有的静态文件全都放在了static这个文件下，于是直接访问了。但是现在我在static文件夹下又多分了几个文件夹，结构如下图：

第一种解决方法

发现了不同之后，我尝试了将这个css文件直接放在static最外面，然后更改文件的引用地址为

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

发现果然可以正常的访问到了。

第二种解决方法

但是这种方法并不是我想要的，不过发现了问题之后就好办了。我找到了另一种解决方法，可以保持这个文件系统结构：

在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文件中配置，也可以引用到所需要的文件。

原因

为什么会出现这个问题呢？

因为Spring Boot的默认扫描路径是/static，并没有包含static这个文件夹之中的文件夹里面的文件，所以如果把文件放在/static/css/me.css这种位置就无法被识别出来。

而方法一和方法二的这段代码的作用就是将/static文件夹下面的所有文件夹和以及相应的子文件夹都添加到扫描路径中去，于是就可以正常的使用了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • spring boot 2.x html中引用css和js失效问题及解决方法

    在application.properties中配置了static的默认路径 我的static目录结构是这样的 index.html中这样引用css或者js文件,用到了th标签 html使用th标签需要先导入 以上这样配置好了之后发现网页的css和js果然加载出来了. 自定义拦截器失效 在自定义拦截器注册之后发现静态资源被拦截了,注释掉拦截器发现果然是拦截器的问题. 在注册方法上使用了excludePathPatterns()排除静态资源的拦截,发现该方法失效了,查看源码WebMvcConfig

  • SpringBoot静态资源css,js,img配置方案

    SpringBoot静态资源css,js,img配置方案

    一.概述 springboot 默认静态资源访问的路径为:/static 或 /public 或 /resources 或 /META-INF/resources 这样的地址都必须定义在src/main/resources目录文件中,这样可以达到在项目启动时候可以自动加载为项目静态地址目录到classpath下 ,静态访问地址其实是使用 ResourceHttpRequestHandler 核心处理器加载到WebMvcConfigurerAdapter进行对addResourceHandlers

  • Spring Boot访问静态资源css/js,你真的懂了吗

    Spring Boot访问静态资源css/js,你真的懂了吗

    一.前言 我们用 Spring Boot 搭建 Web 应用时(如搭建一个博客),经常需要在 Html 中访问一些静态资源,比如: css 样式: js 脚本: favicon.ico 图标等: 而在 Spring Boot 中如果没有做任何配置,是无法直接访问静态资源的,通常会报 404 错误: 二.Spring Boot 访问静态资源的默认目录 Spring Boot 访问静态资源,默认有两个默认目录: classpath/static 目录:src/mian/resource Servle

  • springboot html调用js无效400问题及解决

    springboot html调用js无效400问题及解决

    目录 springboot html调用js无效400 例如 无法访问css,js,图片等静态资源的三种方案 第一种解决方法 第二种解决方法 第三种解决方法 springboot html调用js无效400 html板在templates下面,js文件在static下面,在模板中引用时不需要加static这个路径. 例如 src   └─main      ├─java      └─resources          ├─static          │  ├─css          │

  • 解决springboot中@DynamicUpdate注解无效的问题

    解决springboot中@DynamicUpdate注解无效的问题

    springboot 中 @DynamicUpdate 注解无效解决方案 遇到的问题 项目中使用 jpa,以前没用过,所以踩坑在所难免. 在使用过程中,要更新一条记录的某个字段,更新成功以后,发现整条记录只剩下我更新的那个字段,其他的全部为空了. 瞬间明白,这种更新是全覆盖,针对每个字段 update,实体类没赋值的字段,也直接将空值 set 过去了. 寻求解决方案 正在庆幸这么容易就解决,突然发现并没有这么简单. 群众的力量是无穷大的,我立刻就明白这个注解为什么无效,原来是搞错了它的用途. 一

  • js调用Flex中的方法并向flex中传参及flex调用js示例

    首先,有了一个swf文件,test.swf,同时也有一个自动生成的html文件,test.html. 然后,在另外一个文件,test.jsp中,通过iframe,引入了test.html,即引入了swf. 现在想要在test.jsp中,向flex传参,并调用flex中的方法,我采用的方法是: 首先,在jsp中写一个调用flex的方法,如下 复制代码 代码如下: function initSWF(){ //得到swf的object var obj = window.frames["rightfra

  • java编程中实现调用js方法分析

    本文实例讲述了java编程中实现调用js方法.分享给大家供大家参考,具体如下: /* * 加载脚本引擎,并在java中调用js方法 */ public void test2() { ScriptEngineManager manager = new ScriptEngineManager(); ScriptEngine engine = manager.getEngineByName("javascript"); try { String str="2&1"

  • 关于JS中setTimeout()无法调用带参函数问题的解决方法

    本文实例分析了JS中setTimeout()无法调用带参函数问题的解决方法.分享给大家供大家参考,具体如下: 解决方法:重写setTimeout() 方法,需要用到闭包函数.如下: var _st = window.setTimeout; window.setTimeout = function(fRef, mDelay){ if (typeof fRef == 'function') { var argu = Array.prototype.slice.call(arguments, 2);

  • 页面载入结束自动调用js函数示例

    复制代码 代码如下: <scriptlanguage="javascript"> window.onload=function(){ alert("页面载入完成,自动调用js函数."); } </script>

  • ThinkPHP里用U方法调用js文件实例

    本文实例讲述了ThinkPHP里用U方法调用js文件的方法.分享给大家供大家参考.具体如下: 在TP里提供了在模板文件中直接调用函数的快捷方法.U是其中之一.手册里有它的用法: 复制代码 代码如下: {:U('User/insert' )} 先把js文件的后缀改成html(这个不会影响),然后写个JsAction,在里面进行调用: <?php class JsAction extends Action{ function nav() { $this->display('Index:js:nav

  • iframe中子父类窗口调用JS的方法及注意事项

    一.前言 我页面用的是EasyUI的弹出窗口里面嵌入一个iframe. 第一:父窗口打开子窗口是一个新增用户信息的iframe子页面,点击保存后,子窗口iframe则去调用父窗口的function closeAddWindow()方法,让父窗口去关闭新增页面: 第二:父窗口打开一个设置用户权限的iframe子窗口,首先打开这个子窗口会全部加载数据库表中所有的存在的权限,然后子窗口需要把加载的权限信息拼接html  Append到一个ID为<table id="tb"><

  • JavaScript中Require调用js的实例分享

    在我最初开始写 JavaScript 函数时,通常是这样的: function fun1() { // some code here } function fun2() { // some other code here } ... 函数全写在全局环境中,项目很小时,通常不会有什么冲突问题. 但代码多了后,渐渐就发现,函数名称(英文词汇)有点不够用了.于是引入命名空间的概念,开始模块化代码. 命名空间下的函数 在命名空间下,我的代码这样写: var com = com || {}; com.zf

  • 使用JQuery 加载页面时调用JS的实现方法

    1,window.onload = function() {}; 2,$(document).ready(function() {}); 一.一般的加载页面时调用js方法如下: window.onload = function() { $("table tr:nth-child(even)").addClass("even"); //这个是jquery代码 }; 这段代码会在整个页面的document全部加载完成以后执行.不幸的这种方式不仅要求页面的DOM tree

随机推荐