标签:
接触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 。
标签:
原文地址:http://www.cnblogs.com/dige1993/p/4780219.html