大家好呀,我是小笙,我和大家分享下我学习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");