node读取文件进阶(详解)

时间:2022-06-08
本文章向大家介绍node读取文件进阶(详解),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

刚才简单介绍了一下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)的地址不一定这个文件存在,但是读取的文件一定正确!