后端——网址 (url) 的组成、url模块、querystring模块、mime模块、各种路径、静态资源托管、网页的加载流程(面试题)

发布于:2023-02-09 ⋅ 阅读:(486) ⋅ 点赞:(0)

目录

一、网址 (url) 的组成

二、url模块

三、querystring模块

四、mime模块

五、url querystring http fs mime模块的混合使用——静态网站

六、各种路径

1、本地相对路径:

2、本地绝对路径:

3、相对网络路径:

4、绝对网络路径:

5、本地相对根路径:

6、网络相对根路径:

七、静态资源托管

八、网页的加载流程 ——面试题


一、网址 (url) 的组成

协议: //ip:port/pathname?querystring#hash

http://192.168.5.10:8081/home/index.html?count=20&user=karen#top

http:协议

192.168.5.10:8081:IP

8081:port

ip:port: 域名

home/index.html:pathname

count=20&user=karen:queryString

top:hash

域名==>DNS解析:会把域名解析为一个 IP port

二、url模块

网址是一个字符串

url模块 ==> 可以把url网址解析为一个对象

var urlobj=url.parse(req.url) urlobj.pathname urlobj.query

var url=require("url")
var str="http://192.168.5.10:8081/home/index.html?count=20&user=karen"
var urlobj=url.parse(str)
console.log(urlobj)   

 得到一个对象,里面有:protocol auth port hostname hash query path href 等等

 利用对象里面的来获取网址:

var http=require("http")
var fs=require("fs")
var url=require("url")
var app=http.createServer((req,res)=>{
    console.log(req.url)  //    /home/index.html?count=20&user=karen
    var path=url.parse(req.url).pathname  ///home/index.html
    fs.readFile(__dirname+path,(err,data)=>{
        if(err){res.end("not 404")}
        else{
        //__dirname+path==>  http://192.168.5.10:8081/home/index.html
        res,end(data)  
        }
    })
})
app.listen(8081)

三、querystring模块

可以把querystring参数解析为一个对象

var urlobj=url.parse(req.url)

var queryobj=querystring.parse(urlobj.query)

var querystring=require("querystring")
var obj=querystring.parse("count=20&user=karen")  // 字符串 转 对象
var str2=querystring.stringify({name:"jack",age:20})  // 对象 转 字符串
var str3=JSON.stringify({name:"jack",age:20})  //对象 转 字符串
console.log(obj,str2,str3)  
//[Object: null prototype] { count: '20', user: 'karen' }    name=jack&age=20    {"name":"jack","age":20}

应用:

// url  querystring  http  fs一起使用
var url=require("url")
var querystring=require("querystring")
var http=require("http")
var fs=require("fs")
var app=http.createServer((req,res)=>{
	let urlobj=url.parse(req.url)  //将字符串转为对象
	let pathname=urlobj.pathname   //获取pathname。也就是端口号后面的一部分
	if(pathname=="/"){pathname="/index.html"}
	let path=__dirname+"/src"+pathname
	fs.readFile(path,(err,data)=>{
		if(!err){
			res.setHeader("content-Type","text/html")
			res.end(data)
		}
		else if(pathname=="/login"){
			let queryobj=querystring.parse(urlobj.query)
			console.log(queryobj)
			//把前端传过来的数据  去处理
			res.end("hello")
		}
		else if(pathname=="/car"){
			res.end("666666car")
		}
		else {
			res.end("404 not found")
		}
	})
})
app.listen(8080)

四、mime模块

在小黑窗里下载:  npm i mime

var mime=require("mime")
mime.getType()
var re=mime.getExtension("text/css")
console.log(re)  //css
var re2=mime.getType("ckshf.jpg")    //如果写hja.css   结果就是:text.css
console.log(re2)  // imge/jpg

五、url querystring http fs mime模块的混合使用——静态网站

var mime=require("mime")
var url=require("url")
var querystring=require("querystring")
var http=require("http")
var fs=require("fs")
var app=http.createServer((req,res)=>{
	let urlobj=url.parse(req.url) 
	let pathname=urlobj.pathname
	if(pathname=="/"){pathname="/index.html"}
	let path=__dirname+"/src"+pathname
	fs.readFile(path,(err,data)=>{
		if(!err){
			let type1=mime.getType(path)  //检测文件的类型后缀
			res.setHeader("content-Type",type1)
			res.end(data)
		}
	})
})
app.listen(8080)

六、各种路径

1、本地相对路径:

 在这个页面中写路径: file://x1/x2/x2/index.html  

"./src/18.jpg"  写这个路径的文件的页面是在本地打开的==> file://x1/x2/x2/src/18.jpg

"src/18.jpg" 写这个路径的文件的页面是在本地打开的 ==> file://x1/x2/x2/src/18.jpg

"file://c:/"

本地打开:文件双击打开,open in broswe不算

2、本地绝对路径:

从根盘符开始写路径:   D/前端/代码/1.html

3、相对网络路径:

当前页面的网址:  "协议://ip:port /src/news / index.html  querystring hash"

(pathname=/src/news/index.html)

页面内部的路径:

 "./src/18.jpg" ==> 真实的网址:"协议://ip:port /src/news / src/18.jpg"

"src/18.jpg" ==> "协议://ip:port /src/news / src/18.jpg"

 例子1:

用户输入网址: "http://192.168.6.60:8080/user/20220728/newspage.html?n=20"

打开了一个页面,在这个页面中有一个img的src是 : "./src/18.jpg"

请问192.168.6.60:8080这个服务器会收到req.url是什么?

答: "/user/20220728/src/18.jpg"

例子2:

用户输入网址:  "http://192.168.6.60:8080/user/20220728/newspage"

打开了一个页面,在这个页面中有一个img的src是 : "./src/18.jpg"

请问192.168.6.60:8080这个服务器会受到req.url是什么?

答: "/user/20220728/src/18.jpg"

它真正的网址:"http://192.168.6.60:8080/user/20220728/src/18.jpg"

4、绝对网络路径:

“协议://ip:port /src/news/src/18,jpg ”

易错思考:

用户输入网址: http://192.168.6.60:8080/user/20220728/newspage

打开了一个页面,在这个页面中有一个img的src是 : "192.168.6.60:8080/src/18.jpg"

请问192.168.6.60:8080这个服务器会受到req.url是什么?

答: "/user/20220728/192.168.6.60:8080/src/18.jpg"

它真正的网址:"http://192.168.6.60:8080/user/20220728/192.168.6.60:8080/src/18.jpg"

5、本地相对根路径:

例子:

用户本地打开: "file:///c:/xx/xx2/index.html"

页面中有一个img的src是 : "/src/18.jpg"

它真正的路径:"file:///c:/src/18.jpg"

6、网络相对根路径:

"/src/18.jpg"   前面不加点

思考:

用户输入网址: http://192.168.6.60:8080/user/20220728/newspage

打开了一个页面,在这个页面中有一个img的src是 : "/src/18.jpg"

请问192.168.6.60:8080这个服务器会受到req.url是什么?

答:"/src/18.jpg"

它真正的网址:"http://192.168.6.60:8080/src/18.jpg"

七、静态资源托管

前端本地打开 本地相对路径 和 后端打开相对网络路径,都能打开那张img

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<!-- 	
	"http://192.168.6.60:8080/index.html"  页面出现,然后就运行到img,请求服务器
	"http://192.168.6.60:8080/img/18.jpg"   此网址与下面前端本地的相对路径相对应,此为代理
-->

	<!-- 比较支持此方法,比较常见 -->
	<img src="./img/18.jpg">
	<!-- 这个路径,前端本地打开的时候,叫做本地相对路径。
	后端打开,就是托管,叫相对网络路径,路径为:ip:port/img/18.jpg -->

	<!-- 此方法不太好,用户而无法访问到我电脑的C盘 -->
	<img src="C:\Users\Administrator\Desktop\代码\15-静态资源托管\img\18.jpg">
</body>

</html>

八、网页的加载流程 ——面试题

一个网页的渲染资源是一个个动态加载的数据组合而成的,不是一次就把整个渲染的页面加载了

1.用户浏览器地址栏输入网址==>请求后端(请求一次服务器),后端传输一份html编码的文本文档(返回一个数据包),然后就断开连接了

2.浏览器开始运行html文件的编码

(这个时候图片、js、css、字体库资源等)

解析时遇到了img-src属性 会异步的  再次请求另外一个网址(与上一次的是无关的,相互独立的)==>后端传输一份image编码的文件(一个数据包--图片编码),然后断开连接,浏览器把图片的编码按照CSS结构进行渲染

解析时遇到了 link-href属性  会异步的  会再次请求另外一个网址==>后端传输一份对应编码的文件(css编码),然后断开连接

解析时 xxxx-url会异步的 开始再次网络请求服务器 ,服务器返回数据包(对应编码) 然后加载

解析时script-src会异步的 开始再次网络请求服务器 ,服务器返回数据包(js编码) 然后用js引擎去执行编码

解析时遇到了 网络请求的代码等等....

3.页面渲染

页面按照解析好的  DOM模型 和 CSS层叠样式表 结合为renderTree,然后绘制页面

(所有的资源加载完毕后,才会触发winodw.onload)

经典面试题:用户从输入url到页面渲染过程发生了什么?

本文含有隐藏内容,请 开通VIP 后查看