关于相对路径详解

前端引用路径的解析

1、客户端路径(客户端目录)

hrefsrcurl里的相对地址、完整地址是被浏览器解析的,称为客户端路径。下面仅对相对路径进行描述。遵循的原则:

/指根路径 

../回到上一级路径

./当前路径

上述路径均指浏览器地址栏里的路径,而非服务器上的实际物理路径。


 

例:浏览器地址栏为 http://localhost:9099/a/b   

那么  hrefsrcurl里的 ../ 指回到了a路径,/回到了a的上级路径,即根路径  ./ b路径

 

2、客户度路径和服务器上的物理路径之间的关系

接着上述示例,引用jssrcsrc=“../project/model.js” 浏览器会发送一个请求该js文件的http请求,地址为http://localhost:9099/a/project/model.js

服务端会对该请求进行解析。下面以本公司node为例进行说明解析规则,其它web服务器类似。解析规则:项目启动时,使用express设置了静态资源路径,即项目目录内的public文件夹,那么node端在收到上述请求后,会去找寻public/a/project/model.js,如果找到了,则把该文件响应给浏览器端,如果没有找到,则把该请求的解析权移交给自定义路由,由自定义路由进行解析并作出响应,如果public内既没有对应的文件,也没有对应的自定义路由,那么浏览器端会收到一个404的响应

 

说几点:

服务器上的实际物理路径:本地代码的路径(本地开发代码的的结构各个文件路径)

静态资源路径:就是在服务器上存放本地代码的位置(存放html,css,js,image等文件) -- 该路径是一个文件夹,这个文件夹存放的东西就是本地开发环境中的所有东西(前端)。该文件夹是后台设置(这里是用node的express设置了一个叫public的文件夹用来存放前端的所有的代码)注:个人觉得public这个文件是在服务的配置文件中设置的。

begin:

关于如何设置静态文件夹的根目录-- 

比如apache:通过在服务器端修改配置。让url指定到自己本地路径代码。-

end -- 这只是我个人的理解 

关于说浏览器中的客户端路径。

在我们开发时在css中的link,src,url 使用的路径就是客户端路径。不是本地代码的文件路径。是相对于浏览器中url的路径

以我接触的项目为例:因为该项目套了一层iframe,我们的项目代码实际是在iframe中。所以url的地址为http://1.1.1.1:6666/xx

如果url的地址为这种。只要一个/xx则只要我在代码中写../就可以直接指向到public文件夹。

 

这段话什么意思,打个比方

public/a/a1/a2/a.html

public/b/b/b.html

想在a.html中引入b.html这应该如何使用路径

根据项目的URL可知是http://1.1.1.1:6666/xx形式。

所以b.html中 这么写<script src="../a/a1/a2/a.html">  </script>     ../直接就可以访问到public文件夹(至于为什么会到public文件夹,这这是node端(后台)express设置好的(人为设置的)),href,src,url都是依据这样去设置的

 

同理:如果项目URL是http://1.1.1.1:6666/xx1/xx2形式。

这种形式。则b.html中 这么写<script src="../../a/a1/a2/a.html">  </script>  需要../../才能到public文件夹。

如果项目URL是http://1.1.1.1:6666/xx1/xx2/xx3形式。

这种形式。则b.html中 这么写<script src="../../../a/a1/a2/a.html">  </script>  需要../../才能到public文件夹。

希望可以理解

 

另附:服务器部署静态页面(前端)

https://blog.csdn.net/su_ling/article/details/70254638

 

关于express设置静态资源文件夹

NodeJS + express访问html、css、JS等静态资源文件

原先做前端开发时都是用XAMPP或LAMP,把HTML、CSS、JS等前端资源放到htdocs下,测试自己的前端代码,但有些不方便的地方是,在调用Ajax请求后无法模拟请求返回的数据,最近学了点NodeJS,就用NodeJs来做Web服务器。因为最终与后台交互的是用Java作开发语言的,所以就不用jade、ejs等模板了,只是单纯地作为一个静态服务器以及模拟处理Ajax数据请求

1. 初始化项目

1.1. 环境搭建

先安装NodeJs、npm(自带),国外的镜像资源访问慢的话,可以考虑使用taobao的资源,用npm安装nrm来管理registry的路径,比较常用的是taobao,也可以用cnpm或者其他的

1.2. npm初始化项目

npm初始化项目

npm init

初始化时可以对package.json进行配置,全部默认即可,若有兴趣可看下express的package.json,一般情况下标准的配置项,express的package.json中都有体现

1.3. 安装express

express的安装很简单,使用以下命令安装

npm i express --save

2. 编写app.js

app.js代码如下:

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'public')))

app.listen(8080, () => {
  console.log(`App listening at port 8080`)
})

其中最主要的部分是app.use(express.static(path.join(__dirname, 'public'))),该行代码是在express添加中间件,设置静态资源路径为public,所有的HTML、CSS、JS等文件都放在public下即可,后续代码迁移直接将public下的代码copy到Java Web的webRoot中就行

3. 添加测试页面

在public中添加测试页面

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web管理平台</title>
</head>
<body>
  <h1>Web管理平台</h1>
</body>
</html>

## 4. 启动APP应用 ##
添加完后,启动APP应用

node app.js

控制台输出App listening at port 8080,说明NodeJs的Web应用已经跑起来了

在浏览器中输入127.0.0.1:8080,页面展示如下:

转自:

https://www.cnblogs.com/qingbin-bai/p/6271388.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值