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)
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的资源
所以需要添加关于图片的网络请求才能让图片加载出来,代码如下
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)
代码简化为
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)