nodejs处理图片、CSS、JS链接

看到页面上每一个链接都要写一个handler，像在页面显示图片，或者调用外部CSS、JS文件，每个链接都要写一个handler，觉得太麻烦，是否可以写个程序出来，能够自动识别图片、CSS、JS文件链接，以后要调用图片、外部CSS 、JS只需要关心前端怎么写，而不用再管后台。于是有了下面的程序。

index.js

var http = require("http");//获取http对象
var url = require("url");//获取url对象
var path = require("path");

var imgExt = new Array(".png",".jpg",".jpeg",".bmp",".gif");
var cssExt = new Array(".css");
var jsExt = new Array(".js");

Array.prototype.contain = function(obj){
    for(var i=0; i<this.length; i++){
        if(this[i] === obj)
            return true;
    }
    return false;
};

//http、url都是系统自带的模块，而下面的requestHandlers是我们手动编写的模块，对应当前目录下的requestHandlers.js文件
var requestHandlers = require("./requestHandlers");

//onRequest函数，用于处理http请求，不同的url请求交由不同的函数进行处理
function onRequest(request, response){
    var pathname = url.parse(request.url).pathname;//获取请求的URL

    //requestHandlers的handle属性又是一个对象，该对象包含多组属性：属性值，属性名对应uri，属性值对应处理函数，详见requestHandlers.js
    if(typeof requestHandlers.handle[pathname] === "function"){
        requestHandlers.handle[pathname](request, response);
    }
    //处理图片链接
    else if(typeConfirm(imgExt,request.url)){
        var ext = path.extname(path.basename(request.url)) ;
        console.log("ext:" + ext);
        requestHandlers.getImage(request, response, pathname);
    }
    //处理CSS链接
    else if(typeConfirm(cssExt,request.url)){
        requestHandlers.getCSS(request, response, pathname);
    }
    //处理JS链接
    else if(typeConfirm(jsExt,request.url)){
        requestHandlers.getJS(request, response, pathname);
    }
    else {
        console.log("No request handler found for " + pathname);
        response.writeHead(404, {"Content-Type": "text/html;charset=utf-8"});
        response.write("您访问的页面不存在！访问<a href='/'>首页</a>");
        response.end();
    }
}

http.createServer(onRequest).listen(8888);

function typeConfirm(type,url){
    var ext = path.extname(path.basename(url));
    if(type.contain(ext)){
        return true;
    }
    return false;
}

requestHandlers.js

var handle = {};
var formidable = require("formidable");
var fs = require("fs");

handle["/"] = start;
handle["/start"] = start;

//读取文件并输出
function start(request, response) {
  fs.readFile("html/index.html", function (err, html) {
    if (err) throw err;
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(html);
    response.end();
  });
}

function getImage(request, response, pathname){
    //这里需要去掉pathname最前面的"/"符号，fs.readFile()才能识别，所以使用pathname.substring(1)
    //或者在pathname前面加上表当前目录的“.”号，推荐使用后面这种
    fs.readFile("." + pathname, function (err, result) {
        if (err) throw err;
        response.writeHead(200, {"Content-Type": "image/jpeg"});
        response.write(result,"binary");
        response.end();
    });
}

function getCSS(request, response, pathname){
    //这里必须去掉pathname最前面的"/"符号，fs.readFile()才能识别，所以使用pathname.substring(1)
    fs.readFile("." + pathname, function (err, result) {
        if (err) throw err;
        response.writeHead(200, {"Content-Type": "text/css"});
        response.write(result);
        response.end();
    });
}

function getJS(request, response, pathname){
    //这里必须去掉pathname最前面的"/"符号，fs.readFile()才能识别，所以使用pathname.substring(1)
    fs.readFile("." + pathname, function (err, result) {
        if (err) throw err;
        response.writeHead(200, {"Content-Type": "text/javascript"});
        response.write(result);
        response.end();
    });
}

exports.handle = handle;
exports.start = start;
exports.getImage = getImage;
exports.getCSS = getCSS;
exports.getJS = getJS;

注意：

以引用图片为例，img的src属性里路径应该填相对项目根目录的路径。比如root为根目录，某个html文件的路径是root/web/test.html，而图片位于root/web/imges/test.png，则调用该图片文件时路径应该写成/web/images/test.png，而不是直接使用相对路径images/test.png 。