【JavaEE】base标签解决页面请求相对路径的问题

最新推荐文章于 2024-08-14 17:45:15 发布

心之所及，皆是欢笑

最新推荐文章于 2024-08-14 17:45:15 发布

阅读量2.5k

点赞数 1

分类专栏： Java基础文章标签： base标签相对路径

本文链接：https://blog.csdn.net/u013087359/article/details/106301388

版权

Java基础专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1. base标签

1.1 相对路径

通常情况下，页面内所有使用相对路径的静态资源和发出的请求都是以当前页面的URL目录为参考基准的

1.2 问题

struts框架转发到视图页时URL是action的请求路径，并不是实际的jsp路径,jsp页面内使用了相对路径的资源就有可能会找不到

1.3 使用绝对路径解决

页面一切静态资源和发出的请求路径都用绝对路径
改造量太大，而且容易遗漏，即使漏了当前环境还不一定能测出来，带来隐患

1.4 使用base标签固定参考基准

base标签作用就是自定义参考标准的URL目录,不再跟当前URL有关，对页面内所有使用了相对路径的静态资源路径和请求路径都有效
a标签丶form标签丶script标签丶link标签丶img标签中的路径都有效
内部和外部引入的js代码中使用了相对路径也有效
内部css代码中使用相对路径有效；css外部样式代码中无效,相对路径只能相对于css文件本身

1.5 使用网站完整URL作为参考基准

base标签的值必须是网站的完整URL（协议+域名或ip+端口+网站名称）
${pageContext.request.contextPath }获取的只有网站名,在本地测试没问题，部署到服务器会出错

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<%
	String path = request.getContextPath();
	//basePath值为 http://localhost:8080/bookshop/
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<!-- 在head标签中添加base标签 -->
	<!-- 使用网站的完整URL作为相对路径的参考基准 -->
	<base href="<%=basePath%>"> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jsp页面</title>
</head>
<body>
</body>
</html>

2. base标签测试

2.1 目录结构

在这里插入图片描述

2.2 各文件测试代码

struts.xml
- 配置两个不同目录的Action

<!-- 两个不同命名空间的action -->
<!-- 两个action都跳转到test.jsp页面 -->

<!-- 第一次会先访问book/test/book_test.action，然后转发到视图test.jsp,网址依然显示的是test.action -->
<!-- 命名空间二层目录 -->
<package name="book" extends="struts-default" namespace="/book/test">		
	<action name="book_*" class="bookAction" method="{1}">	
		<!-- base标签测试页面 -->		
		<result name="success">/web/jsp/test.jsp</result>
	</action>
</package>

<!-- 点击 test.jsp 4个按钮或链接都会跳进这里 -->
<!-- 命名空间一层目录 -->
<package name="category" extends="struts-default" namespace="/category">		
	<action name="category_*" class="categoryAction" method="{1}">
<!-- 这里跳回去测试页面只是为了可以一个一个地点那4个按钮,非必要的配置 -->			
		<result name="success">/web/jsp/test.jsp</result>
	</action>
</package>

BookAction.java
- 处理直接在浏览器网址栏输出的请求，对该请求转发到测试页，转发视图页导致的结果就是浏览器网址与测试页面实际的路径不一致

public class BookAction extends ActionSupport{	
	public String test(){
		System.out.println("book_test访问成功");
		return SUCCESS;
	}
}

CategoryAction.java
- 处理测试页面的4个按钮的请求

public class CategoryAction extends ActionSupport {
	public String test1(){
		System.out.println("category_test1访问成功");
		return SUCCESS;
	}
	
	public String test2(){
		System.out.println("category_test2访问成功");
		return SUCCESS;
	}
	
	public String test3(){
		System.out.println("category_test3访问成功");
		return SUCCESS;
	}
	
	public String test4(){
		System.out.println("category_test4访问成功");
		return SUCCESS;
	}
}

自定义的外部test2.js

function f2(){
	//base标签对外部引入的js中使用的相对路径依然有用
	alert("我是category_test2");
	location.href="category/category_test2.action";
}

自定义外部test.css

body{
	/* base标签对外部引入的css文件中使用的相对路径无效 */
	/* 外部样式中使用的相对路径必须是跟对css文件自身 */
	
	/* css/index/test/test.css查找images/1.png */
	background:red url("../../../images/1.png") no-repeat top;
	/* 无论背景图片对不对，测试页面背景颜色都会变红 */
}

base测试页面test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<%
	String path = request.getContextPath();
	//basePath值为 http://localhost:8080/bookshop/
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 使用网站的完整URL作为相对路径的参考基准 -->
<base href="<%=basePath%>"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>base标签测试</title>

<!-- link标签可以正常引入外部css文件，但对外部样式代码中的相对路径就无效 -->
<link href="css/index/test/test.css" rel="stylesheet" type="text/css">

<!-- 对内部和外部文件的代码使用相对路径都有效 -->
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/outer/category/test/test2.js"></script>

<script>
	//如果jquery.js引入成功会弹框
	$(function(){
		alert("jquery引入成功！");
	});
	
	//base标签对js代码的发出的请求路径也是有效的
	function f1(){
		alert("我是category_test1")
		//  book/test进来可以正常访问该路径
		location.href="category/category_test1.action";
	}
</script>
</head>
<body>

	<!-- base标签对于整个页面所有关于请求路径都有效 -->
	<input type="button" onclick="f1()" value="category_test1"/>
	<input type="button" onclick="f2()" value="category_test2"/>
	<a href="category/category_test3.action">category_test3</a>
	<form action="category/category_test4.action" method="post">
		<input type="submit" value="category_test4"/>
	</form>
		
	<img src="images/test/00.png" width="100" height="100"/>
</body>
</html>

2.3 测试步骤

在浏览器中输入网址http://localhost:8080/bookshop/book/test/book_test.action ，会转发到视图页test.jsp测试页，但浏览器网址依然不变
如果测试页弹出【jquery引入成功！】则表示对script标签有效
如果测试页能显示00.png图片则表示对img标签有效
如果测试页背景颜色变红，则表示link标签有效
如果测试页没有显示背景图片1.png，则表示外部样式代码中使用的相对路径无效(上面的css代码是正确的路径，测试时需要改为相对项目的路径)
点击test2按钮，如果能弹出【我是category_test2】并跳转刷新当前页，CategoryAction控制台也会输出【category_test2访问成功】，表示对外部js代码中使用的相对路径也有效；book/test/book_test.action能正常访问不同目录的category/category_test2.action，则表示解决了上面1.2的问题
点击test3,test4按钮能正常弹框和刷新则表示对a标签丶form标签有效
点击test1按钮能正常能正常弹框和刷新则表示内部的js代码使用相对路径有效
把<base href="<%=basePath%>">去掉，重复以上步骤，观察资源是否找不到

3. Eclipse在jsp文件生成模版中添加base标签

3.1 打开jsp模版编辑界面

eclipse → perferences → web → jsp → jsp files → Editor → templates

2. 修改jsp模版

<%@ page language="java" contentType="text/html; charset=${encoding}"
    pageEncoding="${encoding}"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>"> 
		<meta charset="UTF-8">
		<title></title>
	</head>
<body>
${cursor}
</body>
</html>