当前位置：网站首页>---静态页面---

---静态页面---

2022-08-02 03:22:00 【cjx177187】

01.Html文件

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

node.js代码

var http=require("http")

var fs=require("fs")

var app=http.createServer((req,res)=>{

if(req.url=="/01.html"){

fs.readFile(__dirname+"/01.html",(err,data)=>{

res.end(data)

})

}else if(req.url=="/1.jpg"){

fs.readFile(__dirname+"/1.jpg",(err,data)=>{

res.end(data)

})

}else if(req.url=="/02.html"){

fs.readFile(__dirname+"/02.html",(err,data)=>{

res.end(data)

})

}

})

app.listen(8081)

当我们在浏览器输入网址时，收到的是网页源代码，这个代码浏览器是怎样运行的呢，是从上往下一行一行运行的；解析文档树中节点，一的节点一个节点的解析，当解析到 <link rel="stylesheet" href="./01.css">代码时，就会自发的向后端做出请求，再次运行http.createServer这个函数，这是浏览器就会收到一份css代码，然后再渲染到页面上，再回到HTML文件上运行下一行代码，一直运行到

<img src="./1.png" > 时再次发送请求调用http.createServer，获取1.png这个图片渲染到页面上，就这样一行一行的执行，一次又一次地发送请求接受数据，最后才是我们看见的那个页面。

但是我们会发现，我们的代码是需要一次又一次的去判断我们所请求的网络地址和我们是否是我们想要的，如果是我们在利用

fs.readFile函数来读出数据发送给前端，这样我们写出一个网页就需要很多次的if和else语句，并且很多的代码行其实都是类似的，就只改动了我们的判断条件和要读取的数据。我们还会发现一点，就是我们去判断的语句和我们先要读取的文件名其实是一样的只是我们要读取的语句前面多添加了一个绝对路径。

所以我们可以试像一下为什莫不能把判断语句和读取文件路径当作一个变量放入我们的代码中呢，这样仅需要几行代码就可以代替我们所有的if判断了

改进：

var http=require("http")

var fs=require("fs")

var app=http.createServer((req,res)=>{

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

res.end(data)

})

app.listen(8081)