Web路径专题

Posted 2022-05-18 Al_tair

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web路径专题相关的知识，希望对你有一定的参考价值。

Web路径专题

Web路径专题

大家好呀，我是小笙，我和大家分享下我学习Javaweb的笔记

Web路径专题

工程路径问题

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>base 标签</title></head>
    <body>
        <h1>注册用户~</h1>
        <!-- http://localhost:10000/hspedu_servlet/ok 复杂 -->
        <form action="http://localhost:10000/hspedu_servlet/ok" method="post"> 
            u: <input type="text" name="username"/><br><br>
            <input type="submit" value="注册用户"/>
        </form>
        
        <h1>讨论区</h1>
        <form action="http://localhost:10000/hspedu_servlet/ok" method="post"> 
            讨论内容: <textarea cols="50" rows="5"></textarea><br><br>
            <input type="submit" value="发布讨论"/>
        </form>
        
        <h1>回复区</h1>
        <form action="http://localhost:10000/hspedu_servlet/ok" method="post"> 
            回复内容: <textarea cols="50" rows="5"></textarea><br><br>
            <input type="submit" value="回复"/>
        </form>
    </body>
</html>

解决方案：相对路径

使用相对路径来解决，一个非常重要的规则：页面所有的相对路径，在默认情况下，都会参考当前浏览器地址栏的路径 http://ip:port/web工程名/ + 资源来进行跳转

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>base 标签</title></head>
    <body>
        <h1>注册用户~</h1>
        <!-- 相对路径可以写成 ok -->
        <!-- http://localhost:10000/hspedu_servlet/ + ok-->
        <form action="ok" method="post"> 
            u: <input type="text" name="username"/><br><br>
            <input type="submit" value="注册用户"/>
        </form>
        
        <h1>讨论区</h1>
        <form action="ok" method="post"> 
            讨论内容: <textarea cols="50" rows="5"></textarea><br><br>
            <input type="submit" value="发布讨论"/>
        </form>
        
        <h1>回复区</h1>
        <form action="ok" method="post"> 
            回复内容: <textarea cols="50" rows="5"></textarea><br><br>
            <input type="submit" value="回复"/>
        </form>
    </body>
</html>

但是相对路径会存在其他问题

如果从当前路径去寻找其他路径的资源，可能会出现更加复杂的路径情况，如图

解决方案：base 标签

基本介绍

base 标签是 HTML 语言中的基准网址标记，它是一个单标签，位于网页头部文件的 head 标签内
一个页面最多只能使用一个 base 元素，用来提供一个指定的默认目标，是一种表达路径和连接网址的标记
常见的 url 路径形式分别有相对路径与绝对路径，如果 base 标签指定了目标，浏览器将通过这个目标来解析当前文档中的所有相对路径，包括的标签有（a、img、link、form），也就是说，浏览器解析时会在路径前加上 base 给的目标，而页面中的相对路径也都转换成了绝对路径
base 标签就应带上 href 属性和 target 属性

实例代码

<!-- 相对路径 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>a.html</title>
        <link rel="stylesheet" type="text/css" href="../../dir1/dir2/dir3/my.css">
    </head>
    <body>
        <h1>这是 a.html</h1>
        <a href="../../dir1/dir2/dir3/b.html">跳转到dir1/dir2/dir3/b.html</a>
        <br/><br/>
    </body>
</html>

<!-- 使用base标签 -->
<!-- my.css -->
h1
    color: blue;


<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>a.html</title>
        <!--
            / 在浏览器中解析就是 http://localhost:9999/
            / 在请求转发（web服务里）解析就是 http://localhost:9999/webPath/
            href="/webPath/" 在浏览器解析就是 http://localhost:9999/webPath/
        -->
        <base href="/webPath/">
        <link rel="stylesheet" type="text/css" href="dir1/dir2/dir3/my.css">
    </head>
    <body>
        <h1>这是 a.html</h1>
        <!-- 注意前面不能加/，否则解析成 http://localhost:9999/替换base路径 -->
        <a href="dir1/dir2/dir3/b.html">跳转到dir1/dir2/dir3/b.html</a>
        <br/><br/>
    </body>
</html>

<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a.html</title>
    <base href="/webPath/">
</head>
<body><h1>这是 b.html</h1>
<a href="d1/d2/a.html">跳转到d1/d2/a.html</a>
<br/><br/>
</body>
</html>

工程路径总结

假设 http://localhost:9999/webPath/dir1/a.html 提交表单给 http://localhost:9999/webPath/dir2/b.html

如果使用了base标签
- 如果使用了 / 开头，将解析成http://localhost:9999/ （base标签起不到作用）
- 如果未使用 / 开头，则默认以base标签路径为起点
如果没有使用了base标签
- 如果使用了 / 开头，将解析成http://localhost:9999/ （base标签起不到作用）
- 如果未使用 / 开头，则默认以自身路径为起点（相对路径）

请求转发 http://localhost:9999/webPath/servlet 转发到 http://localhost:9999/webPath/dir2/b.html

// 以下两者方式相同：在同目录/webPath/下进行查找dir2/b.html资源
request.getRequestDispatcher("dir2/b.html").forward(request,response);
request.getRequestDispatcher("/dir2/b.html").forward(request,response);
// 注意点
// a.html -> servlet资源转发给 -> b.html
// 如果b.html要跳转回a.html的时候尽量不要使用相对路径（因为请求转发的相对路径是相对Servlet资源来说的）

请求重定向 http://localhost:9999/webPath/servlet 转发到 http://localhost:9999/webPath/dir2/b.html

// 方式一 动态获取工程目录（推荐）
String contextPath = getServletContext().getContextPath(); //  /webPath
response.sendRedirect(contextPath + "/dir2/b.html");  
// 方式二：/ 浏览器解析：http://localhost:9999/
response.sendRedirect("/webPath/dir2/b.html");
// 方式三 使用相对路径(不推荐)
request.sendRedirect("dir2/b.html");
// 方式四 全路径
request.sendRedirect("http://localhost:9999/webPath/dir2/b.html");

以上是关于Web路径专题的主要内容，如果未能解决你的问题，请参考以下文章

Linux并发与同步专题

「mysql优化专题」90%程序员都会忽略的增删改优化

分布式技术专题「系统服务优化系列」Web应用服务的性能指标优化开发指南（基础篇）

IDEA Tomcat专题

idea中web-inf下没有spring-mvc.xml