Maison > Article > interface Web > Comment utiliser le serveur nodejs pour lire des fichiers HTML et les restituer au front-end

Comment utiliser le serveur nodejs pour lire des fichiers HTML et les restituer au front-end

php中世界最好的语言original: 2018-05-28 15:50:497736parcourir

Cette fois, je vais vous montrer comment utiliser le serveur nodejs pour lire des fichiers HTML et les restituer au front-end. Quelles sont les précautions concernant l'utilisation du serveur nodejs pour lire des fichiers HTML et les restituer. le frontal. Ce qui suit est un cas pratique. Jetons un coup d'oeil.

1. Implémentez simplement trois pages de sauvegarde respectivement.

Extrait de code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>
<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 p), 可以使用 margin: auto;</p>
<p class="center">
 <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</p>
</body>
</html>

page 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>
<p class ="center" >404 Not Fount</p>
</body>
</html>

2. Modifiez la page du serveur nodejs créée et créez différentes pages de réponse aux demandes provenant de différentes adresses.

Ajoutez le code de lecture du fichier dans le jugement de l'adresse url pour lire la page html définie.

Déclarer l'objet système de fichiers :

// 声明文件操作系统对象 
  var fs = require('fs');

Implémenter la lecture et le rendu du contenu du fichier sur la page

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); 
  }); 
}

Code complet :

	/**
		
	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);
			});
		}
		
	});

Effet final :

Ouvrez le serveur nodejs et saisissez : 127.0.0.0.1:9001 ou 127.0.0.0 dans l'adresse bar.1:9001/login

Entrez dans la barre d'adresse : 127.0.0.0.1:9001/index

Saisissez dans la barre d'adresse : 127.0.0.0.1:9001/autre contenu

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. contenu passionnant, veuillez prêter attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Comment créer un environnement de développement webpack+react

Comment créer un environnement de bucket familial React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de comment revenir à la page d'accueil à partir de la page de partage du mini programme WeChatArticle suivant：Exemple de comment revenir à la page d'accueil à partir de la page de partage du mini programme WeChat

Articles Liés

Voir plus