fs模块

fs模块，file system文件系统就是用于操作电脑磁盘中的文件

readFile()读取文件

fs.readFile(path,(err,data)=>{})，该方法用于读取文件。参数有2个，第一个填写的是要读取的文件的路径（一般填写绝对路径，也可以填写相对路径），第2个参数是回调函数。

1.path：填路径，可以绝对可以相对。

2.err：代表文件读取失败，得到err这个对象，而文件读取成功err的值就是null

3.data：代表文件读取成功得到了数据，它是一个buffer类型的数据(二进制数据流)，可以通过toString()转化为字符串

4.回调函数是在读取完这个路径的文件（得到err和data就表示文件读取完毕）时调用，无论文件是否读取成功，该回调函数都会调用。readFile()是一个异步任务

5.ps：res.end()方法接受字符串或者buffer

后端发送图片到客户端

图片有两种格式：一种是图片文件，还有一种是Base64编码（二进制数据）。

let http=require("http");
//引入fs系统自带的模块
let fs=require("fs");
let app=http.createServer((req,res)=>{
    if(req.url=="/xwlb"){
        res.setHeader("Content-Type","text/html;charset=utf8");
        res.end("<h2>昕雯联播</h2>")
    }else if(req.url=="/img"){
        res.setHeader("Content-Type","image/png");
        //读取图片文件发送给客户端
        fs.readFile("./image/mmexport1646053900038.jpg",(err,data)=>{
            console.log(err,data);
            res.end(data);
        });
    }else if(req.url=="/image/img-41.jpg"){
        res.setHeader("Content-Type","image/jpeg");
        //读取图片文件
        fs.readFile("./image/img-41.jpg",(err,data)=>{
            if(!err){
                res.end(data);
            };
        });
    }else{
        res.end("<h1>404 Not Found</h1>");
    };
});
app.listen(8080);

以上表示用户访问的url（url是用户网络请求该资源文件时输入的网址） 和资源路径 （path是真正的服务器上该文件的文件名字） 可以不相同，相同是为了让网址和资源匹配。

静态网站

后端传输html文件时，客户端打开网址就会浏览器就会进行页面渲染然后再去操作了html文件的内容，再次刷新网址时浏览器就可以显示并渲染html文件修改的内容并不用再次在后端重启重新运行js文件，因为并没有修改和操作js文件中的内容。但是后端的传输数据的函数中的回调函数就会再次运行。

当浏览器输入网址进行网络请求会接收到网址对应的服务器发送的html文件的数据包然后就会解析html文件（客户端第一次只请求到了html这份文件，并不会请求到这份html文件中的图片等其他网络资源，所以静态网站的组成是由多次网络请求而成），解析时遇到图片的src属性以及其他标签需要做网络请求的属性时，就会再做一次网络请求去该属性的属性值对应的网址的相应的服务器上请求资源，然后服务器就会发送数据包到客户端，客户端就会接收这个数据包解析并渲染到页面上。http在每次请求网络完毕时，会断开前后端连接，每次网络请求是独立的。

所以html文件中的图片的src请求的资源并不是浏览器输入的网址请求的，而是图片img标签请求的网络资源。浏览器地址栏输入的网址请求的资源是浏览器整个页面用请求到的资源会显示到整个页面上，而img标签和a标签等请求的网络资源就是标签自己用将网络资源渲染到页面，总的来说就是谁请求的网络资源就是谁用这个请求到的网络资源编码来显示到页面上。

以上图片中的第一个img标签请求的是自己本地搭建的服务器的图片资源（这是绝对网络路径），第二个img请求的是其他服务器的图片资源

//引入node自带的http模块，这个模块可以调用函数来创建后端服务器
let http=require("http");
let fs=require("fs");
//调用函数创建服务器
let app=http.createServer((req,res)=>{
    if(req.url=="/home"){
        res.setHeader("Content-Type","text/html;charset=utf8");
        fs.readFile("./index.html",(err,data)=>{
            res.end(data);
        });
    }else if(req.url=="/img-41.jpg"){
        res.setHeader("Content-Type","image/png");
        //读取图片文件
        fs.readFile("./image/img-41.jpg",(err,data)=>{
            if(!err){
                res.end(data);
            };
        });
    }else{
        res.end("<h1>404 Not Found</h1>");
    };
});
//监听端口
app.listen(8081);//端口

以上代码表示浏览器地址输入http://localst:8081/img-41.jpg 就可以得到这张图片资源

<!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>
    <p>tara</p>
    <img src="/img-41.jpg" alt="" width="600px">
   
</body>
</html>

/img-41.jpg表示的路径是当前访问的网页的网址中IP地址和端口后的后部分字符串，就是相对根路径（img输入这个网址就相当于输入http://localst:8081/img-41.jpg） ip:port就表示根。

2.ip：IP地址访问到唯一的服务器，port：端口访问到该服务器的具体那个程序

fs模块（1）：读取文件

fs模块

readFile()读取文件

后端发送图片到客户端

静态网站

相关知识点补充

相对路径

MIME 类型