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

最新推荐文章于 2024-05-27 21:00:00 发布

笨笨熊咦

最新推荐文章于 2024-05-27 21:00:00 发布

阅读量4.3w

点赞数 10

分类专栏： nodeJs 文章标签： html页面渲染

本文链接：https://blog.csdn.net/qq_41307443/article/details/79832427

版权

nodeJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

login.html页面
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

在地址栏中输入：127.0.0.0.1：9001/index

在地址栏中输入：127.0.0.0.1：9001/其他内容

笨笨熊咦

关注

10
点赞
踩
56

收藏

觉得还不错? 一键收藏
7
评论
通过nodejs 服务器读取HTML文件渲染到页面

1.分别简单实现三个备用页面。login.html页面index.html页面代码片段：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;style&gt;.center {
复制链接

扫一扫

专栏目录