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

前端路径问题总结

news 2025/12/16 16:50:18 
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

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2025/12/13 22:37:00

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/12/10 5:35:21

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2025/12/15 3:12:27

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/12/9 3:17:09

深入浅出WebGL：在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...

编程新知 2025/10/31 9:08:31

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2025/12/14 4:08:47

echarts使用graphic强行给图增加一个边框（边框根据自己的图形大小设置）- 适用于无法使用dom的样式

pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图&#xff0c;如果边框加在dom上面&#xff0c;pdf-lib导出svg的时候并不会导出边框&#xff0c;所以只能在echarts图上面加边框 grid的边框是在图里…...

编程新知 2025/12/14 6:06:56

大模型——基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网：https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘，大小大概2.9G，做这行最忌讳的就是安装软件全装C盘，所以我调整了下安装路径。 新建安装目录：E:\MyS…...

编程新知 2025/12/14 22:19:44