通过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框架Express的模板视图机制分析
Jul 19 NodeJs
Nodejs学习笔记之Global Objects全局对象
Jan 13 NodeJs
NodeJS学习笔记之Http模块
Jan 13 NodeJs
进阶之初探nodeJS
Jan 24 NodeJs
NodeJS配置HTTPS服务实例分享
Feb 19 NodeJs
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
Mar 28 NodeJs
深入浅析Nodejs的Http模块
Jun 20 NodeJs
nodejs动态创建二维码的方法
Aug 12 NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
Nov 28 NodeJs
使用koa-log4管理nodeJs日志笔记的使用方法
Nov 30 NodeJs
详解NodeJs项目 CentOs linux服务器线上部署
Sep 16 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
图形数字验证代码
2006/10/09 PHP
汉字转化为拼音(php版)
2006/10/09 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
js实现3D旋转相册
2020/08/02 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
Python sys.path详细介绍
2013/10/17 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python 切分数组实例解析
2019/11/07 Python
利用Python计算KS的实例详解
2020/03/03 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
python selenium xpath定位操作
2020/09/01 Python
python mock测试的示例
2020/10/19 Python
经济管理专业自荐信
2013/12/30 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
林肯就职演讲稿
2014/05/19 职场文书
2014年小学工作总结
2014/11/26 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
小升初自荐信范文
2015/03/05 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
社区党员干部承诺书
2015/05/04 职场文书