目录

一、网址 （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到页面渲染过程发生了什么?