nodejs 서버를 사용하여 HTML 파일을 읽고 프런트 엔드에 렌더링하는 방법

이번에는 nodejs 서버를 사용하여 HTML 파일을 읽고 프론트엔드에 렌더링하는 방법을 알려드리겠습니다. nodejs 서버를 사용하여 HTML 파일을 읽고 렌더링할 때 주의해야 할 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

1. 3개의 백업 페이지를 각각 구현하면 됩니다.

코드 조각:

nbsp;html>


<meta> 
<title></title> 
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>


<h2 id="元素居中对齐">元素居中对齐</h2>
<p>水平居中块级元素 (如 p), 可以使用 margin: auto;</p>
<p>
 </p><p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>

notFount.html 페이지

nbsp;HTML>


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


<p>404 Not Fount</p>

2. 생성된 nodejs 서버 페이지를 수정하여 다른 주소의 요청에 대해 다른 응답 페이지를 만듭니다.

정의된 HTML 페이지를 읽으려면 URL 주소 판단에 파일 읽기 코드를 추가하세요.

Statement파일 시스템객체:

// 声明文件操作系统对象 
  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);
			});
		}
		
	});	
	</net.server></function></number></string></number></http.server></function>

최종 효과:

nodejs 서버를 열고 주소 표시줄에 다음을 입력하세요. 127.0.0.0.1:9001 또는 127.0.0.0.1:9001/login

주소창에 127.0.0.0.1:9001/index

주소창에 127.0을 입력하세요. 0.0.1: 9001/기타 콘텐츠

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

웹팩+react 개발 환경 구축 방법

React 패밀리 버킷 환경 구축 방법

위 내용은 nodejs 서버를 사용하여 HTML 파일을 읽고 프런트 엔드에 렌더링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!