通过nodejs 服务器读取HTML文件渲染到页面的方法


Posted in NodeJs onMay 17, 2018

1.分别简单实现三个备用页面。

login.html页面

index.html页面

代码片段:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p>

<div class="center">
 <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</div>

</body>
</html>

notFount.html页面

<!DOCTYPE HTML>
<html>
<head>
<script>

</script>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
	color:red;
}
</style>
</head>
<body>

<div class ="center" >404 Not Fount</div>

</body>
</html>

2.修改创建的nodejs 服务器页面,对不同地址的请求做出不同的响应页面。

在url地址判断中添加,文件读取代码,以实现读取定义的html页面。

声明文件系统对象:

// 声明文件操作系统对象 
  var fs = require('fs');

实现文件内容读取并渲染到页面

if(url ==='/'){ 
  //response.writeHead(响应状态码,响应头对象): 发送一个响应头给请求。 
  response.writeHead(200,{'Content-Type':'text/html'}) 
  // 如果url=‘/' ,读取指定文件下的html文件,渲染到页面。 
  fs.readFile('./practice/login.html','utf-8',function(err,data){ 
  if(err){ 
  throw err ; 
  } 
  response.end(data); 
  }); 
}

完整代码:

/**
		
	1.使用 HTTP 服务器与客户端交互,需要 require('http')。
		声明http协议
	*/
	var http = require('http');
	
	
	// 声明文件操作系统对象
	var fs = require('fs');
	/**
	2.获取服务器对象
		1.通过 http.createServer([requestListener]) 创建一个服务

		requestListener <Function>
		返回: <http.Server>
		返回一个新建的 http.Server 实例。
		对于服务端来说,主要做三件事:
		1.接受客户端发出的请求。
		2.处理客户端发来的请求。
		3.向客户端发送响应。
	*/
	
	var server = http.createServer();

	/**
	3.声明端口号,开启服务。
		server.listen([port][, host][, backlog][, callback])

		port <number> :端口号
		host <string> :主机ip
		backlog <number> server.listen() 函数的通用参数
		callback <Function> server.listen() 函数的通用参数
		Returns: <net.Server>
		启动一个TCP服务监听输入的port和host。

		如果port省略或是0,系统会随意分配一个在'listening'事件触发后能被server.address().port检索的无用端口。

		如果host省略,如果IPv6可用,服务器将会接收基于unspecified IPv6 address (::)的连接,否则接收基于unspecified IPv4 address (0.0.0.0)的连接
	
	*/
	server.listen(9001, function(){
		 console.log('服务器正在端口号:9001上运行......');
	})
	
	
	/**
	4.给server 实例对象添加request请求事件,该请求事件是所有请求的入口。
		任何请求都会触发改事件,然后执行事件对应的处理函数。
	
		server.on('request',function(){
			 console.log('收到客户端发出的请求.......');
		});
	*/

	
	/**
	5.设置请求处理函数。
		请求回调处理函数需要接收两个参数。
		request :request是一个请求对象,可以拿到当前浏览器请求的一些信息。
			eg:请求路径,请求方法等
		response: response是一个响应对象,可以用来给请求发送响应。
	
	*/
	server.on('request',function(request,response){
		
		var url = request.url;
		if(url ==='/'){
			//response.writeHead(响应状态码,响应头对象): 发送一个响应头给请求。
			response.writeHead(200,{'Content-Type':'text/html'})
			// 如果url=‘/' ,读取指定文件下的html文件,渲染到页面。
			fs.readFile('./practice/login.html','utf-8',function(err,data){
				if(err){
					throw err ;
				}
				response.end(data);
			});
		
		}else if(url === '/login'){
			response.writeHead(200,{'Content-Type':'text/html'});
			// 如果url=‘/' ,读取指定文件下的html文件,渲染到页面。
			fs.readFile('./practice/login.html','utf-8',function(err,data){
				if(err){
					throw err ;
				}
				response.end(data);
			});
		}else if(url === '/index'){
			response.writeHead(200,{'Content-Type':'text/html'});
			// 如果url=‘/' ,读取指定文件下的html文件,渲染到页面。
			fs.readFile('./practice/index.html','utf-8',function(err,data){
				if(err){
					throw err ;
				}
				response.end(data);
			});
		}else{
			response.writeHead(200,{'Content-Type':'text/html'});
			// 如果url=‘/' ,读取指定文件下的html文件,渲染到页面。
			fs.readFile('./practice/notFount.html','utf-8',function(err,data){
				if(err){
					throw err ;
				}
				response.end(data);
			});
		}
		
	});

最终实现效果:

开启nodejs服务器,在地址栏中输入:127.0.0.0.1:9001或127.0.0.0.1:9001/login

通过nodejs 服务器读取HTML文件渲染到页面的方法

在地址栏中输入:127.0.0.0.1:9001/index

通过nodejs 服务器读取HTML文件渲染到页面的方法

在地址栏中输入:127.0.0.0.1:9001/其他内容

通过nodejs 服务器读取HTML文件渲染到页面的方法

以上这篇通过nodejs 服务器读取HTML文件渲染到页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
Mar 18 NodeJs
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
Sep 26 NodeJs
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
Dec 18 NodeJs
轻松创建nodejs服务器(8):非阻塞是如何实现的
Dec 18 NodeJs
Nodejs的express使用教程
Nov 23 NodeJs
nodejs redis 发布订阅机制封装实现方法及实例代码
Dec 15 NodeJs
nodejs和C语言插入mysql数据库乱码问题的解决方法
Apr 14 NodeJs
NodeJS 实现手机短信验证模块阿里大于功能
Jun 19 NodeJs
详解redis在nodejs中的应用
May 02 NodeJs
nodejs分离html文件里面的js和css的方法
Apr 09 NodeJs
NodeJs 实现简单WebSocket即时通讯的示例代码
Aug 05 NodeJs
nodejs实现UDP组播示例方法
Nov 04 NodeJs
解决nodejs的npm命令无反应的问题
May 17 #NodeJs
Mac下通过brew安装指定版本的nodejs教程
May 17 #NodeJs
对mac下nodejs 更新到最新版本的最新方法(推荐)
May 17 #NodeJs
nodejs前端模板引擎swig入门详解
May 15 #NodeJs
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
May 15 #NodeJs
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
May 15 #NodeJs
解决Nodejs全局安装模块后找不到命令的问题
May 15 #NodeJs
You might like
PHP默认安装产生系统漏洞
2006/10/09 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php实现的CSS更新类实例
2014/09/22 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
JS date对象的减法处理实现代码
2010/12/28 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
json数据格式常见操作示例
2019/06/13 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python机器学习实现决策树
2019/11/11 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python基于opencv检测程序运行效率
2019/12/28 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
程序员机试试题汇总
2012/03/07 面试题
会计与审计毕业生自荐信范文
2013/12/30 职场文书
超市5.1促销活动
2014/01/15 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
研讨会致辞
2015/07/31 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
Python面向对象编程之类的概念
2021/11/01 Python
python 实现图片特效处理
2022/04/03 Python