node 网络请求的简便写法

75 阅读1分钟
var http = require('http')
 var fs = require('fs')
//  用户请求一次网络,函数就调用一次
 var app = http.createServer((qes, res) => {
     console.log(qes.url)
     if (qes.url == '/index.html') {
         // 配置返回给用户的数据包的数据格式和编码的类型
         res.setHeader("content-Type", "text/html;charset=utf8")
         fs.readFile(__dirname + '/index.html', (err, data) => {
             // 给前端最后一次发送数据包
             res.end(data)
         })
     }
 })
 app.listen(8088)

image.png index.html的代码如下

<!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>网络请求</title>
</head>
<style>
    img {
        width: 300px;
        height: 300px;
    }
</style>
<body>
    <h1>exo</h1>
    <img src="https://img1.baidu.com/it/u=2599445962,2783336528&fm=253&app=138&size
    =w931&n=0&f=JPEG&fmt=auto?sec=1659114000&t=b5bfdacc47377179aefffd95e03eff99"
        alt="">
        <img src="./img/1.jpeg" alt="">
        <a href="http://www.baidu.com"></a>
        <a href="../../pp/exo.html"></a>
</body>
</html>

由此可以看出 <img src="./img/1.jpeg" alt="">的图片没有加载出来,而服务器一直在请求./img/1.jpeg的资源

image.png

image.png

所以需要添加关于图片的网络请求才能让图片加载出来,代码如下

var http = require('http')
 var fs = require('fs')
//  用户请求一次网络,函数就调用一次
 var app = http.createServer((qes, res) => {
     console.log(qes.url)
     if (qes.url == '/index.html') {
         // 配置返回给用户的数据包的数据格式和编码的类型
         res.setHeader("content-Type", "text/html;charset=utf8")
         fs.readFile(__dirname + '/index.html', (err, data) => {
             // 给前端最后一次发送数据包
             res.end(data)
         })
     }else if(qes.url == '/img/1.jpeg'){
        res.setHeader("content-Type", "text/html;charset=utf8")
         fs.readFile(__dirname + '/img/1.jpeg', (err, data) => {
             // 给前端最后一次发送数据包
             res.end(data)
            })
     }
 })
 app.listen(8088)

image.png

image.png

代码简化为

 var http = require('http')
 var fs = require('fs')
//  用户请求一次网络,函数就调用一次
 var app = http.createServer((qes, res) => {
     res.setHeader("content-Type", "text/html;charset=utf8")
    //  这样用户请求什么资源就加载什么资源
     fs.readFile(__dirname+qes.url,(err,data)=>{
        res.end(data)
     })
 })
 app.listen(8088)