在 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. OpenCV学习笔记——imread、imwrite以及imshow

    1.imread Loads an image from a file. 从文件中读取图像. C++: Mat imread(const string& filename, int flags ...

  2. inux下mysql的root密码忘记解决方法

    1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也可以任意地登录 ...

  3. HDU 2156 分数矩阵

    http://acm.hdu.edu.cn/showproblem.php?pid=2156 Problem Description 我们定义如下矩阵:1/1 1/2 1/31/2 1/1 1/21/ ...

  4. php奇葩错误:htmlspecialchars处理中文丢失

    $value = "中文中文"; $res = htmlspecialchars($value); 经过这个函数处理之后,$res就直接变成了空的字符串. 奇葩错误啊!后来发现要这 ...

  5. vue & $data & data

    vue & $data & data vm.a === vm.$data.a https://vuejs.org/v2/api/#data https://flaviocopes.co ...

  6. jmeter 安装tps插件

    1.下载  jpgc-graphs-basic-2.0.zip 2.解压并将lib 目录下的 jmeter-plugins-cmn-jmeter-0.4.jar 拷贝到 %JMeter%/lib 目录 ...

  7. 第192天:js---Date对象属性和方法总结

    Date对象构造函数重载方法 一.第一种重载方法---基本 当前时间 //构造函数 - 第一种重载方法:基本 当前时间 console.log('构造函数 - 第一种重载方法:基本 当前时间') da ...

  8. asp.net 中使用 pagedlist 分页并具有查询功能的实现方法

    用pagedlist在项目中做分页已N次了,今天再次用实例来实现一个带查询功能的分页例子. 1.在view代码: @using PagedList.Mvc@model BGZS.Models.User ...

  9. bzoj4770 图样

    题意 n个点的完全图,每个点的点权是在m位的二进制数中随机选取的.每条边的边权是两个点的点权的异或值. 问最小生成树的边权和的期望.模一个质数输出. 分析 考试的时候写这个题,然后期望得分100-&g ...

  10. 【bzoj5157】[Tjoi2014]上升子序列 树状数组

    题目描述 求一个数列本质不同的至少含有两个元素的上升子序列数目模10^9+7的结果. 题解 树状数组 傻逼题,离散化后直接使用树状数组统计即可.由于要求本质不同,因此一个数要减去它前一次出现时的贡献( ...