路径

全局变量 __dirname是一个字符串,代表当前js文件所在目录的路径(当前js文件的上一层级文件的路径)(绝对路径)

全局变量 __filename是一个字符串,代表当前js文件的路径(绝对路径)

var http = require("http")
var app = http.createServer((req, res) => {
    if (req.url == "/a") {
        console.log(__dirname, 111);
        console.log(__filename, 222);
        res.end("666")
    }
})
app.listen(10086)

读取一个静态网页

利用__dirname + req.url拼接成前端请求所需的路径

fs.readFile(__dirname + req.url, (err, data) => {
		res.end(data)
	})

列：

var http = require("http");
var fs = require("fs");
var app = http.createServer((req, res) => {
    let a = req.url;
    if (req.url == "/huawei") {
        fs.readFile("./01.pc端-华为/华为.html", (err, data) => {
            res.setHeader("content-Type", "text/html;charset=utf8")
            res.end(data)
        })
    } else if (req.url == "/huawei.css") {
        fs.readFile("./01.pc端-华为/huawei.css", (err, data) => {
            res.end(data)
        })

        // } else if (req.url == "/img/logo_app.png") {
        //     // console.log(图片);
        //     fs.readFile("./01.pc端-华为/img/logo_app.png", (err, data) => {
        //         res.setHeader("content-Type", "image/png")
        //         res.end(data)
        //     })
    } else if (req.url == a) {
        console.log(a);
        fs.readFile(__dirname + "/01.pc端-华为" + a, (err, data) => {
            res.setHeader("content-Type", "image/png")
            res.end(data)
        })
    } else {
        res.end("not 404")
    }
})
app.listen(10086)

网址的组成

网址的组成:协议域名 pathname querystring has

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

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

url模块

可以把url网址解析为一个对象 var urlobj=url.parse(req.url)

urlobj.pathname

urlobj.query

var http = require("http")
var url = require("url")
var app = http.createServer((req, res) => {
    if (req.url == "/a") {
        var re = url.parse(req.url)
        console.log(re);
        res.end(666)

    }
})
app.listen(10086)

querystring模块

可以吧querystring参数解析为一个对象 var urlobj=url.parse(req.url)

var queryobj=querystring.parse(urlobj.query)

var queryobj1 = querystring.stringify({ name: "jack", age: 20 })将对象转为字符串

var http = require("http")
var url = require("url")
var querystring = require("querystring")
var app = http.createServer((req, res) => {
    if (req.url == "/a") {
        var urlobj = url.parse(req.url)

        var queryobj = querystring.parse("username=jack&count=20&maxid=123456")
        var queryobj1 = querystring.stringify({
            name: "jack",
            age: 20
        })
        console.log(queryobj, 111);
        console.log(queryobj1, 222);
        res.end("666")

    } else {
        res.end("404")
    }
})
app.listen(10086)

mime模块

mime可以获取客户端路由请求的文件类型

var mime=require("mime")

var re2=mime.getType("htpp://2342354345:8080/css/sadfsdgfdfg.ttf")//获取请求类型

相对路径与绝对路径

本地相对路径

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

本地绝对路径

从根盘符开始写路径： "C:/Users/Administrator/Desktop/%E4%BB%A3%E7%A0%81/14-%E5%90%84%E7%A7%8D%E8%B7%AF%E5%BE%84(%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9)/index.html"

相对网络路径

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

页面内部的路径:

"./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"

绝对网络路径

"协议://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"

网络相对根路径

"/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"

静态资源托管

静态资源：xx.css xx.html xx.js xx.jpg xx.json xx.字体都是静态资源

前端的静态资源发起请求，后端通过fs模块读取

实现一个静态资源托管

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="./img/anniu1.png" alt="">
    <img src="./img/anniu2.png" alt="">
    <img src="./img/anniu3.png" alt="">
    <img src="./img/lunbo1(1).webp" alt="">
    <img src="./img/lunbo1(2).webp" alt="">
    <img src="./img/lunbo1(3).webp" alt="">
    <img src="./img/lunbo1(4).webp" alt="">
</body>

</html>

var mime = require("mime");
var http = require("http");
var querystring = require("querystring")
var fs = require("fs");
var url = require("url");

var app = http.createServer((req, res) => {
    //将用户的请求转化为对象
    console.log(666);
    let urlobj = url.parse(req.url).pathname
    //取出请求中的pathname
    let pathname = urlobj;
    //如果用户没输入完整的pathname，只输入了一个“/”
    if (pathname == "/") {
        pathname = "/test.html"
    }
    //将用户的请求拼接为准确的地址
    let path = __dirname + pathname
    fs.readFile(path, (err, data) => {
        if (!err) {
            //判断请求类型
            console.log(data);
            let type1 = mime.getType(path)
            res.setHeader("content-Type", type1)
            res.end(data)
        } else {
            res.end("404")
        }
    })
})
app.listen(10086)

网页加载流程

1.1浏览器的地址栏输入的网址敲回车会请求一次服务器服务器会返回一个数据包就是网页代码(html格式的文本文档)

1.2浏览器开始去运行解析html文本(此时还没有外部图片,js,css,字体库资源)

1.2.1解析时遇到了 img标签的src属性会异步的开始再次网络请求服务器 ,服务器返回数据包(图片编码) 然后渲染出来

1.2.2解析时遇到了link-href 会异步的开始再次网络请求服务器 ,服务器返回数据包(css编码) 然后加载

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

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

1.3所有资源加载完毕了才会触发window.onload

全栈2----（路径，读取一个静态网页，网址的组成，url模块，querystring模块，mime模块，相对路径与绝对路径，静态资源托管，网页加载流程）

路径