当前位置： 首页 > news >正文

前端路径问题总结

news 文章来源：https://blog.csdn.net/2301_76352996/article/details/137245846 2024/10/31 23:25:26 
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 {@Overrideprotected 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 {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.sendRedirect("Servlet02");//重定向}
}

 Servlet02

@WebServlet("/Servlet02")
public class Servlet02 extends HttpServlet {@Overrideprotected 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 {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.sendRedirect("../../../Servlet02");}
}

servlet02

@WebServlet("/Servlet02")
public class Servlet02 extends HttpServlet {@Overrideprotected 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 {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.sendRedirect("/demo05_path_war_exploded/Servlet02");}
}

Servlet02: 

@WebServlet("/Servlet02")
public class Servlet02 extends HttpServlet {@Overrideprotected 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 {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.getRequestDispatcher("Servlet02").forward(req,resp);//相对路径写法}
}

Servlet02:

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

例2:

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

Servlet01

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

 Servlet02

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

 

 不设置项目上下文

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

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

相关文章：

前端路径问题总结

1.相对路径 不以/开头 以当前资源的所在路径为出发点去找目标资源 语法: ./表示当前资源的路径 ../表示当前资源的上一层路径 缺点:不同位置,相对路径写法不同2.绝对路径 以固定的路径作为出发点作为目标资源,和当前资源所在路径没关系 语法:以/开头,不同的项目中,固定的路径…...

编程日记 2024/4/5 0:37:02

YOLOv8改进 | 低照度检测 | 2024最新改进CPA-Enhancer链式思考网络（适用低照度、图像去雾、雨天、雪天）

一、本文介绍 本文给大家带来的2024.3月份最新改进机制，由CPA-Enhancer: Chain-of-Thought Prompted Adaptive Enhancer for Object Detection under Unknown Degradations论文提出的CPA-Enhancer链式思考网络，CPA-Enhancer通过引入链式思考提示机制，实现了对未知退化条件下…...

编程日记 2024/4/5 0:36:01

python的pip如何升级

升级pip的方法如下&#xff1a; 打开命令行工具。在Windows系统中&#xff0c;可以通过按下WinR键&#xff0c;然后输入"cmd"来打开命令提示符&#xff1b;在Mac或Linux系统中&#xff0c;可以直接打开终端。检查当前pip版本。在终端或命令行中输入以下命令&#…...

编程日记 2024/4/5 0:34:59

Collection与数据结构 Stack与Queue(一): 栈与Stack

1. 栈 1.1 概念 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&…...

编程日记 2024/4/5 0:32:57

内部类（来自类和对象的补充）

❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; hellohello~&#xff0c;大家好&#x1f495;&#x1f495;&#xff0c;这里是E绵绵呀✋✋ &#xff0c;如果觉得这篇文章还不错的话还请点赞❤️❤️收藏&#x1f49e; &#x1f49e; 关注&#x1f4a5;&a…...

编程日记 2024/4/5 0:28:53

Android 高德地图

1.获取Key 进入高德开放平台控制台&#xff0c;创建一个新应用。在创建的应用上点击"添加key"按钮&#xff0c;在弹出的对话框中&#xff0c;依次输入key名称&#xff0c;选择服务平台为“Android平台”&#xff0c;输入发布版安全码 SHA1、以及 Package。 获取 S…...

编程日记 2024/4/5 0:27:52

代码随想录｜Day31｜贪心06｜738.单调递增的数字

738.单调递增的数字 思路&#xff1a; 1. 从右向左遍历 从字符串的最后一位向前遍历&#xff0c;即从低位到高位进行检查。这是因为当我们修改某一位数字时&#xff0c;可能会影响到更低位的数字。 2. 检查并修改数字 在遍历过程中&#xff0c;如果发现当前位数字小于其前一位&…...

编程日记 2024/4/5 0:26:51

机械制造学习笔记

一、切削加工、切削运动的基本概念及刀具切削过程 切削加工&#xff1a; 定义&#xff1a;切削加工是利用切削刀具对工件进行切削&#xff0c;以去除多余材料并得到所需形状和尺寸的加工方法之一。应用&#xff1a;广泛应用于金属加工、木材加工、塑料加工等领域&#xff0c;是…...

编程日记 2024/4/5 0:23:47

Golang | Leetcode Golang题解之第3题无重复字符的最长子串

题目&#xff1a; 题解&#xff1a; func lengthOfLongestSubstring(s string) int {// 哈希集合&#xff0c;记录每个字符是否出现过m : map[byte]int{}n : len(s)// 右指针&#xff0c;初始值为 -1&#xff0c;相当于我们在字符串的左边界的左侧&#xff0c;还没有开始移动r…...

编程日记 2024/4/5 0:22:46

SWM341系列应用（上位机应用）

SWM341系列之上位机应用 1、分级图像和PNG、JPG的应用 现象&#xff1a;客户使用SWM34SVET6HMI_0.4.1版本上位机进行UI界面布局&#xff0c;反馈在模拟运行时&#xff08;PC端&#xff09;流畅&#xff0c;在Demo平台&#xff08;设备端&#xff09;运行卡顿。 分析及解决&…...

编程日记 2024/4/5 0:20:43

【软件工程】详细设计（一）

1. 引言 1.1 编写目的 该文档的目的是描述《学生成绩管理系统》项目的详细设计&#xff0c;其主要内容包括&#xff1a; 系统功能简介 系统详细设计简述 各个模块的实现逻辑 最小模块组件的伪代码 本文档的预期的读者是&#xff1a; 开发人员 项目管理人员 测试人员 …...

编程日记 2024/4/5 0:17:40

【AIGC】如何在Windows/Linux上部署stable diffusion

文章目录 整体安装步骤windows10安装stable diffusion环境要求安装步骤注意事项参考博客其他事项安装显卡驱动安装cuda卸载cuda安装对应版本pytorch安装git上的python包Q&A linux安装stable diffusion安装anaconda安装cudagit 加速配置虚拟环境挂载oss&#xff08;optional…...

编程日记 2024/4/5 0:16:39

基于java实现的弹幕视频网站

开发语言&#xff1a;Java 框架&#xff1a;ssm 技术&#xff1a;JSP JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclip…...

编程日记 2024/4/5 0:12:36

【大数据存储】实验4 NoSQL数据库

实验4 NoSQL数据库 NoSQL数据库的安装和使用实验环境&#xff1a; Ubuntu 22.04.3 Jdk 1.8.0_341 Hadoop 3.2.3 Hbase 2.4.17 Redis 6.0.6 mongdb 6.0.12 mogosh 2.1.0 Redis 安装redis完成 新建终端启动redisredis-server新建一个终端redis-cli 建表操作 尝…...

编程日记 2024/4/5 0:10:34

从零学算法80

80. 删除有序数组中的重复项 II 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外…...

编程日记 2024/4/5 0:08:33

Jupyter notebook文件默认存储路径以及更改方法

初次使用Jupyter Notebook&#xff0c;确实好用啊&#xff01;但安装Anaconda后&#xff0c;打开Jupyter Notebook 的时候&#xff0c;新建文件的默认存储路径一般在C系统盘下面的XXX目录&#xff0c;那么路径是什么呢&#xff1f;我想把文件保存到其他的文件夹下应该怎么做呢&…...

编程日记 2024/4/5 0:07:32

WPF中通过自定义Panel实现控件拖动

背景 看到趋时软件的公众号文章&#xff08;WPF自定义Panel&#xff1a;让拖拽变得更简单&#xff09;&#xff0c;发现可以不通过Drag的方法来实现ListBox控件的拖动&#xff0c;而是通过对控件的坐标相加减去实现控件的位移等判断&#xff0c;因此根据文章里面的代码,边理解边…...

编程日记 2024/4/5 0:05:29

Centos7安装Docker与Docker-compose【图文教程】

个人记录 查看一下系统是否已经安装了Docker yum list installed | grep docker如下图代表没有安装Docker 卸载已有Docker yum remove docker docker-common docker-selinux docker-engine切换目录 cd /etc/yum.repos.d/查看当前目录所有的镜像源 ll安装yum-util与devi…...

编程日记 2024/4/5 0:01:23

mac电脑maven配置环境变量

1、下载maven https://maven.apache.org 2、配置环境变量 vim .bash_profile JAVA_HOME/Library/Java/JavaVirtualMachines/jdk-1.8.jdk/Contents/Home PATH$JAVA_HOME/bin:$PATH export JAVA_HOME export PATH#maven export MAVEN_HOME/Users/haines/desktop/work/java/a…...

编程日记 2024/4/4 23:59:22

后端返还二进制excl表格数据时候，如何实现在前端下载表格功能及出现表格打开失败的异常处理。

背景&#xff1a; 后端返还一个二进制流的excl表格数据&#xff0c;前端需要对其解析&#xff0c;然后可提供给客户进行下载。 思路&#xff1a;把二进制流数据转换给blob对象&#xff0c;然后利用a标签进行前端下载。 代码&#xff1a; 后端返还 类似如下的数据 前端代码…...

编程日记 2024/4/4 23:58:20

搞学术研究好用免费的学术版ChatGPT网站-学术AI

学术版ChatGPThttps://chat.uaskgpt.com/mobile/?user_sn88&channelcsdn&scenelogin 推荐一个非常适合中国本科硕士博士等学生老师使用的学术版ChatGPT&#xff0c; 对接了超大型学术模型&#xff0c;利用AI技术实现学术润色、中英文翻译&#xff0c;学术纠错&#…...

编程日记 2024/4/4 23:57:18

vue3从精通到入门9：计算属性computed

在 Vue 3 中&#xff0c;computed 是一个用于创建计算属性的工具&#xff0c;它基于组件的响应式依赖进行复杂的计算&#xff0c;并返回一个新的响应式引用。计算属性是 Vue 的一个核心概念&#xff0c;它提供了一种声明式的方式来执行基于其依赖的响应式数据的计算。 compute…...

编程日记 2024/4/4 23:53:15

kafka面试常见问题

1、如何判断kafka某个主题消息堆积&#xff1f; 要判断Kafka中某个主题的消息是否堆积&#xff0c;可以通过查看该主题的生产者和消费者的偏移量&#xff08;offset&#xff09;差异来实现。Kafka中的每条消息在主题的分区内都有一个唯一的偏移量&#xff0c;生产者每发送一条…...

编程日记 2024/4/4 23:51:14

深入解析Hadoop生态核心组件：HDFS、MapReduce和YARN

这里写目录标题 01HDFS02Yarn03Hive04HBase1&#xff0e;特点2&#xff0e;存储 05Spark及Spark Streaming关于作者&#xff1a;推荐理由&#xff1a;作者直播推荐&#xff1a; 一篇讲明白 Hadoop 生态的三大部件 进入大数据阶段就意味着进入NoSQL阶段&#xff0c;更多的是面向…...

编程日记 2024/4/4 23:47:10

【chatGPT】我：在Cadence Genus软件中，出现如下问题：......【1】

我 在Cadence Genus中&#xff0c;出现如下问题&#xff1a;Error&#xff1a;A command argument did not match any of the acceptable command option. [TUI-170] [set_db] :‘/’ is not a legal option for the command. 该如何解决 ChatGPT Cadence Genus的错误消息 “…...

编程日记 2024/4/4 23:45:09

面试题：JVM 调优

一、JVM 参数设置 1. tomcat 的设置 vm 参数 修改 TOMCAT_HOME/bin/catalina.sh 文件&#xff0c;如下图 JAVA_OPTS"-Xms512m -Xmx1024m" 2. springboot 项目 jar 文件启动 通常在linux系统下直接加参数启动springboot项目 nohup java -Xms512m -Xmx1024m -jar…...

编程日记 2024/4/4 23:44:08

PS从入门到精通视频各类教程整理全集，包含素材、作业等（8）

PS从入门到精通视频各类教程整理全集&#xff0c;包含素材、作业等 最新PS以及插件合集&#xff0c;可在我以往文章中找到 由于阿里云盘有分享次受限制和文件大小限制&#xff0c;今天先分享到这里&#xff0c;后续持续更新 B站-PS异闻录&#xff1a;萌新系统入门课课程视频 …...

编程日记 2024/4/4 23:42:06

VSCode安装及Python、Jupyter插件安装使用

VSCode 介绍 Visual Studio Code&#xff08;简称VSCode&#xff09;是一个由微软开发的免费、开源的代码编辑器。VSCode是一个轻量级但是非常强大的代码编辑器&#xff0c;它支持多种编程语言&#xff08;如C,C#&#xff0c;Java&#xff0c;Python&#xff0c;PHP&#xff0…...

编程日记 2024/4/4 23:40:04

JMeter+Grafana+influxdb 配置出现transaction无数据情况解决办法

JMeterGrafanainfluxdb 配置出现transaction无数据情况解决办法 一、问题描述二、解决方法 一、问题描述 如下图所示出现application有数据但是transaction无数据情况 二、解决方法 需要做如下设置 打开变量设置如下图打开两个选项 然后再进行后端监听器的设置 如下图所…...

编程日记 2024/4/4 23:38:03

Acrobat Pro DC 2023 for Mac PDF编辑管理软件

Acrobat Pro DC 2023 for Mac是一款功能强大的PDF编辑和管理软件&#xff0c;旨在帮助用户轻松处理PDF文件。它提供了丰富的工具和功能&#xff0c;使用户可以创建、编辑、转换和注释PDF文件&#xff0c;以及填写和签署PDF表单。 软件下载&#xff1a;Acrobat Pro DC 2023 for …...

编程日记 2024/4/4 23:33:59

把wordpress集成进/赣州seo优化

《程序设计与数据结构》第10周学习总结 教材学习内容总结 图中的树问题图中的最短路径问题活动顶点与活动边的问题教材学习中的问题和解决过程 问题1&#xff1a;最短路径算法中的Path列表值不理解问题1解决方案&#xff1a;结对伙伴刘伟康同学为我的解答&#xff1a;各顶点对间…...

编程日记 2024/10/31 22:53:44

长春网站建设加王道下拉/推广关键词优化公司

https://www.cnblogs.com/kumata/p/13304292.html...

编程日记 2024/10/31 22:15:18

四川网站建设 湖南岚鸿/社交媒体营销

2019独角兽企业重金招聘Python工程师标准>>> 为了消除linux环境下大小写敏感问题&#xff0c;设置如下&#xff1a; service mysqld stop vi /etc/my.cnf 在[mysqld]中添加&#xff1a; lower_case_table_names 1; service mysqld restart; 转载于:https://my.osch…...

编程日记 2024/10/31 16:11:38

上海网站制作电话/软文广告经典案例

PyTorch 自定义序列数据集 flyfish 实现 主要是DataLoader, TensorDataset。 数据集代码与模型训练代码解耦&#xff0c;以获得更好的可读性和模块化。PyTorch提供了两个数据原语&#xff1a;torch.utils.data.DataLoader和torch.utils.data.Dataset&#xff0c; 允许使用预…...

编程日记 2024/10/31 15:38:19

张北网站建设公司/国内seo公司哪家最好

为什么80%的码农都做不了架构师&#xff1f;>>> jQuery插件PrintArea可实现打印页面某区域功能。 使用说明 需要使用jQuery库文件和PrintArea库文件 使用方法 一&#xff0c;包含文件部分 <script type"text/javascript" src"jquery.js&quo…...

编程日记 2024/10/31 11:56:17

网站重新搭建程序要多少钱/电商网站大全

1、使用not in&#xff0c;容易理解&#xff0c;效率低 select distinct A.ID from A where A.ID not in (select ID from B) 2、使用left join...on... &#xff0c;B.ID isnull表示左连接之后在B.ID字段为null的记录 select A.ID from A left join B on A.IDB.ID where B.ID …...

编程日记 2024/10/31 8:04:03