刚才简单介绍了一下node读取同级页面的html文件,没有类似于Apache的服务,让访问变得复杂,因为这样正是成就了node的优点!优良的路由处理,通过路由访问不同内容!
本次小案例:不同路由访问不同页面,一个404页面,不同的路由加载的一个包含其他外部文件的(html包含外部的css)!
1.通过127.0.0.1访问index.html文件
2.通过127.0.0.1/test.html访问test.html文件
3.通过127.0.0.1处理指定路由外访问404页面!
代码分析
file.js
//引入模块
const http =require("http");
//引入文件模块
const fs= require("fs");
//创建服务器
const server = http.createServer(function(req,res){
//设置响应头
res.writeHead(200,{"Content-Type":"text/html;charset=UTF-8"})
//请求的路由地址
if(req.url == "/" || req.url=="/index.html"){
fs.readFile("index.html",function(err,data){
//设置响应头
res.writeHead(200,{"Content-Type":"text/html;charset=UTF-8"});
//加载的数据结束
res.end(data)
})
}else if(req.url=='/notstyle.css'){
fs.readFile("style.css",function(err,data){
res.writeHead(200,{"Content-Type":"text/css;charset=UTF-8"});
//加载的数据结束
res.end(data)
})
}else if(req.url=='/banner.JPG'){
fs.readFile("banner.JPG",function(err,data){
res.writeHead(200,{"Content-Type":"image;charset=UTF-8"});
//加载的数据结束
res.end(data)
})
}else if(req.url=='/test.html'){
fs.readFile("test.html",function(err,data){
res.writeHead(200,{"Content-Type":"text/html;charset=UTF-8"});
//加载的数据结束
res.end(data)
})
}
else{
res.writeHead(200,{"Content-Type":"text/html;charset=UTF-8"});
//加载的数据结束
res.end('<h1> 所需内容未找到404 </h1>')
}
})
//监听端口
server.listen(3001,"127.0.0.1")
同级目录文件
index.html
<html>
<head>
<meta charset="UTF-8">
<title>nodejs页面</title>
</head>
<body style="width:80%;margin:0 auto">
<h1 style="text-align: center;">你好,世界!这是一个标题</h1>
<p style="color:#ff0036;font-size:18px;">
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 Node.js 的包管理器 npm,是全球最大的开源库生态系统。
</p>
<p style="color:#66ffff;font-size:48px;">
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
</p>
<a href="test.html">进入test页面</a>
</body>
</html>
test.html
<html>
<head>
<meta charset="UTF-8">
<title>nodejs页面</title>
</head>
<body style="width:80%;margin:0 auto">
<h1 style="text-align: center;">你好,世界!这是一个标题</h1>
<p style="color:#ff0036;font-size:18px;">
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 Node.js 的包管理器 npm,是全球最大的开源库生态系统。
</p>
<p style="color:#66ffff;font-size:48px;">
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
</p>
<a href="test.html">进入test页面</a>
</body>
</html>
style.css
body{
background-color: mediumpurple;
width:100%;
height:100%;
}
第一个简单的访问文件前面已经详细探讨过,第二个访问/test.html中发现我们引入了一个img标签,
但是像上面(第一个页面)引用img发现图片不能加载,此时我们同样要进行这个路由处理!
else if(req.url=='/banner.JPG'){
fs.readFile("banner.JPG",function(err,data){
res.writeHead(200,{"Content-Type":"image;charset=UTF-8"});
//加载的数据结束
res.end(data)
})
访问这个图片的路由时候,同样进行读取文件,此时类型修改为image,顶部路由可以随意写(req.url=='/banner.jpg'),但是这个地址要和test中的img的src要保持一致!下面我们引入css的时候会使用路由的这个特性!
else if(req.url=='/notstyle.css'){
fs.readFile("style.css",function(err,data){
res.writeHead(200,{"Content-Type":"text/css;charset=UTF-8"});
//加载的数据结束
res.end(data)
})
}
此时读取的的路由(req.url)就不是这个css的文件名字(style.css),访问顶部路由的notstyle.css去读取真正的外部css文件(style.css)!
总结:请求的路由(req.url)的地址不一定这个文件存在,但是读取的文件一定正确!