JSP页面无法加载.js文件的解决方案

简介: JSP页面无法加载.js文件的解决方案

1. maven工程项目结构



网络异常,图片无法展示
|


工程结构图


2. jsp文件中的引入方式截图



网络异常,图片无法展示
|


js文件引入方式截图


3. 报错现象截图



网络异常,图片无法展示
|


jsp页面报错截图


4. 报错原因分析:


从工程结构和引入路径来看,没有问题.这点可通过:在jsp代码页面,ctrl+鼠标左键,点击文件路径观察是否可以链接到那个js文件 验证.通过验证没有问题.但是一直报404,说明访问被拦截住了.最后分析查找得知,是因为在web.xml缺少了SpringMVC拦截设置.

注意: 下面这段代码,要写在引入springMVC代码前。


<!-- 配置拦截路径 --> 
<!-- 同样道理,也对其他的后缀名进行了设置 --> 
<servlet-mapping> 
    <servlet-name >default </servlet-name >  
    <url-pattern >*.js</url-pattern>  
</servlet-mapping > 
<servlet-mapping > 
    <servlet-name >default </servlet-name >  
    <url-pattern >*.css</url-pattern>  
</servlet-mapping > 
<servlet-mapping > 
    <servlet-name >default </servlet-name >  
    <url-pattern >*.htm</url-pattern>  
</servlet-mapping > 
<servlet-mapping > 
    <servlet-name >default </servlet-name >  
    <url-pattern >*.gif</url-pattern>  
</servlet-mapping >


servlet-mapping是用于servlet的路径映射配置,其中url-pattern为指定的映射拦截路径。 在SpringMVC中,url-pattern指定了spring需要拦截派发的路径。

url-pattern有5种配置模式:


(1)/xxx:完全匹配/xxx的路径


(2)/xxx/*:匹配以/xxx开头的路径,请求中必须包含xxx。


(3)/*:匹配/下的所有路径,请求可以进入到action或controller,但是转发jsp时再次被拦截,不能访问jsp界面。


(4).xx:匹配以xx结尾的路径,所有请求必须以.xx结尾,但不会影响访问静态文件。


(5)/:默认模式,未被匹配的路径都将映射到刺servlet,对jpg,js,css等静态文件也将被拦截,不能访问。


容器匹配路径的规则:


a.容器会对路径进行完全匹配,找到成功匹配为止


b.容器会递归地尝试匹配最长的路径前缀。这是一次向下路径树的目录,使用“/”字符作为路径分隔符。最长的匹配决定选定的servlet


c.假于路径有后缀,容器会匹配指定后缀的servlet去处理


d.以上三点都没符合的,当有默认的servlet,会被调用

相关文章
|
3月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
193 2
|
4月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
987 0
|
10月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
502 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
11月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
550 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
10月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
306 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
11月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
363 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
9月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
Web App开发 JavaScript 前端开发
高性能JavaScript之加载和执行
JS在浏览器中的性能,可以认为是开发者所面临的最重要的可行性问题。这个问题因JS的阻塞特性变得复杂,也就是说当浏览器在执行JS代码时,不能同时做其他任何事情。事实上,大多数浏览器都使用单一进程来处理UI(用户界面)更新和JavaScript脚本执行,所以同一时刻只能做其中一件事情。
1273 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
302 2