通过nodejs 服务器读取HTML文件渲染到页面的方法
更新时间：2018年05月17日 14:28:50 作者：笨笨熊咦
今天小编就为大家分享一篇通过nodejs 服务器读取HTML文件渲染到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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/其他内容
以上这篇通过nodejs 服务器读取HTML文件渲染到页面的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
node.js+postman实现模拟HTTP服务器与客户端交互
本文主要介绍了node.js+postman实现模拟HTTP服务器与客户端交互，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要介绍了node.js中使用q.js实现api的promise化,promise一个标准,它描述了异步调用的返回结果,包括正确返回结果和错误处理,需要的朋友可以参考下2014-09-09
最近研究了一下nodejs写接口,发现接口并不难写,这篇文章主要给大家介绍了关于如何通过node.js来写接口的相关资料,文中通过实例代码和图文介绍的非常详细,需要的朋友可以参考下2022-09-09
本篇文章主要介绍了node结合swig渲染摸板的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
本文给大家介绍实用node.js 制作网站前台和后台，非常的详尽，有需要的朋友可以参考下2014-11-11
vue3的响应式API大家应该都特别熟悉,平时大家都是在vue-cli或者vite创建的vue项目里面使用的这些响应式API,今天小编来和大家聊聊如何在node.js项目中使用vue的响应式API吧2024-11-11
本文给大家讲解的是简单的使用nodejs搭建邮件发送服务的一个实例，非常的好用，有需要的小伙伴可以参考下2017-03-03
在项目开发过程中,使用到vue框架技术,需要安装node下载项目依赖,本文主要介绍了nodejs版本管理工具nvm的安装与使用小结,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了nodejs nedb 封装库与使用方法,结合实例形式分析了nodejs nedb.js封装库的定义与使用技巧,需要的朋友可以参考下2020-02-02
本篇文章主要介绍了nodejs利用ajax实现网页无刷新上传图片实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论