前端相对路径、绝对路径,后端相对路径、绝对路径

本文探讨前端URL路径的使用,包括dirname/、/dirname、./dirname等不同形式的相对路径。在浏览器中,这些路径有不同的解析方式,可能影响API和静态资源。推荐使用/dirname形式的相对路径,因为它不受URL变化和API影响。然而,当涉及模板引擎和动态路由时,静态资源路径可能需要与API协调,以避免冲突。理解和测试浏览器对URL的处理对于优化前端代码至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

结论:为避免修改域名或者地址栏url影响我们的api和资源索引,推荐使用**/dirname**
因为这种不会影响api也不会影响静态资源

前端和后端的相对路径不太一样,前端不会有什么幺蛾子,后端因为不同的路由会打包对象放到不同的目录,这是有的相对路径就是从App开始,有的就是从子路由开始。

这次先聊聊前端的吧

*特别注意 /
*特别注意 /
*特别注意 /

在相对路径中有dirname/、/dirname、./dirname、//dirname、…/dirname。

大约有这么多,比较模糊的就是前三种:
1.dirname/ 这种路径,浏览器会讲地址栏的url和该路径拼接。
2./dirname 这种路径,浏览器会将协议、主机名和该路径拼接。
3. ./dirname 这种路径,浏览器会将地址栏的url和该路径拼接。
4. //dirname 这种路径,浏览器会将协议头和该api拼接。

下面开始代码验证。
目录结构
主要是查看图片的链接

在这里插入图片描述
这是路由,由于主要看前端,后端就简单一点

问题所在
这是我们使用ide常用的引入方式,但是一到服务器就不行了,原因就出在这里。

半相对
我个人觉得相对比绝对路径好一点,相对路径不受我们url的影响,不受api影响,而这种半相对比完全相对好一点,因为完全相对路径会受当前路径影响,还有影响api。所以推荐使用这种/dirname的方式。

下面是几个测试
第一个是首页里的index。第二个是404的index
这是几种路径

在这里插入图片描述
这是用ide预览的结果

在这里插入图片描述
这是开服务器预览的结果

下面是404页面的例子

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>前端相对url</title>
	<link rel="stylesheet" type="text/css" href="/404/css/404.css"/>
	<link rel="stylesheet" type="text/css" href="css/404.css"/>
	<link rel="stylesheet" type="text/css" href="/css/css.css"/>
	<link rel="stylesheet" type="text/css" href="index.css"/>
	<link rel="stylesheet" type="text/css" href="/src/css/src.css"/>
</head>
<body>
	<img src="404.PNG" >
	<img src="/404/404.PNG" >
	<img src="./404.PNG" >
	<img src="//404.PNG" >
	<img src="http://127.0.0.1/404/404.PNG" >
</body>
</html>

这是ide预览的结果
这是ide预览的结果

在这里插入图片描述
这是路由预览的结果

需要细致了解浏览器对url的拼接,还需要自己动手尝试,尝试后就明白了。

到这里有的小伙伴可能会发现,是不是用ide和服务器都能显示的1.3方案好啊!

这就涉及到后面的模板引擎了,模板引擎会将我们这种靠文件路径跳转的方式覆盖,(因为页面要动态的嘛),所以最终我们的设定并不是hostname/404来跳转404。

举一个形象的例子,比如我们文件跳转设定hostname/weblogo,来跳转登录页。但是有天我们发现这样太长了,我们api就规定hostname/logo来跳转登录,那么这时就出问题。这时候就api和资源相互污染了。随着控制欲的加强,后端的api会控制所有静态资源的权限,所以1.3这两种完全绝对的例子并不好。但如果你静态资源目录和api协调的好,也是可以用的。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圈点Studio

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值