通過nodejs 服務器讀取HTML文件渲染到頁面的方法

2024-05-06 16:44:28

字體：大中小

來源：轉載

供稿：網友

1.分別簡單實現三個備用頁面。

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頁面