五、url querystring http fs mime模块的混合使用——静态网站
一、网址 （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到页面渲染过程发生了什么?