在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用。

当然如果是前后端分离的项目倒不用考虑这些。

WEB-INF:出于安全性的考虑,这个目录是禁止外部直接访问的,所以 JSP 页面放在这个目录及其子目录下面是起到保护作用的。

在 jsp 页面中少不了的是对 js,css 文件的引用,那么我们引用的时候又有两种方式:

1)相对路径:就是说相对于这个 jsp 页面位置,js,css 文件所在的位置,这种引用是相对的,当某一方位置发生变化是,这个相对路径就得跟着改变。

在这种情况下我们把 jsp,js,css 文件都放到 WEB-INF 目录下是可以的,jsp 成功引用到 js,css 文件。

2)绝对路径:这是我们在开发中常用的,request.getcontextPath()
这是获取 web 项目上下文,也就是说 web 根目录
WebContent(WEB-INF 的上一级),

在使用绝对路径的时候,这样子,对于整个项目是绝对的路径。

jsp 使用绝对路径引用 js,css 文件,同时 js,css 文件又放到了 WEB-INF 目录下面,这时候的引用是失败的,当我们在浏览器访问的时候,会出现找不到引用的 js,css 文件。

分析:

这个问题的原因正是由于 WEB-INF 拒绝外部直接访问, 但是你可能会想,我的 JSP 文件也放在这个目录下面呀,为什么浏览器可以访问咧。

这时候,应该想想,你的 jsp 是直接通过 浏览器输入什么 http://..../xx.jsp 访问的?不是吧,大部分时候我们是直接访问 控制层 ,再由控制层控制返回那个 jsp 页面给浏览器的。

所以这时候,就不属于直接通过浏览器外部访问这个 JSP 页面了,而是通过了控制层访问的,属于内部访问了,这样 WEB-INF 当然不会禁止内部访问。

你可能又会想,为什么这些 js,css 文件又引用不了,因为这时候已经不属于内部访问了。

那么为什么是外部访问咧,因为当以绝对路径引用的时候,request.getcontextPath()/WEB-INF/js/xx.js,
这时候会转换为 xxx/WEB-INF/js/xx.js,很显然就变成了外部引用了,WEB-INF
拒绝了访问,所以我们一般会放到 WEB-INF 目录外面,这样:xxx/js/xx.js。

相对路径之所以能引用成功是这样的效果:WEB-INF/jsp/xx.jsp,这是 jsp 文件路径,WEB-INF/js/xx.js,这是 js 文件路径,相对这个 jsp 文件引用,以它为出发点:../js/xx.js
你看,这样完全没有经过 WEB-INF 目录,所以引用成功了。

关于WEB-INF目录不提供外部访问及JSP引用 js,css 文件路径问题的更多相关文章

  1. Web性能优化之动态合并JS/CSS文件并缓存客户端

    来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...

  2. 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。

    今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...

  3. CSS-06 外部JS,CSS文件的寻址问题

    如果js.css外部文件有使用到相对路径,其相对路径的基准是不一样的 当一个index.html中引入外部的JS和CSS文件时: 在index.css文件中,相对路径的写法是以css文件相对于img图 ...

  4. Web前端学习(4):显示图片、url与文件路径

    本章主旨 介绍<img>标签及其基本属性:介绍URL和文件路径 在上一章中,我简单地介绍了HTML的一些基本标签及基本属性,例如,我们用<p>标签来标记文本段落,用<h1 ...

  5. Web网站配置Gzip,压缩js css文件

    启用apache的gzip 找到httpd.conf,打开文件找到对mod_deflate的注释 #LoadModule deflate_module modules/mod_deflate.so 去 ...

  6. springMVC下jsp引用外部js,css等静态资源的解决方法

    直入主题. 1. web.xml对springMVC配置如下: <servlet> <description>Spring MVC配置</description> ...

  7. asp.net core web项目目录解读

    Connected Services 和传统.net web项目相比,它的功能类似于添加webservice或者wcf service的引用.暂时用不到,有兴趣的小伙伴可以深入了解.右键这个目录可以看 ...

  8. web项目目录结构

    eclipse web项目目录结构 按照 Java EE 规范的规定,一个典型的 Web 应用程序有四个部分: 1.  公开目录 ; 2. WEB-INF/web.xml 文件,发布描述符(必选) ; ...

  9. Linux系统Web网站目录和文件安全权限设置

    查看Linux文件的权限:ls -l 文件名称查看linux文件夹的权限:ls -ld 文件夹名称(所在目录)例如: drwxr-xr-x 2 root root 4096 2009-01-14 17 ...

随机推荐

  1. Scrum立会报告+燃尽图(十一月二十四日总第三十二次):视频剪辑

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...

  2. Scrum立会报告+燃尽图(十一月二十一日总第二十九次):β阶段第二周分配任务

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...

  3. iOS开发 常见错误

    一.NSAppTransportSecurity 错误提示:NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL ...

  4. 【IdentityServer4文档】- 启动和概览

    启动和概览 有两种基本的方式来启动一个新的 IdentityServer 项目: 从空项目开始(从头开始) 从 Visual Studio 的 ASP.NET Identity 模板开始 假如您从头开 ...

  5. POJ2528的另一种解法(线段切割)

    题目:Mayor's posters 原文地址 首先本题题意是:有一面墙,被等分为1QW份,一份的宽度为一个单位宽度.现在往墙上贴N张海报,每张海报的宽度是任意 的,但是必定是单位宽度的整数倍,且&l ...

  6. [2017BUAA软工]第一次博客作业

    一.一些疑问 看书看得比较慢,暂时只思考了以下几个问题,有些自问自答,不知道符合不符合要求…… [1] 第一章中书上提到了这样一个例子: “如果一架民用飞机上有需求,用户使用它的概率是百万分之一,你还 ...

  7. vue-cli脚手架搭建

    我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack.ESLint.babel很多配置等等,省了很多事 Vue+ ...

  8. Javascript中判断变量是数组还是对象(array还是object)

    怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回‘objec'. 此问题的一个可行的答案 ...

  9. android面试(3)---基本问题

    1.值类型,引用类型? 基本数据类型都是值类型:byte,short,int,long,float,double,char,boolean 其他类型都是引用类型. 引用类型在传入方法是,方法内部对引用 ...

  10. [BZOJ3172]单词

    3172: [Tjoi2013]单词 Time Limit: 10 Sec  Memory Limit: 512 MB Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会 ...