1. 引言
前端程式猿主要關注的是頁面,你可能根本就用不到.net,java,php等後臺語言。
但是你製作出來的網頁總要執行、總要測試吧?——那就免不了用到http server。我先前都是用visual studio的,雖然很好用,功能很強大,但是我就開發一個html、javascript、css,幹嘛用這種傻大本粗的東西。開啟一次特別慢,佔記憶體特別厲害,安裝時C盤佔去好幾個G的空間。
後來閒來無事就換成了nodejs。不用安裝任何外掛,只需要手動建立三個小檔案(總共才2KB),執行即可,速度很快。感覺真的是非常簡單、輕量化。特此分享,知道的請略過,不喜勿噴!
2. 四步搭建
第一步,安裝nodejs:
不多廢話,到www.nodejs.org下載安裝即可。
第二步,建立兩個js檔案
建立兩個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 };
我在桌面上新建一個“demo1”的資料夾,把這兩個建立好的js檔案拷進去。
第三步,建立一個.bat命令檔案
還是那個“demo1”資料夾,再在這個資料夾中建立一個“startServer.bat”檔案,檔案內容其實就一句話:
node server.js
此時 demo1 資料夾中就有了三個檔案:
第四步,加入你的html檔案
還是那個“demo1”資料夾,我們需要在這個檔案中建立一個“test1”資料夾,然後我們加入一個index.html,等會兒做測試用。
重點需要注意:為什麼這裡會有一個“test1”資料夾呢?因為我們的“server.js”中配置的目錄就是“test1”。如果你看著不順眼,可以改掉,但是要保證兩者名稱一致。
如果我們在demo1中有好幾個測試專案,需要執行哪一個,可以開啟“server.js”修改配置即可,非常方便。
3. 一鍵啟動
經過了上面“漫長複雜”的配置過程,到這一步就簡單了。
如何“一鍵”啟動? 大家應該都能猜到了——startServer.bat——對,雙擊執行startServer.bat,控制檯即提示你有http server服務了。
埠號預設是“8080”,可以在“server.js”中修改,就在程式碼第一行。
4. 建立多個http server
我們們上面說了半天,就講了如何建立第一個http server,其實建立第二個、第三個、第四個……都一樣簡單。
把 demo1 資料夾中的三個檔案,考到你想要建立站點的位置。開啟 server.js 修改一下埠號和目錄名稱,執行startServer.bat就可以了。
想在那裡建立http server,就拷貝到哪裡,然後執行。不想再用http server了,直接刪掉那三個檔案就行。
簡單易用!
-------------------------------------------------------------------------------------------------------------
歡迎關注我的微博。
也歡迎關注我的教程:
《從設計到模式》《深入理解javascript原型和閉包系列》《微軟petshop4.0原始碼解讀視訊》《json2.js原始碼解讀視訊》
支援插入程式碼的富文字編輯器——wangEditor
-------------------------------------------------------------------------------------------------------------