實(shí)驗(yàn)簡(jiǎn)介
http模塊主要用于創(chuàng)建http server服務(wù)拨拓，此次實(shí)驗(yàn)還會(huì)講到url模塊和path模塊瘩燥，同時(shí)也會(huì)用到前面講過(guò)的fs模塊轧粟。url模塊用于解析url暂雹，path模塊用于處理和轉(zhuǎn)換文件路徑茫陆。
通過(guò)前面的實(shí)驗(yàn)，相信大家對(duì)Node.js模塊的使用已經(jīng)比較熟悉擎析。在這個(gè)實(shí)驗(yàn)中簿盅，我們就通過(guò)編寫一個(gè)簡(jiǎn)單的http server來(lái)學(xué)習(xí)http模塊。
一揍魂、創(chuàng)建http server
通過(guò)Node.js創(chuàng)建http server非常簡(jiǎn)單桨醋，示例代碼如下：
<pre>
/ 引入http模塊
var http = require('http');
// 創(chuàng)建http server
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
</pre>
運(yùn)行此文件：<pre>$ node demo.js</pre>
然后打開虛擬機(jī)瀏覽器，訪問(wèn)http://127.0.0.1:1337/现斋，
就會(huì)看到頁(yè)面上顯示了Hello World喜最，說(shuō)明我們的http server創(chuàng)建成功了。
當(dāng)然庄蹋，我們?cè)谶@個(gè)實(shí)驗(yàn)要做的比這個(gè)稍微復(fù)雜一點(diǎn)瞬内。
在這個(gè)實(shí)驗(yàn)中，我們會(huì)創(chuàng)建一個(gè)簡(jiǎn)單的http server限书，所有的代碼都放在app這個(gè)文件夾中虫蝶。首先，新建一個(gè)文app件夾倦西，在文件夾中新建server.js
文件能真，輸入如下代碼（其中的注釋為代碼解釋）：
<pre>
// 創(chuàng)建http server
//
// 加載所需模塊
var http = require('http');
var url = require('url');
var fs = require('fs');
// 設(shè)置ip和端口
// 實(shí)際應(yīng)用中，可以把這些寫到配置文件中
var host = '127.0.0.1',
port = 8080;
// 創(chuàng)建http server
function start(route, handle) {
// 參數(shù)
// route 判斷url是否存在，存在則調(diào)用handle處理粉铐，不存在則返回404
// handle 處理不同的url請(qǐng)求
// 處理request請(qǐng)求
function onRequest(req, res) {
// 使用url.parse()方法解析url
// 它會(huì)把url string轉(zhuǎn)化為一個(gè)object
// 這樣我們就可以很方便的獲取url中的host疼约、port、pathname等值了
var pathname = url.parse(req.url).pathname;
console.log('Request for ' + pathname + ' received.');
// 判斷并處理不同url請(qǐng)求
// 后面介紹此方法
route(handle, pathname, res, req);
}
// 使用http.createSserver()方法創(chuàng)建http server
// 并傳入onRequest()方法
// 然后使用listen()方法監(jiān)聽指定地址
http.createServer(onRequest).listen(port, host);
console.log('Server has started and listening on ' + host + ':' + port);
}
// 導(dǎo)出 start 方法
exports.start = start;
</pre>
在文件的最后蝙泼，我們導(dǎo)出了start方法程剥，以便在主程序中使用。你肯定注意到了汤踏，在代碼中使用了route()方法织鲸，它用于處理判斷請(qǐng)求的url是否存在，現(xiàn)在我們就來(lái)編寫這個(gè)方法茎活。
二、創(chuàng)建路由
在app文件夾中新建router.js琢唾，輸入如下代碼：
<pre>
var fs = require('fs');
// 路由函數(shù)
// 處理不同url的請(qǐng)求
// 并返回相應(yīng)內(nèi)容
function route(handle, pathname, res, req) {
console.log('About to route a request for ' + pathname);
// 判斷此url是否存在特定處理函數(shù)
// 存在則調(diào)用handle處理
// 不存在則返回404頁(yè)面
if (typeof handle[pathname] === 'function') {
// 后面介紹handle函數(shù)
handle[pathname](res, req);
} else {
console.log('No request handler found for ' + pathname);
// 讀取404頁(yè)面
// 所有頁(yè)面都存放在view文件夾下
var content = fs.readFileSync('./views/404.html');
res.writeHead(404, { 'Content-Type': 'text/html' });
res.write(content);
res.end();
}
}
// 導(dǎo)出 route 方法
exports.route = route;
</pre>
在此方法中载荔，調(diào)用了handle()方法，這個(gè)方法用于處理不同的url請(qǐng)求采桃。
在app文件夾中新建requestHandlers.js文件懒熙，輸入如下代碼：
<pre>
// 處理url請(qǐng)求
var fs = require('fs');
// home.html 主頁(yè)
function home(res) {
console.log('Request handler "home" was called.');
// 讀取home.html文件
var content = fs.readFileSync('./views/home.html');
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write(content);
res.end();
}
// about.html 關(guān)于頁(yè)面
function about(res) {
console.log('Request handler "about" was called.');
// 讀取about.html文件
var content = fs.readFileSync('./views/about.html');
res.write(200, { 'Content-Type': 'text/html' });
res.write(content);
res.end();
}
// 導(dǎo)出頁(yè)面處理函數(shù)
exports.home = home;
exports.about = about;
</pre>
這個(gè)方法比較簡(jiǎn)單，就是讀取文件普办，然后輸出到response工扎。
三、創(chuàng)建主程序
創(chuàng)建http server衔蹲，判斷url肢娘，處理url都寫完了，那么我們可以寫主程序來(lái)運(yùn)行http server了舆驶，在app文件夾新建main.js文件橱健，輸入如下代碼：
<pre>
// 主程序
// 引入server，router及requestHandler
var server = require('./server');
var router = require('./router');
var requestHandlers = require('./requestHandlers');
// 保存url處理方法
var handle = {};
handle['/'] = requestHandlers.home;
handle['/about'] = requestHandlers.about;
// 啟動(dòng)http server
server.start(router.route, handle);
</pre>
到此沙廉，所有的服務(wù)器代碼都寫完了拘荡，那么我們來(lái)添加代碼中用到的兩個(gè)html文件吧。
四撬陵、創(chuàng)建HTML文件
在app文件夾中新建views文件夾珊皿，在views文件夾中，新建home.html文件巨税、about.html文件和404.html文件蟋定。
文件中的代碼如下所示：
home.html文件：
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home page</title>
</head>
<body>
<p>home page</p>
</body>
</html>
</pre>
about.html文件：
<!DOCTYPE html>
<pre>
<html>
<head>
<meta charset="utf-8">
<title>About page</title>
</head>
<body>
<p>about page</p>
</body>
</html>
</pre>
404.html文件：
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>404 page</title>
</head>
<body>
<p>404 page not found</p>
</body>
</html>
</pre>
HTML文件的代碼寫得比較簡(jiǎn)單，可自由發(fā)揮草添。
那么現(xiàn)在我們來(lái)運(yùn)行程序吧：
<pre>$ node main.js</pre>
運(yùn)行成功后溢吻，打開虛擬機(jī)桌面的瀏覽器，
訪問(wèn)“http://127.0.0.1:8080” ==>就會(huì)看到頁(yè)面顯示“home page”，
訪問(wèn)“http://127.0.0.1:8080/about” ==>就會(huì)看到頁(yè)面顯示“about page”促王，
訪問(wèn)http://127.0.0.1:8080 ==>下的其他頁(yè)面就會(huì)看到頁(yè)面顯示404 page not found犀盟。
