如何通过nodejs服务器读取HTML文件渲染到页面

这篇文章主要介绍了如何通过nodejs服务器读取HTML文件渲染到页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

网站设计、网站建设,成都做网站公司-成都创新互联已向上1000+企业提供了,网站设计,网站制作,网络营销等服务!设计与技术结合,多年网站推广经验,合理的价格为您打造企业品质网站。

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

login.html页面

index.html页面

代码片段:




 
菜鸟教程(runoob.com) 




元素居中对齐

水平居中块级元素 (如 div), 可以使用 margin: auto;

 

注意: 使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。

notFount.html页面









404 Not Fount

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

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

		port  :端口号
		host  :主机ip
		backlog  server.listen() 函数的通用参数
		callback  server.listen() 函数的通用参数
		Returns: 
		启动一个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服务器读取HTML文件渲染到页面
标题URL:http://pwwzsj.com/article/jpiege.html

其他资讯