從0到1學習node（二）之搭建http伺服器

在上節的課前學習中，我們了解了一下不同模塊規範之間的聯繫與區別。本節我們正式開始node的學習，首先我們從搭建一個http伺服器，能運行簡單的程序開始說起。

1. hello world

最經典的hello world。首先我們創建一個server.js來保存我們的代碼：

console.log( 'hello world' );

在終端輸入node server.js運行:

node server.js

終端就會輸出 hello world 的字樣。可是我們一個node伺服器程序，總是要在瀏覽器上訪問的呀，這裡就要用到node里自帶的http模塊了：

我們再次在終端輸入node server.js運行，終端里會有輸出 server has started... 的字樣，表示伺服器已創建並正在運行，然後我們在瀏覽器上訪問127.0.0.1:3000，就可以看到頁面中輸出了hello world。

2. form表單

剛才我們只是在頁面中輸出了一段簡單的文本，現在我們要在頁面中呈現一個表單，可以讓用戶輸入信息並進行提交：

修改server.js中的內容，重新運行：

node server.js

刷新頁面后，我們發現頁面中輸出了3個文本框和1個提交按鈕。因為我們的程序只是呈現頁面，並沒有做任何其他的處理，因此在頁面中提交數據只是刷新當前頁面。

注意： 我們每次修改node中的任何代碼后，都要重新進行啟動。

2.1 獲取表單GET方式提交的數據

我們上面的代碼中使用的是POST方式，不過這裡要先討論使用GET方式提交過來的數據，我們先不考慮數據的安全性，只是學習如何獲取使用get方式提交過來的form表單數據，將post改為get，重新運行。

我們知道，使用get方式提交數據，會將數據作為URL參數傳遞過來，因此我們通過解析URL中的參數獲取到數據，這裡就用到了url模塊中的方法：

我們再次運行提交后就能在頁面中顯示出數據了。

url.parse是用來解析URL字元串的，並返回解析后的URL對象。若我們只輸出一下 url.parse(request.url) ：

result:

如果將第2個參數設置為true，則會將返回結果中的query屬性解析為一個對象，其他屬性不變；默認值為false，即query屬性是一個字元串：

result:

因此我們可以通過如下語句判斷是否有提交數據並獲取提交數據，然後再輸出到中即可：

2.2 獲取表單POST方式提交的數據

現在我們使用post方式來提交數據。因為POST請求一般都比較「重」 （用戶可能會輸入大量的內容），如果用阻塞的方式來處理處理，必然會導致用戶操作的阻塞。因此node將post數據拆分為很多小的數據塊，然後通過data事件（表示新的小數據塊到達了）和end事件傳遞這些小數據塊（表示所有的數據都已經接收完畢）。 所以，我們的思路應該是：在data事件中獲取數據塊，在end事件中操作數據。

這段代碼與上段代碼項目，主要有的幾個變化是：

1. 不再引入url模塊， 改用引入querystring模塊。因為我們不再對URL進行操作了，也沒必要引入了；

2. 使用request.method.toLowerCase()=='post'判斷當前是否有數據提交；
   

3. 在data事件進行數據的拼接，在end事件中進行的處理；

4. response.end()寫在了end事件內部，因為end事件是非同步操作，因此必須得數據輸出完成之後才能執行

我們在控制台中可以看出，postData是這樣的一個字元串：

'username=123&password=123&age=23&submit=submit';

因此我們使用query.parse將postData解析為對象類型，以便獲取提交過來的數據。

3. 路由

現在我們所有的邏輯都是在根目錄下進行的，沒有按照url區分，這裡我們按照功能進行路由拆分。以上面的post請求為例，我們可以拆分為：頁面初始化和form提交后的處理。

頁面初始化：

展示獲取的數據：

然後在server.js中進行路由選擇

我們任意改變URL地址，會看到輸出的每個地址的pathname（忽略/favicon.ico）：

因此我們就根據pathname進行路由，對路由進行方法映射：

如果匹配到路由 / ，則執行 starter.start(request, response) ；如果匹配到路由 /show ，則執行 uploader.upload(request, response) 。如果都沒匹配到，則顯示404。

4. 圖片上傳並顯示

在上面我們已經能成功提交數據了，這裡來講解如何進行圖片上傳並顯示。使用node自帶的模塊處理起來非常的麻煩，這裡我們使用別人已經開發好的formidable模塊進行編寫，它對解析上傳的文件數據做了很好的抽象。

npm install formidable --save-dev

在starter.js中，我們添加上file控制項：

4.1 圖片上傳

首先我們進行的是圖片上傳操作，首先我們要確保當前目錄中存在tmp和img目錄。在 uploader.js 中：

我們上傳圖片后跳轉到upload路徑，然後顯示出相應的信息：

我們再查看img目錄時，就會發現我們剛才上傳的照片了。

4.2 圖片顯示

將圖片上傳到伺服器后，怎樣才能把圖片顯示在瀏覽器上呢。這裡我們就使用到了fs模塊來讀取文件，創建一個shower.js來專門展示圖片：

然後在 server.js 中添加上 show 的路由映射：

最後在 upload.js 中進行圖片的引用：

5. 綜合

剛才學習了上傳數據和上傳圖片，這裡我們將其綜合一下，擬定一個題目：「設定用戶名密碼，並上傳頭像」。希望可以自己實現一下。

6. 介面的實現

在第2部分學習了GET和POST請求，那麼在這裡寫一個簡單json或jsonp介面應該不是什麼難事兒了吧。

創建一個 inter.js ：

在server中添加inter的引用和路由映射：

然後對 http://127.0.0.1:3000/inter 進行json請求或jsonp請求即可。

7. 總結

這節還是寫了不少的內容，最核心的就是講解如何搭建一個簡單的http伺服器，進行數據和圖片的提交與處理，在最後稍微講了下介面的編寫，後面有機會的話，會再具體講解下介面的編寫。

為大家提供一個查詢API的中文地址：https://pinggod.gitbooks.io/nodejs-doc-in-chinese/content