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)的地址不一定这个文件存在,但是读取的文件一定正确!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

art-template用户注册方法

应用场景nodejs Express框架,使用art-template模板引擎。 后台注册方法代码: var template = require('art-t...

40780
来自专栏我是业余自学C/C++的

Mac下vim的配置文件

13110
来自专栏开发之途

用WordPress搭建个人网站(1)

58860
来自专栏py+selenium

py+selenium 直接给日期赋值,控制台调试报错【已解决】

         其实既然可以去除readonly属性,那就可以直接给属性赋值,将两行代码缩为一行。

23730
来自专栏wblearn

程序员的你是否熟练掌握Chrome开发者工具?

回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发与调试。其实在没用Chrome开发之前就时不时的...

13340
来自专栏吴伟祥

java web项目修改favicon.ico图标的方式

修改tomcat小猫图标,设置项目的favicon图标,方式有两种:全局方式和局部方式

17740
来自专栏Jerry的SAP技术分享

微信程序开发系列教程(四)使用微信API创建公众号自定义菜单

大家可能经常看到一些微信公众号具有功能强大的自定义菜单,点击之后可以访问很多有用的功能。

12210
来自专栏React Native开发圈

React Native日期时间选择组件

date:设置初始显示的日期 mode:显示的模式,date,datetime,time format:设置日期格式,默认为'YYYY-MM-DD' confi...

15020
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由 前情回顾 在上一篇《V...

24290
来自专栏DT乱“码”

微信小程序开发指引

官方文档教程1:http://bcoder.cn/wxopen/ 官方文档教程2:http://bing.aliaii.com/wxopen/  本文档将带你一...

551100

扫码关注云+社区

领取腾讯云代金券