node.js当中路由设计和页面呈递的简单介绍

类似于Apache之类的传统服务器软件，都默认提供静态服务，有web容器和根目录的概念。而对于Node.js来说，没有web容器和根目录的概念，所以当使用node.js来呈递页面时，需要进行顶层路由设计，来把用户访问的url地址和文件联系在一起。
通过node.js创建了一个http服务器，它对前端页面的呈递方式与传统的apache这类的http服务器不同。它首先需要进行路由设计，即针对用户不同的url地址有不同的处理方式，对于前端页面采用fs模块读文件的方式，读取文件的内容，再设置对应的响应头，再把数据作为响应体返给该页面。
如下所示，在主文件1.js的同目录下有一个test的文件夹，里面有一个demo1.html页面。

这个文件当中为纯的html代码，没有外链的文件与图片。设计路由为if(req.url == '/fang'){}，即当用户在浏览器当中输入地址为http://192.168.156.1:3000/fang时，则呈递这个页面。则进入这个路由选择的if语句当中，开始用fs模块读这个demo1.html文件，在读文件结束的回调函数当中，设置响应头（状态码为200，返回体的渲染类型为html),最后再把文件内容作为响应体返回该页面。则1.js的示例代码为：

const http = require('http');
const fs = require('fs');
const path = require('path');
var server = http.createServer((req,res)=>{
    if(req.url == '/fang'){
        var targetDemo1 = path.join(__dirname,'./test/demo1.html');
        fs.readFile(targetDemo1,(err,data)=>{
            if(err) throw err;
            res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
            res.write(data);
            res.end();
        })
    }
});
server.listen(3000,'192.168.156.1');

如上所示，我们对于每一个所要呈递的前端页面都要通过这种方式，为其设计一条路由。如果我们所要呈递的html页面当中，有外链的图片或者外链的样式表，在该前端的代码里，这些外链文件都是通过相对路径的方式写入的。如下所示：

可以设计路由为if(req.url == '/yuan'){}，即当用户在浏览器当中输入地址为http://192.168.156.1:3000/yuan时，则呈递这个页面。则进入这个路由选择的if语句当中，开始用fs模块读这个demo2.html文件，在读文件结束的回调函数当中，设置响应头（状态码为200，返回体的渲染类型为html),最后再把文件内容作为响应体返回该页面。但由于node在呈递页面时没有文件夹的概念，当在解析文本的过程中，当遇到路径，是进行多次路由，多次渲染，当解析至<link rel="stylesheet" href="style.css">，node会去寻找req.url='/style.css'这个路由当中的内容，再渲染到这上面。当解析至<img src="7.png" alt="">，node会去寻找req.url='/7.png'这个路由当中的内容，再渲染到这上面。其中1.js当中的示例代码为：

const http = require('http');
const fs = require('fs');
const path = require('path');
var server = http.createServer((req,res)=>{
    if(req.url == '/fang'){
        var targetDemo1 = path.join(__dirname,'./test/demo1.html');
        fs.readFile(targetDemo1,(err,data)=>{
            if(err) throw err;
            res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
            res.write(data);
            res.end();
        });
    }else if(req.url == '/yuan'){
        var targetDemo2 = path.join(__dirname,'./test/demo2.html');
        fs.readFile(targetDemo2,(err,data)=>{
            if(err) throw err;
            res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
            res.write(data);
            res.end();
        });
    }else if(req.url == '/7.png'){
        var targetImg = path.join(__dirname,'./test/7.png');
        fs.readFile(targetImg,(err,data)=>{
            if(err) throw err;
            res.writeHead(200,{"Content-Type":"image/png"});
            res.write(data);
            res.end();
        })
    }else if(req.url == '/style.css'){
        var targetCss = path.join(__dirname,'./test/style.css');
        fs.readFile(targetCss,(err,data)=>{
            if(err) throw err;
            res.writeHead(200,{"Content-Type":"text/css"});
            res.write(data);
            res.end();
        });
    }else{
        res.writeHead(404,{"Content-Type":"text/html;charset=UTF8"});
        res.write('嘻嘻，没有这个页面！');
        res.end();
    }
});
server.listen(3000,'192.168.156.1');

其最后的页面呈递结果为：