前端路径问题总结

news2025/1/13 14:01:12 
1.相对路径
不以/开头
以当前资源的所在路径为出发点去找目标资源
语法:   
./表示当前资源的路径
../表示当前资源的上一层路径
缺点:不同位置,相对路径写法不同

2.绝对路径
以固定的路径作为出发点作为目标资源,和当前资源所在路径没关系
语法:以/开头,不同的项目中,固定的路径的出发点可能不一致,我的浏览器以http://localhost:8080为出发点
缺点:需要补充项目上下文,项目上下文会发生改变

在不同html文件中访问photo.png图片

index.html文件 img路径相对路径写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="static/img/photo.png"/>
</body>

</html>

当前资源的请求路径:http://localhost:8080/demo05_path_war_exploded/index.html

当前资源是:index.html

当前资源的所在路径是:http://localhost:8080/demo05_path_war_exploded/

相对路径的规则就是当前资源的所在路径后拼接目标资源

浏览器向服务器请求http://localhost:8080/demo05_path_war_exploded/static/img/photo.png

 test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../../../static/img/photo.png"/>
</body>
</html>

当前资源的请求路径:http://localhost:8080/demo05_path_war_exploded/a/b/c/test.html

当前资源是:test.htm

当前资源的所在路径是:http://localhost:8080/demo05_path_war_exploded/a/b/c/

相对路径的规则就是当前资源的所在路径后拼接目标资源

浏览器向服务器请求

http://localhost:8080/demo05_path_war_exploded/a/b/c/../../../static/img/photo.png

http://localhost:8080/demo05_path_war_exploded/static/img/photo.png

view.html文件无法直接访问,使用请求转发
View1Servlet

package com.yan.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
@WebServlet("/View1Servlet")
public class View1Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      req.getRequestDispatcher("WEB-INF/views/view.html").forward(req,resp);
       //请求转发
    }
}

view.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../../static/img/photo.png"/>
</body>
</html>

当前资源的请求路径:http://localhost:8080/demo05_path_war_exploded/View1Servlet

当前资源是:View1Servlet

当前资源的所在路径是:http://localhost:8080/demo05_path_war_exploded/

相对路径的规则就是当前资源的所在路径后拼接目标资源

浏览器向服务器请求

http://localhost:8080/demo05_path_war_exploded/../../static/img/photo.png

http://localhost:8080/static/img/photo.png 无法找到图片

正确代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="static/img/photo.png"/>
</body>
</html>

当前资源的请求路径:http://localhost:8080/demo05_path_war_exploded/View1Servlet

当前资源是:View1Servlet

当前资源的所在路径是:http://localhost:8080/demo05_path_war_exploded/

相对路径的规则就是当前资源的所在路径后拼接目标资源

浏览器向服务器请求

http://localhost:8080/demo05_path_war_exploded/static/img/photo.png可以找到图片

绝对路径

绝对路径 以固定的路径作为出发点作为目标资源,和当前资源所在路径没关系 语法:以/开头,不同的项目中,固定的路径的出发点可能不一致,我的浏览器以http://localhost:8080为出发点 缺点:需要补充项目上下文,项目上下文会发生改变

index.html文件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="/demo05_path_war_exploded/static/img/photo.png"/>
</body>

</html>

通过head标签中的base标签可以把所有不加修饰的相对路径加上href定义的公共前缀变为绝对路径

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="/demo05_path_war_exploded/">
</head>

重定向的路径问题

例1: 

Servlet01 

@WebServlet("/Servlet01")
public class Servlet01 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   resp.sendRedirect("Servlet02");//重定向
    }
}

 Servlet02

@WebServlet("/Servlet02")
public class Servlet02 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Servlet02执行了");
    }
}

当前资源的请求路径:http://localhost:8080/demo05_path_war_exploded/Servlet01

当前资源是:Servlet1

当前资源的所在路径是:http://localhost:8080/demo05_path_war_exploded/

重定向使用相对路径写法

  resp.sendRedirect("Servlet02");//重定向

浏览器响应:看Location

浏览器向服务器请求

ttp://localhost:8080/demo05_path_war_exploded/Servlet02

例二:

servlet01

@WebServlet("/x/y/z/Servlet01")
public class Servlet01 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   resp.sendRedirect("../../../Servlet02");
    }
}

servlet02

@WebServlet("/Servlet02")
public class Servlet02 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Servlet02执行了");

当前资源的请求路径:http://localhost:8080/demo05_path_war_exploded/x/y/z/Servlet01

当前资源是:Servlet01

当前资源的所在路径是:http://localhost:8080/demo05_path_war_exploded/

重定向使用相对路径写法

  resp.sendRedirect("../../../Servlet02");//重定向

浏览器响应:看Location

 

浏览器向服务器请求

ttp://localhost:8080/demo05_path_war_exploded/x/y/z/../../../Servlet02

ttp://localhost:8080/demo05_path_war_exploded/Servlet02

总结:相对路径规则和前端相对路径一致

例三:

绝对路径重定向:

Servlet01:

@WebServlet("/x/y/z/Servlet01")
public class Servlet01 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   resp.sendRedirect("/demo05_path_war_exploded/Servlet02");
    }
}

Servlet02: 

@WebServlet("/Servlet02")
public class Servlet02 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Servlet02执行了");
    }
}

 以下代码得到绝对路径更灵活

ServletContext servletContext = req.getServletContext();
String contextPath =servletContext.getContextPath();//返回项目的上下文路径
resp.sendRedirect(contextPath+"/servlet02");

 绝对路径以http://localhost:8080为出发点

浏览器向服务器请求

ttp://localhost:8080/demo05_path_war_exploded/Servlet02

 请求转发的路径问题

 例1:

请求转发的相对路径写法:

Servlet01:

@WebServlet("/Servlet01")
public class Servlet01 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       req.getRequestDispatcher("Servlet02").forward(req,resp);//相对路径写法
    }
}

Servlet02:

@WebServlet("/Servlet02")
public class Servlet02 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Servlet02执行了");
    }
}

例2:

请求转发的绝对路径写法,不需要写上下文

Servlet01

@WebServlet("/Servlet01")
public class Servlet01 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       //绝对路径写法不需要添加项目上下文
        //请求转发的/代表 项目上下文
        req.getRequestDispatcher("/Servlet02").forward(req,resp);

    }
}

 Servlet02

@WebServlet("/Servlet02")
public class Servlet02 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Servlet02执行了");
    }
}

 

 不设置项目上下文

在idea 的编辑配置-部署中将应用程序上下文 改为/

好处:原来/demo05_path_war_exploded/Servlet02的绝对路径写法,现在写为/Servlet02

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1569930.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java零基础入门-java8新特性(完结篇)

Java零基础入门-java8新特性(完结篇)

一、概述 ​上几期&#xff0c;我们是完整的学完了java异常类的学习及实战演示、以及学习了线程进程等基础概念&#xff0c;而这一期&#xff0c;我们要来玩点好的东西&#xff0c;那就是java8&#xff0c;我们都知道java8是自2004年发布java5之后最重要且一次重大的版本更新&a…
阅读更多...
4月4号总结

4月4号总结

java学习 一.接口 1.介绍 定义接口需要使用到关键字interface去定义接口。 格式如下&#xff1a; 类与接口的关系不是继承&#xff0c;而是实现&#xff0c;用关键字 implements &#xff0c;格式如下&#xff1a; 这个类去实现接口&#xff0c;其中的关系就相当于&#xf…
阅读更多...
Hadoop-Yarn

Hadoop-Yarn

一、Yarn资源调度器 思考&#xff1a; 1&#xff09;如何管理集群资源&#xff1f; 2&#xff09;如何给任务合理分配资源&#xff1f; Yarn 是一个资源调度平台&#xff0c;负责为运算程序提供服务器运算资源&#xff0c;相当于一个分布式的操作系统平台。 而 MapReduce …
阅读更多...
『python爬虫』巨量http代理使用 每天白嫖1000ip（保姆级图文）

『python爬虫』巨量http代理使用 每天白嫖1000ip（保姆级图文）

目录 注册 实名得到API链接和账密 Python3requests调用Scpay总结 欢迎关注 『python爬虫』 专栏&#xff0c;持续更新中 欢迎关注 『python爬虫』 专栏&#xff0c;持续更新中 注册 实名 注册巨量http 用户概览中领取1000ip,在动态代理中使用.用来测试一下还是不错的 得到AP…
阅读更多...
可视化大屏 - 项目1

可视化大屏 - 项目1

文章目录 技术栈echarts 可视化需求分析代码实现 技术栈 flexible.js rem 实现不同终端下的响应式布局&#xff0c;根据不同屏幕宽度&#xff0c;自适配布局&#xff1b; html中引入index.js&#xff0c;可以改名为flexible.js&#xff1b;默认划分10份&#xff0c;可以自己修…
阅读更多...
蓝桥杯 --- 日期问题模板

蓝桥杯 --- 日期问题模板

目录 1.如何判断闰年 2.如何遍历当前年份的每一天 3.如果想要输出某一年某一天到某一年某一天之间一共有多少天。 4.精确到具体周几到周几的问题分析 5.如何直接通过一层for循环枚举年月日 习题&#xff1a; 蓝桥杯竞赛特别喜欢考日期问题&#xff0c;今天给大家分享一下…
阅读更多...
Linux云计算之网络基础8——IPV6和常用网络服务

Linux云计算之网络基础8——IPV6和常用网络服务

目录 一、IPV6基础 IPV6详解 IPv6数据报的基本首部 IPv6数据报的扩展首部 IPv6地址的表示方法 IPv6地址分类 网际控制报文协议ICMPv6 二、cisco基于IPV6的配置 cisco基于IPV6的配置步骤 模拟配置 三、HTML基础介绍 文档的结构 动手操作一下 四、常用网络服务介绍…
阅读更多...
基于单片机的测时仪系统设计

基于单片机的测时仪系统设计

**单片机设计介绍&#xff0c;基于单片机的测时仪系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的测时仪系统设计是一个结合了单片机技术与测时技术的综合性项目。该设计的目标是创建一款精度高、稳定性强且…
阅读更多...
软考109-上午题-【计算机网络】-网络设备

软考109-上午题-【计算机网络】-网络设备

一、网络设备 1-1、物理层的互联设备 物理层的设备&#xff1a;中继器、集线器 1、中继器 中继器&#xff0c;可以使得两个链路在物理层上互联。 可以使得信号再生&#xff0c;信号增强。因此&#xff0c;中继器使得接受用户&#xff0c;收到衰减很小的原始信号 2、集线器&a…
阅读更多...
55555555555555

55555555555555

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…
阅读更多...
【二】Django小白三板斧

【二】Django小白三板斧

今日内容 静态文件配置 request对象方法初识 pycharm链接数据库&#xff08;MySQL&#xff09; django链接数据库&#xff08;MySQL&#xff09; Django ORM简介 利用ORM实现数据的增删查改 【一】Django小白三板斧 HttpResponse 返回字符串类型的数据 render 返回HTML文…
阅读更多...
2012年认证杯SPSSPRO杯数学建模D题(第一阶段)人机游戏中的数学模型全过程文档及程序

2012年认证杯SPSSPRO杯数学建模D题(第一阶段)人机游戏中的数学模型全过程文档及程序

2012年认证杯SPSSPRO杯数学建模 减缓热岛效应 D题 人机游戏中的数学模型 原题再现&#xff1a; 计算机游戏在社会和生活中享有特殊地位。游戏设计者主要考虑易学性、趣味性和界面友好性。趣味性是本质吸引力&#xff0c;使玩游戏者百玩不厌。网络游戏一般考虑如何搭建安全可…
阅读更多...
C语言中的结构体：揭秘数据的魔法盒

C语言中的结构体：揭秘数据的魔法盒

前言 在C语言的广阔天地中&#xff0c;结构体无疑是一颗璀璨的明珠。它就像是一个魔法盒&#xff0c;能够容纳各种不同类型的数据&#xff0c;并按我们的意愿进行组合和排列。那么&#xff0c;这个魔法盒究竟有何神奇之处呢&#xff1f;让我们一探究竟。 一、结构体的诞生&…
阅读更多...
C++指针与二维数组

C++指针与二维数组

按行顺序存放所有元素 二维数组与行 a代表二维数组的首地址&#xff0c;也是第0行的首地址&#xff1b; ai代表第i行&#xff08;个&#xff09;元素的地址&#xff0c;即&a[i]; ai或&a[i]表示行地址&#xff0c;每次加1会移动一行&#xff1b; *&#xff08;ai&#…
阅读更多...
STM32CubeMX配置步骤详解五 —— 基础配置（2）

STM32CubeMX配置步骤详解五 —— 基础配置（2）

接前一篇文章&#xff1a;STM32CubeMX配置步骤详解四 —— 基础配置&#xff08;1&#xff09; 本文内容主要参考&#xff1a; STM32CUBEMX配置教程&#xff08;一&#xff09;基础配置-CSDN博客 特此致谢&#xff01; 三、STM32CubeMX基础配置 上一回讲解了STM32CubeMX基础…
阅读更多...
ELA：深度卷积神经网络的高效局部注意力机制

ELA：深度卷积神经网络的高效局部注意力机制

文章目录 摘要1、引言2、相关工作3、方法3.1、重新审视坐标注意力3.1.1、坐标注意力3.1.2、坐标注意力的不足 3.2、高效局部注意力3.3、多个ELA版本设置3.4、可视化3.5、实现 4、实验4.1、实验细节4.2、ImageNet上的图像分类4.3、目标检测4.4、语义分割 5、结论 摘要 https://…
阅读更多...
【打印SQL执行日志】⭐️Mybatis-Plus通过配置在控制台打印执行日志

【打印SQL执行日志】⭐️Mybatis-Plus通过配置在控制台打印执行日志

目录 前言 一、Mybatis-Plus 开启日志的方式 二、测试 三、日志分析 章末 前言 小伙伴们大家好&#xff0c;相信大家平时在处理问题时都有各自的方式&#xff0c;最常用以及最好用的感觉还是断点调试&#xff0c;但是涉及到操作数据库的执行时&#xff0c;默认的话在控制台…
阅读更多...
Linux基础篇：Linux网络yum源——以配置阿里云yum源为例

Linux基础篇：Linux网络yum源——以配置阿里云yum源为例

Linux网络yum源——以阿里云为例 一、网络yum源介绍 Linux中的YUM&#xff08;Yellowdog Updater, Modified&#xff09;源是一个软件包管理器&#xff0c;它可以自动处理依赖关系并安装、更新、卸载软件包。YUM源是一个包含软件包的远程仓库&#xff0c;它可以让用户轻松地安…
阅读更多...
实验一 Windows 2008虚拟机安装、安装VM Tools、快照和链接克隆、添加硬盘修改格式为GPT

实验一 Windows 2008虚拟机安装、安装VM Tools、快照和链接克隆、添加硬盘修改格式为GPT

一、安装vmware workstation软件 VMware workstation的安装介质&#xff0c;获取路径&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1AUAw_--yjZAUPbsR7StOJQ 提取码&#xff1a;umz1 所在目录&#xff1a;\vmware\VMware workstation 15.1.0 1.找到百度网盘中vmwa…
阅读更多...
x86汇编写矩阵乘法问题（实现一个3×3矩阵乘法的汇编代码）

x86汇编写矩阵乘法问题（实现一个3×3矩阵乘法的汇编代码）

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023