node实现封装服务器静态文件处理

先给自己一个做这的理由##

---

    很多小伙伴们可能会问，问什么要这样去做呢，express，koa不是已经做的很好了吗？我实际上也想这么回答。但是我总觉得有点不妥。很多的框架固然已经做的很好了。但是如果没有人去追根溯源的话这个东西怎么能越做越好呢。很多做技术的人习惯性的直接拿来去用。对于开发来说固然很nice。但对自身就我个人而言就舍本诼末了。解释完毕至少我自己觉得还行。

    我老老实实从底层开始写防止以后久了忘了。

实现思路

---

    通过http请求中不同的路径名去对应的静态文件区域读取对应的文件直接返回给客户端。
1.做一下前期准备工作。 这个简单不用太复杂跟着来就行。
2.创建项目文件夹
3.在文件夹中添加app.js 作为入口文件
4.创建静态文件夹 static 其中写一个简单的布局index.html，可以在其中引入css，js，与图片文件但是路径要对。
5.开始写。

1.首先搭建http服务，得到客户端的请求路径

---

var http = require('http');

http.createServer(function(req,res){
		console.log(req.url);
        res.writeHead(200,{"Content-Type":"text/html;charset=utf-8"});

        res.end("你好 node");

}).listen(8000);

/* 
1.至少可以说这个东西是最简单的。
2.此时我们就可以去访问这个 localhost:8000/index.html 了。
3.直接打印 "/index","/favicon.ico" 至于问什么是俩我就不解释了。
4.再一次访问   localhost:8000/index.html?asd 发现打印 "index.html?asd"
*/

    通过上面的代码我们发现了我们可以直接从req.url中直接拿到访问的路径。但是两种情况下 /favicon.ico 与后面的参数不是我们需要的， 对于 /favicon.ico 可以直接用 if 判断后过滤。而对于参数我们只能引入 url 模块了。

var http = require('http'),
    url = require('url')
http.createServer(function(req,res){
        //  获取所需要的路径
        var pathname  =  url.parse(req.url).pathname;
        if( pathname !="/favicon.ico"){
            console.log(pathname);
        }
        res.writeHead(200,{"Content-Type":"text/html;charset=utf-8"})
        res.end("你好 node");
}).listen(8000,function(){
    console.log("server is start");
});
/*
这次打印的一定是你想要的内容
*/

2.得到对应的文件返回

---

    得到了对应的路径呢 , 我们此时就需要通过路径读取文件 , 返回给客户端对应的文件了。此时就需要用到fs模块了。

var http = require('http'),
    url = require('url'),
    fs = require('fs')
http.createServer(function(req,res){
        //  获取所需要的路径
        var pathname  =  url.parse(req.url).pathname;
        if( pathname !="/favicon.ico"){
	        //开始读取文件并返回
            fs.readFile('static'+pathname,function(err,data){
                if(err){
                    console.log(err);
                    return false;
                }
                // 异步 I/O分阻塞，耗时。所以提上来。
                res.writeHead(200,{"Content-Type":"text/html;charset=utf-8"});
                res.write(data);
                res.end();
            })
        }
}).listen(8000,function(){
    console.log("server is start");
});
//   去访问一下  localhost:8000/index.html 

    这会儿你会发现你的 html 正常显示 ， 但是css ， 与 js 已经加载却并没有被应用。这也是我第一次踩的坑。 如果仔细一点的话， 可以看到我的 content-type错了。所有的都是 text/html。但是css应该是 text/css 。javascript应该是 text/javascript。 为此我们如果写一个方法，拿到对应的文件后缀名，并且已合适的 content-type 类型呢。试试看！！

var path = require('path');
module.exports = function(pathname){
    pathname = path.extname(pathname);
    switch (pathname){
    case ".html":
        return "text/html";
    case ".css":
        return "text/css";
    case ".js":
        return "text/javaScript"
    default:
    return "text/html";
    }
}

    然后在 app的文件中加载这个文件。直接将 Content-Type 中内容替换。 页面就可以正常加载了。css 与js文件也变得可用。

一只坑

---

    心细的同学会发现有一点不对的地方。就是这样的话图片的content-type也不对，别的文件也没有处理。 这样就说明这个代码有个大坑。
那么怎样解决呢？
    有心的同学们可以搜一下所有文件的后缀名以及对应的content-type 做成json文件可以引入通过对应逻辑便可以实现。剩下的稍微动点脑子就可做出来了。 就写到这了

结尾

---

    最后需要做的就是将它封装成好看，易用的样子。 自己可以试试哦每个人有自己方式。就不写了。