index.jsp中用到的css和js文件路径按什么规则来写?

index.jsp中用到的css和js文件路径按什么规则来写?

本例中index.jsp中用到的css和js文件路径按什么规则来写?请老师明确一下,谢谢!

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好。以“../”开头是相对于当前请求的路径返回上一级。以“/”开头是相对于web根目录的。

路径分三种:分为相对路径、根路径和绝对路径。以当前目录组织为例:

http://img1.sycdn.imooc.com//climg/5ddb39e409072f2102960199.jpg

1、相对路径

1)原本请求路径的同级目录开始构建的,相对路径以"./"开头,但"./"可省略

例如 

要访问的test1.html和test2.html在同级目录下,在test1中访问test2有两种写法"./test2.html" 或"test2.html"

index.jsp和css文件夹也是同级目录,也就是直接在web根目录下的。如果要index.jsp中要引入css,那么使用“css/test.css”即可

2)"../" 表示上一级目录开始,比如同学的css和pages都直接在web根目录下。test1页面地址是“localhost:8080/上下文目录/pages/test1.html”,这时如果需要请求到css文件夹下的test.css,就需要使用 "../css/test.css" 生成一个“localhost:8080/上下文目录/css/test.css”的请求。“../”相当于跳过了“/page”这一层。


2、根路径

特征是最前面加/,代表相对于当前 WEB 根目录的路径。

同学可以直接使用“/css/test.css”找到在根目录下的css文件夹下的文件,同理,访问test1.html使用“/page/test1.html”


3、绝对路径

就是将“http://localhost:8080/” 也带上的全路径,和浏览器访问的时候使用的路径相同。绝对路径不用考虑当前页面在哪个路径。

在二阶段中我们常通过如下方式拼出绝对路径:

String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"

request.getScheme()获取的是协议名,也就是"http"。request.getServerName()获取的是当前主机名,也就是localhost,值可能是"127.0.0.1"。request.getServerPort()获取的是端口号,Tomcat的默认端口号为"8080"。request.getContextPath()获取的是上下文路径。

basePath相当于定位到了Web根目录,所以在根目录下的CSS文件,写在JSP中就是"<%=basePath%>/css/test.css"呢~


除此以外还要注意CSS、JS等静态文件不能放在WEB-INF下,因为WEB-INF下内容只能通过Servlet访问。


如果解答了同学的疑问,望采纳~

祝学习愉快~


  • 慕沐8221787 提问者 #1
    好的,谢谢老师!解释得很详细。
    2019-11-25 11:21:34
芝芝兰兰 2019-11-24 18:24:46

同学你好。路径的解析者是浏览器。引入静态资源本身也是一个请求。相对路径是相对于当前页面的地址栏显示路径的。浏览器会将相对路径先拼接好后,再将请求发送给浏览器。

1、由于index.jsp直接在webapp下,所以是以“localhost:8080/index.jsp”地址访问的,当然由于index.jsp是web.xml中配置过的欢迎页面。所以直接使用“localhost:8080/”也可以访问到。

http://img1.sycdn.imooc.com//climg/5dda581a094b743d07430194.jpg


2、由于我们的Application Context是“/”,所以“localhost:8080/”对应的是webapp这个文件夹。

http://img1.sycdn.imooc.com//climg/5ddb37cf098afa9510490687.jpg


3、href=“lib/bootstrap-3.3.7-dist/css/bootstrap.min.css”解析后得到的应该是“localhost:8080/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css”服务器拿到它就会去webapp下寻找lib目录。进而寻找后面的bootstrap-3.3.7-dist/css/bootstrap.min.css文件

http://img1.sycdn.imooc.com//climg/5dda584a09d7473910800368.jpg


如果解答了同学的疑问,望采纳~

祝学习愉快~

  • 提问者 慕沐8221787 #1
    我还是没弄清楚页面文件对于其引用到的css文件、js文件,应该基于何种规则去写路径。就本例来说,如果lib文件夹不在webapp文件夹下,或者index.jsp文件不在webapp文件夹下,这个路径该如何写?
    2019-11-24 19:19:13
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
Java数据库开发与实战应用2018版
  • 参与学习           人
  • 提交作业       277    份
  • 解答问题       4297    个

Java数据库开发的必备技能,从流行的MySQL数据库开始,到Java原生的数据库管理接口JDBC的使用,再到常用的数据持久化框架MyBatis,让你向Java工程师的目标又迈进了一步!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师