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

Node.js 2018-12-30

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

index.html页面

代码片段：

rush:xhtml;"> <Meta charset="utf-8"> 菜鸟教程(runoob.com)

元素居中对齐

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

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

notFount.html页面

rush:xhtml;">

404 Not Fount

2.修改创建的nodejs 服务器页面，对不同地址的请求做出不同的响应页面。

在URL地址判断中添加，文件读取代码，以实现读取定义的html页面。

声明文件系统对象：

rush:xhtml;"> // 声明文件操作系统对象 var fs = require('fs');

实现文件内容读取并渲染到页面

rush:xhtml;"> 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); }); }

完整代码：

rush:xhtml;"> /**

1.使用 HTTP 服务器与客户端交互，需要 require('http')。
    声明http协议
*/
var http = require('http');


// 声明<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>操作系统对象
var fs = require('fs');
/**
2.<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>服务器对象
    1.通过 http.createServer([requestListener]) 创建<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>服务

    requestListener <Function>
    返回: <http.Server>
    返回<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>新建的 http.Server 实例。
    对于服务端来说，主<a href="https://www.jb51.cc/tag/yaozuo/" target="_blank" class="keywords">要做</a>三件事：
    1.接受客户端发出的请求。
    2.处理客户端发来的请求。
    3.向客户端发送响应。
*/

var server = http.createServer();

/**
3.声明端口号，开启服务。
    server.listen([port][,host][,backlog][,callback])

    port <number> ：端口号
    host <string> ：主机ip
    backlog <number> server.listen() <a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>的通用参数
    callback <Function> server.listen() <a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>的通用参数
    Returns: <net.Server>
    启动<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>TCP服务监听输入的port和host。

    如果port省略或是0，系统会随意分配<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>在'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 实例对象<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>request请求事件，该请求事件是所有请求的入口。
    任何请求都会触发改事件，然<a href="https://www.jb51.cc/tag/houzhixing/" target="_blank" class="keywords">后执行</a>事件对应的处理<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>。

    server.on('request',function(){
         console.log('收到客户端发出的请求.......');
    });
*/


/**
5.设置请求处理<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>。
    请求回调处理<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>需要接收两个参数。
    request ：request是<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>请求对象，可以拿到当前浏览器请求的一些信息。
        eg：请求路径，请求<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>等
    response： response是<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>响应对象，可以用来给请求发送响应。

*/
server.on('request',function(request,response){

    var url = request.url;
    if(url ==='/'){
        //response.writeHead(响应状态码，响应头对象): 发送<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>响应头给请求。
        response.writeHead(200,{'Content-Type':'text/html'})
        // 如果url=‘/',读取指定<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>下的html<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>，渲染到<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>。
        fs.readFile('./practice/login.html',data){
            if(err){
                throw err ;
            }
            response.end(data);
        });

    }else if(url === '/login'){
        response.writeHead(200,{'Content-Type':'text/html'});
        // 如果url=‘/',data){
            if(err){
                throw err ;
            }
            response.end(data);
        });
    }else if(url === '/index'){
        response.writeHead(200,读取指定<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>下的html<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>，渲染到<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>。
        fs.readFile('./practice/index.html',data){
            if(err){
                throw err ;
            }
            response.end(data);
        });
    }else{
        response.writeHead(200,读取指定<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>下的html<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>，渲染到<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>。
        fs.readFile('./practice/notFount.html',data){
            if(err){
                throw err ;
            }
            response.end(data);
        });
    }

});

最终实现效果：

开启nodejs服务器，在地址栏中输入：127.0.0.0.1：9001或127.0.0.0.1：9001/login