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

前端路径问题总结

news 2026/1/5 13:13:23

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的方法如下： 打开命令行工具。在Windows系统中，可以通过按下WinR键，然后输入"cmd"来打开命令提示符；在Mac或Linux系统中，可以直接打开终端。检查当前pip版本。在终端或命令行中输入以下命令&#…...

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

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

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

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

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

❤️❤️前言~🥳🎉🎉🎉 hellohello~，大家好💕💕，这里是E绵绵呀✋✋ ，如果觉得这篇文章还不错的话还请点赞❤️❤️收藏💞 💞 关注💥&a…...

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

Android 高德地图

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

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

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

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

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

机械制造学习笔记

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

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

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

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

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

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

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

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

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

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

编程日记 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（optional…...

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

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

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

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

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

实验4 NoSQL数据库 NoSQL数据库的安装和使用实验环境： 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 ，请你原地删除重复出现的元素，使得出现次数超过两次的元素只出现两次 ，返回删除后数组的新长度。不要使用额外的数组空间，你必须在原地修改输入数组并在使用 O(1) 额外…...

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

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

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

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

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

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

编程日记 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表格数据时候，如何实现在前端下载表格功能及出现表格打开失败的异常处理。

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

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

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录一、问题背景与挑战二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/1/4 5:05:13

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/1/2 11:07:12

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2026/1/5 3:55:28

【Linux】C语言执行shell指令

在C语言中执行Shell指令在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/12/21 15:18:36

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录问题现象问题原因解决办法问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。问题原因很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...

编程新知 2026/1/5 11:17:39

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录一、目的二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结一、目的当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2026/1/3 5:43:33

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

排序算法总结（C++）

目录一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序三、总结一、稳定性排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。稳定性对基础类型对象…...

编程新知 2026/1/3 18:25:56

例1:

例二:

例三:

相关文章：