Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > js框架/js库

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

来源:中文源码网    浏览:189 次    日期:2024-05-14 09:03:38
【下载文档:  通过nodejs 服务器读取HTML文件渲染到页面的方法.txt 】


通过nodejs 服务器读取HTML文件渲染到页面的方法
1.分别简单实现三个备用页面。
login.html页面
index.html页面
代码片段:




菜鸟教程(runoob.com)



元素居中对齐


水平居中块级元素 (如 div), 可以使用 margin: auto;



注意: 使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。





notFount.html页面







404 Not Fount



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
返回:
返回一个新建的 http.Server 实例。
对于服务端来说,主要做三件事:
1.接受客户端发出的请求。
2.处理客户端发来的请求。
3.向客户端发送响应。
*/
var server = http.createServer();
/**
3.声明端口号,开启服务。
server.listen([port][, host][, backlog][, callback])
port :端口号
host :主机ip
backlog server.listen() 函数的通用参数
callback server.listen() 函数的通用参数
Returns:
启动一个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文件渲染到页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持中文源码网。

相关内容