springmvc与前端框架配合使用(加载、跳转)出现css、js、img加载不了的解决办法

两个问题:

1.  eclipse运行jsp时,静态资源文件(图片、css。。等)未加载

2.  能够运行jsp文件,但是两个页面跳转时,第二个页面又出现静态资源文件未加载

问题1:   在做项目的时候,我用了springmvc与bootstrap,当我把前端页面设计好了之后,在eclipse中改成jsp文件,然后运行时出现了如下的情况:

解决办法:在WEB-INF的web.xml文件中添加如下代码

 1 <servlet-mapping>
 2         <servlet-name>default</servlet-name>
 3         <url-pattern>*.jpg</url-pattern>
 4     </servlet-mapping>
 5     <servlet-mapping>
 6         <servlet-name>default</servlet-name>
 7         <url-pattern>*.png</url-pattern>
 8     </servlet-mapping>
 9     <servlet-mapping>
10         <servlet-name>default</servlet-name>
11         <url-pattern>*.js</url-pattern>
12     </servlet-mapping>
13     <servlet-mapping>
14         <servlet-name>default</servlet-name>
15         <url-pattern>*.css</url-pattern>
16     </servlet-mapping>
17     <servlet-mapping>
18         <servlet-name>default</servlet-name>
19         <url-pattern>*.html</url-pattern>
20     </servlet-mapping>
21     <servlet-mapping>
22         <servlet-name>default</servlet-name>
23         <url-pattern>*.ttf</url-pattern>
24     </servlet-mapping>
25     <servlet-mapping>
26         <servlet-name>default</servlet-name>
27         <url-pattern>*.woff</url-pattern>
28     </servlet-mapping>
29     <servlet-mapping>
30         <servlet-name>default</servlet-name>
31         <url-pattern>*.woff2</url-pattern>
32     </servlet-mapping>

原因:springmvc在配置时如果设置将所有请求拦截都交给控制器的话,静态资源获得时也会经过控制器,所有无法获取到,如上代码表示将各类的资源文件按默认的方式(不经过请求拦截)获取。

问题2:   在以上问题解决后,我以为我的各个页面已经能无误地跳转了,但是!但是!还是在我向第二个页面跳转的时候出现了类似问题1的情况,

解决办法: 将所有jsp文件里设计,js、css、图片引入的路径改成绝对路径可以用EL表达式,像下面这样

css、img:

js:

注意是所有!所有!所有!

原因:没有证实,仅仅个人猜测,有大佬明白请评论指出。我的猜测:当页面跳转请求给控制器后,路径发送了变化,而资源文件又是相对路径,固然会找不到对应文件

原文地址:https://www.cnblogs.com/Thinkingcode/p/10805672.html

时间: 2024-10-04 22:01:13

springmvc与前端框架配合使用(加载、跳转)出现css、js、img加载不了的解决办法的相关文章

异常:未能加载文件或程序集”DAL”或它的某一个依赖项——解决办法

下面是我再使用抽象工厂+反射重构机房时,在Factoy中出现了下面一个问题: 去网上查了一下资料,发现这是一个很普遍的问题,它出现的原因主要有两种: 第一种: 加载DLL路径错误.解决办法是调整D层生成DLL的路径到UI的bin文件夹中.如下图: 反射的一个原则是:一切皆以UI层的bin文件夹中的dll名称为中心,说白一点,dll就是一个类库.我理解的反射,就是一串拼接的字符串,组成要实例化的类的名字.使用反射加载类时,默认是从UI层中的bin中找的,所以要在UI的bin文件夹下生成D层类的dl

VS2013 此模板尝试加载组件程序集”NuGet.VisualStudio.interop,Version=1.0.0.0 的解决办法 ZT

情景再现 使用VS2013新建ASP.NET MVC项目时,出现下面的错误: 具体错误信息: 错误: 此模板尝试加载组件程序集 “NuGet.VisualStudio.Interop, Version=1.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”.有关此问题和如何启用此模板的详细信息,请参见有关“自定义项目模板”的文档. 分析错误 既然错误信息提示模板尝试加载组件程序集,那说明NuGet.VisualStudio.Inter

前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法

问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id 和value 前端页面渲染也是不正常的 value无论赋成什么 结果都是on但是我还需要对他进行一些操作需要绑定他的onclick事件 所以我得解决办法就是在radio标签外套了一层div 绑定了id属性,同时将onclick事件绑定在这层div上.当我们触发它时,通过jQuery的子选择器找到内

DHTMLX 前端框架 建立你的一个应用程序 教程(六)-- 表格加载数据

从数据库加载数据 这篇我们介绍从MySQL数据库中加载数据到表格 我们使用 MySql的数据库dhtmlx_tutorial 和表contacts 示例使用的是PHP平台和dhtmlxConnector 帮助库  因为这是实现服务器端逻辑最简单的方法   数据以XML格式输出. 环境自己搭建  相信C#的朋友 从数据库获取数据转化盛XML也不是难事. 加载数据到表格: 1.找到”db.sql“文件将表导入到本地数据库 2.在codebase 文件中添加一个php文件codebase 3.下载dh

VS2013新建MVC项目时弹出此模板尝试加载组件程序集”NuGet.VisualStudio.Interop,Version=1.0.0.0.......&quot; 的解决办法

电脑刚装完系统,下载了最新版的VisualStudio2013,安装完毕后打算新建项目试一下是否好用,选择新建ASP.NET MVC项目后,稍等片刻,发现VS弹出以下窗口: 于是顿感纳闷,重启系统后再尝试亦是如此.折腾一番,发现原来是VisualStudio从2012版本就开始使用NuGet来管理项目和程序集引用了.出现这个问题是因为没有安装NuGet包管理器.然后果断在VS的"工具>>扩展和更新>>联机"中搜索"NuGet Package Manag

aspx在页面跳转(Response.Redirect)时丢失session问题及解决办法

[问题描述] 假设a.aspx.cs页面保存有Session["empid"]="3",当a.aspx.cs通过Response.Redirect("b.aspx")到达b.aspx页面后,b.aspx.cs获取到的Session["empid"]为null [解决思路]目前没有找到比较好的方法,暂时的处理方式是:在a.aspx页面跳转到b.aspx时,将session的值传过去,b.aspx页面接收到之后将该值更新到sess

【SpringMVC】【EasyUI】关于使用EasyUIForm上传文件,返回JsonIE提示下载文件的解决办法!

先说一下环境 EasyUI+SpringMVC+MyBatis 因为按正常手段,无法使用Ajax来提交一个包含文件的表单,故想到利用EasyUI的Form来提交,EasyUI的form封装了一套伪Ajax提交的方法,所以能够起到以ajax提交文件表单的作用! 但是当文件提交成功后,后台往前台返回了一个Json用来提示上传成功! 但是在其他浏览器下都正常,但是唯独在IE中会提示用户下载这个Json文件! 仔细的查看了下EasyUI的API看到API里有这样的一段话: 也就是说,返回的数据要无需设置

pycharm的ctrl+鼠标左键查看源码跳转.pyi文件而不是源码.py文件的解决办法

首先在File->Setting->Editor->Code Style->File Types中找到Python Stub. 然后将Registered Patterns里面的内容清空就好了. https://blog.csdn.net/qq_37463321/article/details/90443209 原文地址:https://www.cnblogs.com/SsoZhNO-1/p/12145650.html

Bootstrap简介--目前最受欢迎的前端框架(一)

Bootstrap,是目前最受欢迎的前端框架. Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的. Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap的特点 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式