码迷,mamicode.com
首页 > Web开发 > 详细

nodejs处理图片、CSS、JS链接

时间:2015-09-03 15:21:47      阅读:870      评论:0      收藏:0      [点我收藏+]

标签:

接触Nodejs不深,看到页面上每一个链接都要写一个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 。

nodejs处理图片、CSS、JS链接

标签:

原文地址:http://www.cnblogs.com/dige1993/p/4780219.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!