前端路径问题总结

2024-04-05 13:56:04
开发
13

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

原文地址:https://blog.csdn.net/2301_76352996/article/details/137245846 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1776126635934879744.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

前端路径问题总结

例1:

例二:

例三:

相关推荐

最近更新

热门阅读