如何通過(guò)nodejs服務(wù)器讀取HTML文件渲染到頁(yè)面

這篇文章主要介紹了如何通過(guò)nodejs服務(wù)器讀取HTML文件渲染到頁(yè)面，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè),成都做網(wǎng)站公司-成都創(chuàng)新互聯(lián)已向上1000+企業(yè)提供了,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷等服務(wù)!設(shè)計(jì)與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗(yàn),合理的價(jià)格為您打造企業(yè)品質(zhì)網(wǎng)站。

1.分別簡(jiǎn)單實(shí)現(xiàn)三個(gè)備用頁(yè)面。

login.html頁(yè)面

index.html頁(yè)面

代碼片段：

<!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>

<h3>元素居中對(duì)齊</h3>
<p>水平居中塊級(jí)元素 (如 div), 可以使用 margin: auto;</p>

<div class="center">
 <p><b>注意: </b>使用 margin:auto 無(wú)法兼容 IE8, 除非 !DOCTYPE 已經(jīng)聲明。</p>
</div>

</body>
</html>

notFount.html頁(yè)面

<!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.修改創(chuàng)建的nodejs 服務(wù)器頁(yè)面，對(duì)不同地址的請(qǐng)求做出不同的響應(yīng)頁(yè)面。

在url地址判斷中添加，文件讀取代碼，以實(shí)現(xiàn)讀取定義的html頁(yè)面。

聲明文件系統(tǒng)對(duì)象：

// 聲明文件操作系統(tǒng)對(duì)象 
  var fs = require('fs');

實(shí)現(xiàn)文件內(nèi)容讀取并渲染到頁(yè)面

if(url ==='/'){ 
  //response.writeHead(響應(yīng)狀態(tài)碼，響應(yīng)頭對(duì)象): 發(fā)送一個(gè)響應(yīng)頭給請(qǐng)求。 
  response.writeHead(200,{'Content-Type':'text/html'}) 
  // 如果url=‘/' ,讀取指定文件下的html文件，渲染到頁(yè)面。 
  fs.readFile('./practice/login.html','utf-8',function(err,data){ 
  if(err){ 
  throw err ; 
  } 
  response.end(data); 
  }); 
}

完整代碼：

	/**
		
	1.使用 HTTP 服務(wù)器與客戶端交互，需要 require('http')。
		聲明http協(xié)議
	*/
	var http = require('http');
	
	
	// 聲明文件操作系統(tǒng)對(duì)象
	var fs = require('fs');
	/**
	2.獲取服務(wù)器對(duì)象
		1.通過(guò) http.createServer([requestListener]) 創(chuàng)建一個(gè)服務(wù)

		requestListener <Function>
		返回: <http.Server>
		返回一個(gè)新建的 http.Server 實(shí)例。
		對(duì)于服務(wù)端來(lái)說(shuō)，主要做三件事：
		1.接受客戶端發(fā)出的請(qǐng)求。
		2.處理客戶端發(fā)來(lái)的請(qǐng)求。
		3.向客戶端發(fā)送響應(yīng)。
	*/
	
	var server = http.createServer();

	/**
	3.聲明端口號(hào)，開啟服務(wù)。
		server.listen([port][, host][, backlog][, callback])

		port <number> ：端口號(hào)
		host <string> ：主機(jī)ip
		backlog <number> server.listen() 函數(shù)的通用參數(shù)
		callback <Function> server.listen() 函數(shù)的通用參數(shù)
		Returns: <net.Server>
		啟動(dòng)一個(gè)TCP服務(wù)監(jiān)聽輸入的port和host。

		如果port省略或是0，系統(tǒng)會(huì)隨意分配一個(gè)在'listening'事件觸發(fā)后能被server.address().port檢索的無(wú)用端口。

		如果host省略，如果IPv6可用，服務(wù)器將會(huì)接收基于unspecified IPv6 address (::)的連接，否則接收基于unspecified IPv4 address (0.0.0.0)的連接
	
	*/
	server.listen(9001, function(){
		 console.log('服務(wù)器正在端口號(hào)：9001上運(yùn)行......');
	})
	
	
	/**
	4.給server 實(shí)例對(duì)象添加request請(qǐng)求事件，該請(qǐng)求事件是所有請(qǐng)求的入口。
		任何請(qǐng)求都會(huì)觸發(fā)改事件，然后執(zhí)行事件對(duì)應(yīng)的處理函數(shù)。
	
		server.on('request',function(){
			 console.log('收到客戶端發(fā)出的請(qǐng)求.......');
		});
	*/

	
	/**
	5.設(shè)置請(qǐng)求處理函數(shù)。
		請(qǐng)求回調(diào)處理函數(shù)需要接收兩個(gè)參數(shù)。
		request ：request是一個(gè)請(qǐng)求對(duì)象，可以拿到當(dāng)前瀏覽器請(qǐng)求的一些信息。
			eg：請(qǐng)求路徑，請(qǐng)求方法等
		response： response是一個(gè)響應(yīng)對(duì)象，可以用來(lái)給請(qǐng)求發(fā)送響應(yīng)。
	
	*/
	server.on('request',function(request,response){
		
		var url = request.url;
		if(url ==='/'){
			//response.writeHead(響應(yīng)狀態(tài)碼，響應(yīng)頭對(duì)象): 發(fā)送一個(gè)響應(yīng)頭給請(qǐng)求。
			response.writeHead(200,{'Content-Type':'text/html'})
			// 如果url=‘/' ,讀取指定文件下的html文件，渲染到頁(yè)面。
			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文件，渲染到頁(yè)面。
			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文件，渲染到頁(yè)面。
			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文件，渲染到頁(yè)面。
			fs.readFile('./practice/notFount.html','utf-8',function(err,data){
				if(err){
					throw err ;
				}
				response.end(data);
			});
		}
		
	});

最終實(shí)現(xiàn)效果：

開啟nodejs服務(wù)器，在地址欄中輸入：127.0.0.0.1：9001或127.0.0.0.1：9001/login

如何通過(guò)nodejs服務(wù)器讀取HTML文件渲染到頁(yè)面

在地址欄中輸入：127.0.0.0.1：9001/index

如何通過(guò)nodejs服務(wù)器讀取HTML文件渲染到頁(yè)面

在地址欄中輸入：127.0.0.0.1：9001/其他內(nèi)容

如何通過(guò)nodejs服務(wù)器讀取HTML文件渲染到頁(yè)面

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何通過(guò)nodejs服務(wù)器讀取HTML文件渲染到頁(yè)面”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

分享標(biāo)題：如何通過(guò)nodejs服務(wù)器讀取HTML文件渲染到頁(yè)面
分享地址：http://muchs.cn/article14/jpiege.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、電子商務(wù)、建站公司、網(wǎng)站改版、關(guān)鍵詞優(yōu)化、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司