js便簽筆記（14）——用nodejs搭建最簡(jiǎn)單、輕量化的http server
1. 引言
前端程序猿主要關(guān)注的是頁面，你可能根本就用不到.net，java，php等后臺(tái)語言。
但是你制作出來的網(wǎng)頁總要運(yùn)行、總要測(cè)試吧？——那就免不了用到http server。我先前都是用visual studio的，雖然很好用，功能很強(qiáng)大，但是我就開發(fā)一個(gè)html、javascript、css，干嘛用這種傻大本粗的東西。打開一次特別慢，占內(nèi)存特別厲害，安裝時(shí)C盤占去好幾個(gè)G的空間。
后來閑來無事就換成了nodejs。不用安裝任何插件，只需要手動(dòng)創(chuàng)建三個(gè)小文件（總共才2KB），運(yùn)行即可，速度很快。感覺真的是非常簡(jiǎn)單、輕量化。特此分享，知道的請(qǐng)略過，不喜勿噴！
2. 四步搭建
第一步，安裝nodejs：
不多廢話，到www.nodejs.org下載安裝即可。
第二步，創(chuàng)建兩個(gè)js文件
創(chuàng)建兩個(gè)js文件，分別保存為 server.js 和 mine.js ，代碼如下：
1 var PORT = 8080; //端口 2 var DIR = 'test1'; //用于存放html的目錄 3 4 var http = require('http'); 5 var url=require('url'); 6 var fs=require('fs'); 7 var mine=require('./mine').types; 8 var path=require('path'); 9 10 var server = http.createServer(function (request, response) { 11 var pathname = url.parse(request.url).pathname; 12 var realPath = path.join(DIR, pathname); 13 //console.log(realPath); 14 var ext = path.extname(realPath); 15 ext = ext ? ext.slice(1) : 'unknown'; 16 fs.exists(realPath, function (exists) { 17 if (!exists) { 18 response.writeHead(404, { 19 'Content-Type': 'text/plain' 20 }); 21 22 response.write("This request URL " + pathname + " was not found on this server."); 23 response.end(); 24 } else { 25 fs.readFile(realPath, "binary", function (err, file) { 26 if (err) { 27 response.writeHead(500, { 28 'Content-Type': 'text/plain' 29 }); 30 response.end(err); 31 } else { 32 var contentType = mine[ext] || "text/plain"; 33 response.writeHead(200, { 34 'Content-Type': contentType 35 }); 36 response.write(file, "binary"); 37 response.end(); 38 } 39 }); 40 } 41 }); 42 }); 43 server.listen(PORT); 44 console.log("Server runing at port: " + PORT + ".");
1 exports.types = { 2 "css": "text/css", 3 "gif": "image/gif", 4 "html": "text/html", 5 "ico": "image/x-icon", 6 "jpeg": "image/jpeg", 7 "jpg": "image/jpeg", 8 "js": "text/javascript", 9 "json": "application/json", 10 "pdf": "application/pdf", 11 "png": "image/png", 12 "svg": "image/svg+xml", 13 "swf": "application/x-shockwave-flash", 14 "tiff": "image/tiff", 15 "txt": "text/plain", 16 "wav": "audio/x-wav", 17 "wma": "audio/x-ms-wma", 18 "wmv": "video/x-ms-wmv", 19 "xml": "text/xml" 20 };
我在桌面上新建一個(gè)“demo1”的文件夾，把這兩個(gè)創(chuàng)建好的js文件拷進(jìn)去。
第三步，創(chuàng)建一個(gè).bat命令文件
還是那個(gè)“demo1”文件夾，再在這個(gè)文件夾中創(chuàng)建一個(gè)“startServer.bat”文件，文件內(nèi)容其實(shí)就一句話：
node server.js
此時(shí) demo1 文件夾中就有了三個(gè)文件：
第四步，加入你的html文件
還是那個(gè)“demo1”文件夾，我們需要在這個(gè)文件中創(chuàng)建一個(gè)“test1”文件夾，然后我們加入一個(gè)index.html，等會(huì)兒做測(cè)試用。
重點(diǎn)需要注意：為什么這里會(huì)有一個(gè)“test1”文件夾呢？因?yàn)槲覀兊摹皊erver.js”中配置的目錄就是“test1”。如果你看著不順眼，可以改掉，但是要保證兩者名稱一致。
如果我們?cè)赿emo1中有好幾個(gè)測(cè)試項(xiàng)目，需要運(yùn)行哪一個(gè)，可以打開“server.js”修改配置即可，非常方便。
3. 一鍵啟動(dòng)
經(jīng)過了上面“漫長(zhǎng)復(fù)雜”的配置過程，到這一步就簡(jiǎn)單了。
如何“一鍵”啟動(dòng)？ 大家應(yīng)該都能猜到了——startServer.bat——對(duì)，雙擊運(yùn)行startServer.bat，控制臺(tái)即提示你有http server服務(wù)了。
端口號(hào)默認(rèn)是“8080”，可以在“server.js”中修改，就在代碼第一行。
4. 創(chuàng)建多個(gè)http server
咱們上面說了半天，就講了如何創(chuàng)建第一個(gè)http server，其實(shí)創(chuàng)建第二個(gè)、第三個(gè)、第四個(gè)……都一樣簡(jiǎn)單。
把 demo1 文件夾中的三個(gè)文件，考到你想要?jiǎng)?chuàng)建站點(diǎn)的位置。打開 server.js 修改一下端口號(hào)和目錄名稱，運(yùn)行startServer.bat就可以了。
想在那里創(chuàng)建http server，就拷貝到哪里，然后運(yùn)行。不想再用http server了，直接刪掉那三個(gè)文件就行。
簡(jiǎn)單易用！
-------------------------------------------------------------------------------------------------------------
歡迎關(guān)注我的微博。
也歡迎關(guān)注我的教程：
《從設(shè)計(jì)到模式》《深入理解javascript原型和閉包系列》《微軟petshop4.0源碼解讀視頻》《json2.js源碼解讀視頻》
支持插入代碼的富文本編輯器——wangEditor
-------------------------------------------------------------------------------------------------------------
浙公網(wǎng)安備 33010602011771號(hào)