Node.js原生開發入門徹底教程

時間 2019-11-09

標籤 node.js node 原生開發入門徹底教程欄目 Node.js 简体版

原文原文鏈接

Node.js原生開發入門徹底教程

(Node+Vue+React+微信公衆號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座)html

1、關於

本篇文章參考了Node入門https://www.nodebeginner.org/index-zh-cn.html#about並從零到壹操做了一遍，感謝原做者，同時也強烈推薦你們移步到原文給予原文做者一個讚揚支持。node

2、代碼狀態

全部代碼爲春哥親測，所有正確經過。git

3、閱讀文章的對象

1.有編程基礎
2.想轉向Node.js後端的技術愛好者
3.Node.js新手github

4、進入正題

1.環境安裝

請直接移步Node.js官網,以下圖所示，直接點擊最新版下載並進行安裝。
web

Node.js安裝完畢後，打開終端，在終端分別輸入以下命令，檢測是否安裝成功。shell

Last login: Tue Jun 27 09:19:38 on console
liyuechun:~ yuechunli$ node -v
v8.1.3
liyuechun:~ yuechunli$ npm -v
5.0.3
liyuechun:~ yuechunli$

若是可以正確顯示node和npm的版本，說明Node.js安裝成功。數據庫

2."Hello World"

第一種輸出方式

好了，「廢話」很少說了，立刻開始咱們第一個Node.js應用：「Hello World」。npm

liyuechun:~ yuechunli$ node
> console.log("Hello World!");
Hello World!
undefined
> console.log("從零到壹全棧部落!");
從零到壹全棧部落!
undefined
> process.exit()
liyuechun:~ yuechunli$

在終端裏面直接輸入命令node，接下來輸入一句console.log("Hello World!"); ，回車，便可輸出Hello World。編程

簡單解釋一下爲何每一次打印後面都出現了一個undefined,緣由是由於你輸入js代碼並按下回車後，node會輸出執行完該代碼後的返回值，若是沒有返回值，就會顯示undefined，這個跟Chrome的調試工具類似。json

如上代碼所示，當輸入process.exit()並回車時，便可退出node模式。

第二種輸出方式

Last login: Thu Jun 29 18:17:27 on ttys000
liyuechun:~ yuechunli$ ls
Applications        Downloads        Pictures
Creative Cloud Files    Library            Public
Desktop            Movies
Documents        Music
liyuechun:~ yuechunli$ cd Desktop/
liyuechun:Desktop yuechunli$ mkdir nodejs入門
liyuechun:Desktop yuechunli$ pwd
/Users/liyuechun/Desktop
liyuechun:Desktop yuechunli$ cd nodejs入門/
liyuechun:nodejs入門 yuechunli$ pwd
/Users/liyuechun/Desktop/nodejs入門
liyuechun:nodejs入門 yuechunli$ vi helloworld.js
liyuechun:nodejs入門 yuechunli$ cat helloworld.js 
console.log("Hello World!");
liyuechun:nodejs入門 yuechunli$ node helloworld.js 
Hello World!
liyuechun:nodejs入門 yuechunli$

命令解釋：
ls：查看當前路徑下面的文件和文件夾。
pwd：查看當前所在路徑。
cd Desktop：切換到桌面。
mkdir nodejs入門：在當前路徑下面建立nodejs入門文件夾。
cd nodejs入門：進入nodejs入門文件夾。
vi helloworld.js：建立一個helloworld.js文件，並在文件裏面輸入console.log("Hello World!"),保存並退出。
cat helloworld.js：查看helloworld.js文件內容。
node helloworld.js：在當前路徑下面執行helloworld.js文件。

PS：若是對命令行不熟悉的童鞋，能夠用其餘編輯器建立一個helloworld.js文件，在裏面輸入console.log("Hello World！")，將文件保存到桌面，而後打開終端，直接將helloworld.js文件拖拽到終端，直接在終端中執行node helloworld.js便可在終端輸出Hello World!。

好吧，我認可這個應用是有點無趣，那麼下面咱們就來點「乾貨」。

下面咱們將經過VSCode來進行Node.js的編碼。

5、一個完整的基於Node.js的web應用

1.用例

咱們來把目標設定得簡單點，不過也要夠實際才行：

用戶能夠經過瀏覽器使用咱們的應用。
當用戶請求http://domain/start時，能夠看到一個歡迎頁面，頁面上有一個文件上傳的表單。
用戶能夠選擇一個圖片並提交表單，隨後文件將被上傳到http://domain/upload，該頁面完成上傳後會把圖片顯示在頁面上。

差很少了，你如今也能夠去Google一下，找點東西亂搞一下來完成功能。可是咱們如今先不作這個。

更進一步地說，在完成這一目標的過程當中，咱們不只僅須要基礎的代碼而無論代碼是否優雅。咱們還要對此進行抽象，來尋找一種適合構建更爲複雜的Node.js應用的方式。

2.應用不一樣模塊分析

咱們來分解一下這個應用，爲了實現上文的用例，咱們須要實現哪些部分呢？

咱們須要提供Web頁面，所以須要一個HTTP服務器
對於不一樣的請求，根據請求的URL，咱們的服務器須要給予不一樣的響應，所以咱們須要一個路由，用於把請求對應到請求處理程序（request handler）
當請求被服務器接收並經過路由傳遞以後，須要能夠對其進行處理，所以咱們須要最終的請求處理程序
路由還應該能處理POST數據，而且把數據封裝成更友好的格式傳遞給請求處理入程序，所以須要請求數據處理功能
咱們不只僅要處理URL對應的請求，還要把內容顯示出來，這意味着咱們須要一些視圖邏輯供請求處理程序使用，以便將內容發送給用戶的瀏覽器
最後，用戶須要上傳圖片，因此咱們須要上傳處理功能來處理這方面的細節

如今咱們就來開始實現之路，先從第一個部分--HTTP服務器着手。

6、構建應用的模塊

1.一個基礎的HTTP服務器

用VSCode建立一個server.js的文件，將文件保存到桌面的nodejs入門文件夾裏面。

在server.js文件裏面寫入如下內容：

let http = require("http");

http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello World");
  response.end();
}).listen(8888);

上面的代碼就是一個完整的Node.js服務器，以下圖所示，點擊VSCode左下腳按鈕，打開VSCode終端，在終端中輸入node server.js來進行驗證。

如上圖所示，一個基礎的HTTP服務器搞定。

2.HTTP服務器原理解析

上面的案例中，第一行請求（require）Node.js自帶的 http 模塊，而且把它賦值給 http 變量。

接下來咱們調用http模塊提供的函數： createServer 。這個函數會返回一個對象，這個對象有一個叫作 listen 的方法，這個方法有一個數值參數，指定這個HTTP服務器監聽的端口號。

我們暫時先無論 http.createServer 的括號裏的那個函數定義。

咱們原本能夠用這樣的代碼來啓動服務器並偵聽8888端口：

var http = require("http");

var server = http.createServer();
server.listen(8888);

這段代碼只會啓動一個偵聽8888端口的服務器，它不作任何別的事情，甚至連請求都不會應答。

3.進行函數傳遞

舉例來講，你能夠這樣作：

Last login: Thu Jun 29 20:03:25 on ttys001
liyuechun:~ yuechunli$ node
> function say(word) {
...   console.log(word);
... }
undefined
> 
> function execute(someFunction, value) {
...   someFunction(value);
... }
undefined
> 
> execute(say, "Hello");
Hello
undefined
>

請仔細閱讀這段代碼！在這裏，咱們把 say 函數做爲execute函數的第一個變量進行了傳遞。這裏傳遞的不是 say 的返回值，而是 say 自己！

這樣一來， say 就變成了execute 中的本地變量 someFunction ，execute能夠經過調用 someFunction() （帶括號的形式）來使用 say 函數。

固然，由於 say 有一個變量， execute 在調用 someFunction 時能夠傳遞這樣一個變量。

咱們能夠，就像剛纔那樣，用它的名字把一個函數做爲變量傳遞。可是咱們不必定要繞這個「先定義，再傳遞」的圈子，咱們能夠直接在另外一個函數的括號中定義和傳遞這個函數：

Last login: Thu Jun 29 20:04:35 on ttys001
liyuechun:~ yuechunli$ node
> function execute(someFunction, value) {
...   someFunction(value);
... }
undefined
> 
> execute(function(word){ console.log(word) }, "Hello");
Hello
undefined
>

咱們在 execute 接受第一個參數的地方直接定義了咱們準備傳遞給 execute 的函數。

用這種方式，咱們甚至不用給這個函數起名字，這也是爲何它被叫作匿名函數。

這是咱們和我所認爲的「進階」JavaScript的第一次親密接觸，不過咱們仍是得按部就班。如今，咱們先接受這一點：在JavaScript中，一個函數能夠做爲另外一個函數接收一個參數。咱們能夠先定義一個函數，而後傳遞，也能夠在傳遞參數的地方直接定義函數。

4.函數傳遞是如何讓HTTP服務器工做的

帶着這些知識，咱們再來看看咱們簡約而不簡單的HTTP服務器：

var http = require("http");

http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello World");
  response.end();
}).listen(8888);

console.log("請在瀏覽器中打開 http://127.0.0.1:8888...");

如今它看上去應該清晰了不少：咱們向 createServer 函數傳遞了一個匿名函數。

用這樣的代碼也能夠達到一樣的目的：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//請求（require）Node.js自帶的 http 模塊，而且把它賦值給 http 變量。
let http = require("http");

//箭頭函數
let onRequest = (request, response) => {
    response.writeHead(200, {"Content-Type": "text/plain"});
    response.write("Hello World");
    response.end();
}
//把函數看成參數傳遞
http.createServer(onRequest).listen(8888);

console.log("請在瀏覽器中打開 http://127.0.0.1:8888...");

也許如今咱們該問這個問題了：咱們爲何要用這種方式呢？

5.基於事件驅動的回調

事件驅動是Node.js原生的工做方式，這也是它爲何這麼快的緣由。

當咱們使用http.createServer方法的時候，咱們固然不僅是想要一個偵聽某個端口的服務器，咱們還想要它在服務器收到一個HTTP請求的時候作點什麼。

咱們建立了服務器，而且向建立它的方法傳遞了一個函數。不管什麼時候咱們的服務器收到一個請求，這個函數就會被調用。

這個就是傳說中的回調。咱們給某個方法傳遞了一個函數，這個方法在有相應事件發生時調用這個函數來進行回調。

咱們試試下面的代碼：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//請求（require）Node.js自帶的 http 模塊，而且把它賦值給 http 變量。
let http = require("http");

//箭頭函數
let onRequest = (request, response) => {
    console.log("Request received.");
    response.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"});
    response.write("添加小精靈微信(ershiyidianjian),加入全棧部落");
    response.end();
}
//把函數看成參數傳遞
http.createServer(onRequest).listen(8888);

console.log("Server has started.");
console.log("請在瀏覽器中打開 http://127.0.0.1:8888...");

在上圖中，當咱們執行node server.js命令時，Server has started.正常往下執行。

咱們看看當咱們在瀏覽器裏面打開http://127.0.0.1:8888時會發生什麼。

你們會發如今瀏覽器中打開http://127.0.0.1:8888時，在終端會輸出Request received.,瀏覽器會輸出添加小精靈微信(ershiyidianjian),加入全棧部落這一句話。

請注意，當咱們在服務器訪問網頁時，咱們的服務器可能會輸出兩次「Request received.」。那是由於大部分瀏覽器都會在你訪問 http://localhost:8888/ 時嘗試讀取 http://localhost:8888/favicon... )

6.服務器是如何處理請求的

好的，接下來咱們簡單分析一下咱們服務器代碼中剩下的部分，也就是咱們的回調函數onRequest()的主體部分。

當回調啓動，咱們的onRequest()函數被觸發的時候，有兩個參數被傳入：request 和response 。

它們是對象，你可使用它們的方法來處理HTTP請求的細節，而且響應請求（好比向發出請求的瀏覽器發回一些東西）。

因此咱們的代碼就是：當收到請求時，使用response.writeHead()函數發送一個HTTP狀態200和HTTP頭的內容類型（content-type），使用response.write()函數在HTTP相應主體中發送文本添加小精靈微信(ershiyidianjian),加入全棧部落。

最後，咱們調用 response.end() 完成響應。

目前來講，咱們對請求的細節並不在乎，因此咱們沒有使用 request 對象。

7.服務端模塊化

何爲模塊？

let http = require("http");
...
http.createServer(...);

在上面的代碼中，Node.js中自帶了一個叫作「http」的模塊，咱們在咱們的代碼中請求它並把返回值賦給一個本地變量。

這把咱們的本地變量變成了一個擁有全部 http 模塊所提供的公共方法的對象。

給這種本地變量起一個和模塊名稱同樣的名字是一種慣例，可是你也能夠按照本身的喜愛來：

var foo = require("http");
...
foo.createServer(...);

如何自定義模塊

將server.js文件的內容改爲下面的內容。

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//請求（require）Node.js自帶的 http 模塊，而且把它賦值給 http 變量。
let http = require("http");

//用一個函數將以前的內容包裹起來
let start = () => {
        //箭頭函數
    let onRequest = (request, response) => {
        console.log("Request received.");
        response.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"});
        response.write("添加小精靈微信(ershiyidianjian),加入全棧部落");
        response.end();
    }
    //把函數看成參數傳遞
    http.createServer(onRequest).listen(8888);

    console.log("Server has started.");
    console.log("請在瀏覽器中打開 http://127.0.0.1:8888...");
}

//導出`server`對象，對象中包含一個start函數
//對象格式爲
/**
 * {
 *    start
 * }
 */

//這個對象導入到其餘文件中便可使用，能夠用任意的名字來接收這個對象

exports.start = start;

在server.js當前的文件路徑下新建一個index.js文件。內容以下：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//從`server`模塊中導入server對象

let server = require('./server');

//啓動服務器
server.start();

以下圖所示運行index.js文件。

一切運行正常，上面的案例中，server.js就是自定義的模塊。

8.如何來進行請求的「路由」

咱們要爲路由提供請求的URL和其餘須要的GET及POST參數，隨後路由須要根據這些數據來執行相應的代碼（這裏「代碼」對應整個應用的第三部分：一系列在接收到請求時真正工做的處理程序）。

所以，咱們須要查看HTTP請求，從中提取出請求的URL以及GET/POST參數。這一功能應當屬於路由仍是服務器（甚至做爲一個模塊自身的功能）確實值得探討，但這裏暫定其爲咱們的HTTP服務器的功能。

咱們須要的全部數據都會包含在request對象中，該對象做爲onRequest()回調函數的第一個參數傳遞。可是爲了解析這些數據，咱們須要額外的Node.JS模塊，它們分別是url和querystring模塊。

url.parse(string).query
                                           |
           url.parse(string).pathname      |
                       |                   |
                       |                   |
                     ------ -------------------
http://localhost:8888/start?foo=bar&hello=world
                                ---       -----
                                 |          |
                                 |          |
              querystring.parse(string)["foo"]    |
                                            |
                         querystring.parse(string)["hello"]

固然咱們也能夠用querystring模塊來解析POST請求體中的參數，稍後會有演示。

如今咱們來給onRequest()函數加上一些邏輯，用來找出瀏覽器請求的URL路徑：

接下來我在終端執行node index.js命令，以下所示：

bogon:如何來進行請求的「路由」 yuechunli$ node index.js
Server has started.
請在瀏覽器中打開 http://127.0.0.1:8888...

我先在Safari瀏覽器中打開http://127.0.0.1:8888，瀏覽器展現效果以下：

控制檯效果以下：

bogon:如何來進行請求的「路由」 yuechunli$ node index.js
Server has started.
請在瀏覽器中打開 http://127.0.0.1:8888...
Request for / received.

接着我在Google瀏覽器裏面打開 http://127.0.0.1:8888... ，瀏覽器效果圖以下：

控制檯效果以下：

爲何在Safari瀏覽器中進行請求時，只打印了一個Request for / received.,而在Google瀏覽器中訪問時，會多打印一個Request for /favicon.ico received.，如上圖所示，緣由是由於在Google瀏覽器中，瀏覽器的緣由會去嘗試請求favicon.ico小圖標。

爲了演示效果，還有不受Google瀏覽器的favicon.ico請求的干擾，我接着在Safari裏面請求http://127.0.0.1:8888/start和http://127.0.0.1:8888/upload，咱們看看控制檯展現的內容是什麼。

bogon:如何來進行請求的「路由」 yuechunli$ node index.js
Server has started.
請在瀏覽器中打開 http://127.0.0.1:8888...
Request for /start received.
Request for /upload received.

好了，咱們的應用如今能夠經過請求的URL路徑來區別不一樣請求了--這使咱們得以使用路由（還未完成）來將請求以URL路徑爲基準映射處處理程序上。

在咱們所要構建的應用中，這意味着來自/start和/upload的請求可使用不一樣的代碼來處理。稍後咱們將看到這些內容是如何整合到一塊兒的。

如今咱們能夠來編寫路由了，創建一個名爲router.js的文件，添加如下內容：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

function route(pathname) {
  console.log("About to route a request for " + pathname);
}

exports.route = route;

如你所見，這段代碼什麼也沒幹，不過對於如今來講這是應該的。在添加更多的邏輯之前，咱們先來看看如何把路由和服務器整合起來。

首先，咱們來擴展一下服務器的start()函數，以便將路由函數做爲參數傳遞過去：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//請求（require）Node.js自帶的 http 模塊，而且把它賦值給 http 變量。
let http = require("http");

let url = require("url");


//用一個函數將以前的內容包裹起來
let start = (route) => {
        //箭頭函數
    let onRequest = (request, response) => {
        
        let pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");
        route(pathname);
        
        response.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"});
        response.write("添加小精靈微信(ershiyidianjian),加入全棧部落");
        response.end();
    }
    //把函數看成參數傳遞
    http.createServer(onRequest).listen(8888);

    console.log("Server has started.");
    console.log("請在瀏覽器中打開 http://127.0.0.1:8888...");
}

exports.start = start;

同時，咱們會相應擴展index.js，使得路由函數能夠被注入到服務器中：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//從`server`模塊中導入server對象

let server = require('./server');
let router = require("./router");

//啓動服務器
server.start(router.route);

在這裏，咱們傳遞的函數依舊什麼也沒作。

若是如今啓動應用（node index.js，始終記得這個命令行），隨後請求一個URL，你將會看到應用輸出相應的信息，這代表咱們的HTTP服務器已經在使用路由模塊了，並會將請求的路徑傳遞給路由：

bogon:如何來進行請求的「路由」 v2.0 yuechunli$ node index.js
Server has started.
請在瀏覽器中打開 http://127.0.0.1:8888...
Request for / received.
About to route a request for /

9.路由給真正的請求處理程序

如今咱們的HTTP服務器和請求路由模塊已經如咱們的指望，能夠相互交流了，就像一對親密無間的兄弟。

固然這還遠遠不夠，路由，顧名思義，是指咱們要針對不一樣的URL有不一樣的處理方式。例如處理/start的「業務邏輯」就應該和處理/upload的不一樣。

在如今的實現下，路由過程會在路由模塊中「結束」，而且路由模塊並非真正針對請求「採起行動」的模塊，不然當咱們的應用程序變得更爲複雜時，將沒法很好地擴展。

咱們暫時把做爲路由目標的函數稱爲請求處理程序。如今咱們不要急着來開發路由模塊，由於若是請求處理程序沒有就緒的話，再怎麼完善路由模塊也沒有多大意義。

應用程序須要新的部件，所以加入新的模塊 -- 已經無需爲此感到新奇了。咱們來建立一個叫作requestHandlers的模塊，並對於每個請求處理程序，添加一個佔位用函數，隨後將這些函數做爲模塊的方法導出：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

function start() {
  console.log("Request handler 'start' was called.");
}

function upload() {
  console.log("Request handler 'upload' was called.");
}

exports.start = start;
exports.upload = upload;

如今咱們將一系列請求處理程序經過一個對象來傳遞，而且須要使用鬆耦合的方式將這個對象注入到route()函數中。

咱們先將這個對象引入到主文件index.js中：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//從`server`模塊中導入server對象

let server = require('./server');
let router = require("./router");
let requestHandlers = require("./requestHandlers");

//對象構造
var handle = {}
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;

//啓動服務器
server.start(router.route, handle);

雖然handle並不只僅是一個「東西」（一些請求處理程序的集合），我仍是建議以一個動詞做爲其命名，這樣作可讓咱們在路由中使用更流暢的表達式，稍後會有說明。

正如所見，將不一樣的URL映射到相同的請求處理程序上是很容易的：只要在對象中添加一個鍵爲"/"的屬性，對應requestHandlers.start便可，這樣咱們就能夠乾淨簡潔地配置/start和"/"的請求都交由start這一處理程序處理。

在完成了對象的定義後，咱們把它做爲額外的參數傳遞給服務器，爲此將server.js修改以下：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//請求（require）Node.js自帶的 http 模塊，而且把它賦值給 http 變量。
let http = require("http");

let url = require("url");


//用一個函數將以前的內容包裹起來
let start = (route,handle) => {
        //箭頭函數
    let onRequest = (request, response) => {
        
        let pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");
        route(handle,pathname);

        response.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"});
        response.write("添加小精靈微信(ershiyidianjian),加入全棧部落");
        response.end();
    }
    //把函數看成參數傳遞
    http.createServer(onRequest).listen(8888);

    console.log("Server has started.");
    console.log("請在瀏覽器中打開 http://127.0.0.1:8888...");
}

exports.start = start;

這樣咱們就在start()函數裏添加了handle參數，而且把handle對象做爲第一個參數傳遞給了route()回調函數。

而後咱們相應地在route.js文件中修改route()函數：

有了這些，咱們就把服務器、路由和請求處理程序在一塊兒了。如今咱們啓動應用程序並在瀏覽器中訪問http://127.0.0.1:8888/start，如下日誌能夠說明系統調用了正確的請求處理程序：

bogon:路由給真正的請求處理程序 yuechunli$ node index.js
Server has started.
請在瀏覽器中打開 http://127.0.0.1:8888...
Request for /start received.
About to route a request for /start
Request handler 'start' was called.

而且在瀏覽器中打開http://127.0.0.1:8888/能夠看到這個請求一樣被start請求處理程序處理了：

bogon:路由給真正的請求處理程序 yuechunli$ node index.js
Server has started.
請在瀏覽器中打開 http://127.0.0.1:8888...
Request for / received.
About to route a request for /
Request handler 'start' was called.

10.讓請求處理程序做出響應

很好。不過如今要是請求處理程序可以向瀏覽器返回一些有意義的信息而並不是全是添加小精靈微信(ershiyidianjian),加入全棧部落，那就更好了。

這裏要記住的是，瀏覽器發出請求後得到並顯示的添加小精靈微信(ershiyidianjian),加入全棧部落信息還是來自於咱們server.js文件中的onRequest函數。

其實「處理請求」說白了就是「對請求做出響應」，所以，咱們須要讓請求處理程序可以像onRequest函數那樣能夠和瀏覽器進行「對話」。

11.很差的實現方式

修改requestHandler.js文件內容以下：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

function start() {
  console.log("Request handler 'start' was called.");
  return "Hello Start";
}

function upload() {
  console.log("Request handler 'upload' was called.");
  return "Hello Upload";
}

exports.start = start;
exports.upload = upload;

好的。一樣的，請求路由須要將請求處理程序返回給它的信息返回給服務器。所以，咱們須要將router.js修改成以下形式：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

function route(handle, pathname) {
  console.log("About to route a request for " + pathname);
  if (typeof handle[pathname] === 'function') {
    return handle[pathname]();
  } else {
    console.log("No request handler found for " + pathname);
    return "404 Not found";
  }
}

exports.route = route;

正如上述代碼所示，當請求沒法路由的時候，咱們也返回了一些相關的錯誤信息。

最後，咱們須要對咱們的server.js進行重構以使得它可以將請求處理程序經過請求路由返回的內容響應給瀏覽器，以下所示：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//請求（require）Node.js自帶的 http 模塊，而且把它賦值給 http 變量。
let http = require("http");

let url = require("url");

//用一個函數將以前的內容包裹起來
let start = (route,handle) => {
        //箭頭函數
    let onRequest = (request, response) => {
        
        let pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");
        route(handle,pathname);

        response.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"});
        var content = route(handle, pathname)
        response.write(content);
        response.end();
    }
    //把函數看成參數傳遞
    http.createServer(onRequest).listen(8888);

    console.log("Server has started.");
}

exports.start = start;

若是咱們運行重構後的應用，一切都會工做的很好：

請求http://localhost:8888/start,瀏覽器會輸出Hello Start。
請求http://localhost:8888/upload會輸出Hello Upload,
而請求http://localhost:8888/foo 會輸出404 Not found。

好，那麼問題在哪裏呢？簡單的說就是：當將來有請求處理程序須要進行非阻塞的操做的時候，咱們的應用就「掛」了。

沒理解？不要緊，下面就來詳細解釋下。

12.阻塞與非阻塞

咱們先不解釋這裏阻塞與非阻塞，咱們來修改下start請求處理程序，咱們讓它等待10秒之後再返回Hello Start。由於，JavaScript中沒有相似sleep()這樣的操做，因此這裏只可以來點小Hack來模擬實現。

讓咱們將requestHandlers.js修改爲以下形式：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

function start() {
  console.log("Request handler 'start' was called.");

  function sleep(milliSeconds) {
    var startTime = new Date().getTime();
    while (new Date().getTime() < startTime + milliSeconds);
  }

  sleep(10000);
  return "Hello Start";
}


function upload() {
  console.log("Request handler 'upload' was called.");
  return "Hello Upload";
}

exports.start = start;
exports.upload = upload;

上述代碼中，我先調用了upload()，會和此前同樣當即返回。當函數start()被調用的時候，Node.js會先等待10秒，以後纔會返回「Hello Start」。以下圖所示，等待中：

（固然了，這裏只是模擬休眠10秒，實際場景中，這樣的阻塞操做有不少，比方說一些長時間的計算操做等。）

接下來就讓咱們來看看，咱們的改動帶來了哪些變化。

如往常同樣，咱們先要重啓下服務器。爲了看到效果，咱們要進行一些相對複雜的操做（跟着我一塊兒作）：首先，打開兩個瀏覽器窗口或者標籤頁。在第一個瀏覽器窗口的地址欄中輸入http://localhost:8888/start，可是先不要打開它！

在第二個瀏覽器窗口的地址欄中輸入http://localhost:8888/upload，一樣的，先不要打開它！

接下來，作以下操做：在第一個窗口中（「/start」）按下回車，而後快速切換到第二個窗口中（「/upload」）按下回車。

注意，發生了什麼： /start URL加載花了10秒，這和咱們預期的同樣。可是，/upload URL竟然也花了10秒，而它在對應的請求處理程序中並無相似於sleep()這樣的操做！

這究竟是爲何呢？緣由就是start()包含了阻塞操做。形象的說就是「它阻塞了全部其餘的處理工做」。

這顯然是個問題，由於Node一貫是這樣來標榜本身的：「在node中除了代碼，全部一切都是並行執行的」。

這句話的意思是說，Node.js能夠在不新增額外線程的狀況下，依然能夠對任務進行並行處理 —— Node.js是單線程的。它經過事件輪詢（event loop）來實現並行操做，對此，咱們應該要充分利用這一點 —— 儘量的避免阻塞操做，取而代之，多使用非阻塞操做。

然而，要用非阻塞操做，咱們須要使用回調，經過將函數做爲參數傳遞給其餘須要花時間作處理的函數（比方說，休眠10秒，或者查詢數據庫，又或者是進行大量的計算）。

對於Node.js來講，它是這樣處理的：「嘿，probablyExpensiveFunction()（譯者注：這裏指的就是須要花時間處理的函數），你繼續處理你的事情，我（Node.js線程）先不等你了，我繼續去處理你後面的代碼，請你提供一個callbackFunction()，等你處理完以後我會去調用該回調函數的，謝謝！」

（若是想要了解更多關於事件輪詢細節，能夠閱讀Mixu的博文——理解node.js的事件輪詢。）

接下來，咱們會介紹一種錯誤的使用非阻塞操做的方式。

和上次同樣，咱們經過修改咱們的應用來暴露問題。

此次咱們仍是拿start請求處理程序來「開刀」。將其修改爲以下形式：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */


//咱們引入了一個新的Node.js模塊，child_process。之因此用它，是爲了實現一個既簡單又實用的非阻塞操做：exec()。
var exec = require("child_process").exec;

function start() {
  console.log("Request handler 'start' was called.");

  /**
   * exec()作了什麼呢？
   * 它從Node.js來執行一個shell命令。
   * 在本例子中，咱們用它來獲取當前目錄下全部的文件（「ls -lah」）
   * 而後，當`/start` URL請求的時候將文件信息輸出到瀏覽器中。
   * 下面的代碼很是直觀的： 
   * 建立了一個新的變量content（初始值爲「empty」）。
   * 執行「ls -lah」命令，將結果賦值給content，最後將content返回。
   */
  var content = "empty";

  exec("ls -lah", function (error, stdout, stderr) {
    content = stdout;
  });

  return content;
}

function upload() {
  console.log("Request handler 'upload' was called.");
  return "Hello Upload";
}

exports.start = start;
exports.upload = upload;

和往常同樣，咱們啓動服務器，而後訪問「http://localhost:8888/start」。

載入一個漂亮的web頁面，其內容爲「empty」。怎麼回事？

若是想要證實這一點，能夠將「ls -lah」換成好比「find /」這樣更耗時的操做來效果。

然而，針對瀏覽器顯示的結果來看，咱們並不滿意咱們的非阻塞操做，對吧？

好，接下來，咱們來修正這個問題。在這過程當中，讓咱們先來看看爲何當前的這種方式不起做用。

問題就在於，爲了進行非阻塞工做，exec()使用了回調函數。

在咱們的例子中，該回調函數就是做爲第二個參數傳遞給exec()的匿名函數：

function (error, stdout, stderr) {
  content = stdout;
}

如今就到了問題根源所在了：咱們的代碼是同步執行的，這就意味着在調用exec()以後，Node.js會當即執行 return content ；在這個時候，content仍然是「empty」，由於傳遞給exec()的回調函數還未執行到——由於exec()的操做是異步的。

咱們這裏「ls -lah」的操做實際上是很是快的（除非當前目錄下有上百萬個文件）。這也是爲何回調函數也會很快的執行到 —— 不過，無論怎麼說它仍是異步的。

爲了讓效果更加明顯，咱們想象一個更耗時的命令：「find /」，它在我機器上須要執行1分鐘左右的時間，然而，儘管在請求處理程序中，我把「ls -lah」換成「find /」，當打開/start URL的時候，依然可以當即得到HTTP響應 —— 很明顯，當exec()在後臺執行的時候，Node.js自身會繼續執行後面的代碼。而且咱們這裏假設傳遞給exec()的回調函數，只會在「find /」命令執行完成以後纔會被調用。

那究竟咱們要如何才能實現將當前目錄下的文件列表顯示給用戶呢？

好，瞭解了這種很差的實現方式以後，咱們接下來來介紹如何以正確的方式讓請求處理程序對瀏覽器請求做出響應。

13.以非阻塞操做進行請求響應

我剛剛提到了這樣一個短語 —— 「正確的方式」。而事實上一般「正確的方式」通常都不簡單。

不過，用Node.js就有這樣一種實現方案：函數傳遞。下面就讓咱們來具體看看如何實現。

到目前爲止，咱們的應用已經能夠經過應用各層之間傳遞值的方式（請求處理程序 -> 請求路由 -> 服務器）將請求處理程序返回的內容（請求處理程序最終要顯示給用戶的內容）傳遞給HTTP服務器。

如今咱們採用以下這種新的實現方式：相對採用將內容傳遞給服務器的方式，咱們此次採用將服務器「傳遞」給內容的方式。從實踐角度來講，就是將response對象（從服務器的回調函數onRequest()獲取）經過請求路由傳遞給請求處理程序。隨後，處理程序就能夠採用該對象上的函數來對請求做出響應。

原理就是如此，接下來讓咱們來一步步實現這種方案。

先從server.js開始：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//請求（require）Node.js自帶的 http 模塊，而且把它賦值給 http 變量。
let http = require("http");

let url = require("url");

//用一個函數將以前的內容包裹起來
let start = (route,handle) => {
        //箭頭函數
    let onRequest = (request, response) => {
        
        let pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");
        route(handle, pathname, response);
    }
    //把函數看成參數傳遞
    http.createServer(onRequest).listen(8888);

    console.log("Server has started.");
}

exports.start = start;

相對此前從route()函數獲取返回值的作法，此次咱們將response對象做爲第三個參數傳遞給route()函數，而且，咱們將onRequest()處理程序中全部有關response的函數調都移除，由於咱們但願這部分工做讓route()函數來完成。

下面就來看看咱們的router.js:

一樣的模式：相對此前從請求處理程序中獲取返回值，此次取而代之的是直接傳遞response對象。

若是沒有對應的請求處理器處理，咱們就直接返回「404」錯誤。

最後，咱們將requestHandler.js修改成以下形式：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */


//咱們引入了一個新的Node.js模塊，child_process。之因此用它，是爲了實現一個既簡單又實用的非阻塞操做：exec()。
var exec = require("child_process").exec;

function start(response) {
  console.log("Request handler 'start' was called.");

  exec("ls -lah", function (error, stdout, stderr) {
    response.writeHead(200, {"Content-Type": "text/plain"});
    response.write(stdout);
    response.end();
  });
}

function upload(response) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello Upload");
  response.end();
}

exports.start = start;
exports.upload = upload;

咱們的處理程序函數須要接收response參數，爲了對請求做出直接的響應。

start處理程序在exec()的匿名回調函數中作請求響應的操做，而upload處理程序仍然是簡單的回覆「Hello World」，只是此次是使用response對象而已。

這時再次咱們啓動應用（node index.js），一切都會工做的很好。

在瀏覽器中打開 http:127.0.0.0:8888/start 效果圖以下所示：

在瀏覽器中打開 http:127.0.0.0:8888/upload 效果圖以下所示：

若是想要證實/start處理程序中耗時的操做不會阻塞對/upload請求做出當即響應的話，能夠將requestHandlers.js修改成以下形式：

var exec = require("child_process").exec;

function start(response) {
  console.log("Request handler 'start' was called.");

  exec("find /",
    { timeout: 10000, maxBuffer: 20000*1024 },
    function (error, stdout, stderr) {
      response.writeHead(200, {"Content-Type": "text/plain"});
      response.write(stdout);
      response.end();
    });
}

function upload(response) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello Upload");
  response.end();
}

exports.start = start;
exports.upload = upload;

這樣一來，當請求http://localhost:8888/start的時候，會花10秒鐘的時間才載入，而當請求http://localhost:8888/upload的時候，會當即響應，縱然這個時候/start響應還在處理中。

14.更有用的場景

到目前爲止，咱們作的已經很好了，可是，咱們的應用沒有實際用途。

服務器，請求路由以及請求處理程序都已經完成了，下面讓咱們按照此前的用例給網站添加交互：用戶選擇一個文件，上傳該文件，而後在瀏覽器中看到上傳的文件。爲了保持簡單，咱們假設用戶只會上傳圖片，而後咱們應用將該圖片顯示到瀏覽器中。

好，下面就一步步來實現，鑑於此前已經對JavaScript原理性技術性的內容作過大量介紹了，此次咱們加快點速度。

要實現該功能，分爲以下兩步：首先，讓咱們來看看如何處理POST請求（非文件上傳），以後，咱們使用Node.js的一個用於文件上傳的外部模塊。之因此採用這種實現方式有兩個理由。

第一，儘管在Node.js中處理基礎的POST請求相對比較簡單，但在這過程當中仍是能學到不少。
第二，用Node.js來處理文件上傳（multipart POST請求）是比較複雜的，它不在本文的範疇，可是，如何使用外部模塊倒是在本書涉獵內容以內。

15.處理POST請求

考慮這樣一個簡單的例子：咱們顯示一個文本區（textarea）供用戶輸入內容，而後經過POST請求提交給服務器。最後，服務器接受到請求，經過處理程序將輸入的內容展現到瀏覽器中。

/start請求處理程序用於生成帶文本區的表單，所以，咱們將requestHandlers.js修改成以下形式：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */


//咱們引入了一個新的Node.js模塊，child_process。之因此用它，是爲了實現一個既簡單又實用的非阻塞操做：exec()。
var exec = require("child_process").exec;

function start(response) {
  console.log("Request handler 'start' was called.");

  let body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" content="text/html; '+
    'charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" method="post">'+
    '<textarea name="text" rows="5" cols="60"></textarea>'+
    '<input type="submit" value="Submit text" />'+
    '</form>'+
    '</body>'+
    '</html>';

    response.writeHead(200, {"Content-Type": "text/html;charset=utf-8"});
    response.write(body);
    response.end();
}

function upload(response) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"});
  response.write("Hello Upload");
  response.end();
}

exports.start = start;
exports.upload = upload;

瀏覽器請求http://127.0.0.1:8888/start,效果圖以下：

餘下的篇幅，咱們來探討一個更有趣的問題：當用戶提交表單時，觸發/upload請求處理程序處理POST請求的問題。

如今，咱們已是新手中的專家了，很天然會想到採用異步回調來實現非阻塞地處理POST請求的數據。

這裏採用非阻塞方式處理是明智的，由於POST請求通常都比較「重」 —— 用戶可能會輸入大量的內容。用阻塞的方式處理大數據量的請求必然會致使用戶操做的阻塞。

爲了使整個過程非阻塞，Node.js會將POST數據拆分紅不少小的數據塊，而後經過觸發特定的事件，將這些小數據塊傳遞給回調函數。這裏的特定的事件有data事件（表示新的小數據塊到達了）以及end事件（表示全部的數據都已經接收完畢）。

咱們須要告訴Node.js當這些事件觸發的時候，回調哪些函數。怎麼告訴呢？咱們經過在request對象上註冊監聽器（listener）來實現。這裏的request對象是每次接收到HTTP請求時候，都會把該對象傳遞給onRequest回調函數。

以下所示：

request.addListener("data", function(chunk) {
  // called when a new chunk of data was received
});

request.addListener("end", function() {
  // called when all chunks of data have been received
});

問題來了，這部分邏輯寫在哪裏呢？咱們如今只是在服務器中獲取到了request對象 —— 咱們並無像以前response對象那樣，把 request 對象傳遞給請求路由和請求處理程序。

在我看來，獲取全部來自請求的數據，而後將這些數據給應用層處理，應該是HTTP服務器要作的事情。所以，我建議，咱們直接在服務器中處理POST數據，而後將最終的數據傳遞給請求路由和請求處理器，讓他們來進行進一步的處理。

所以，實現思路就是：將data和end事件的回調函數直接放在服務器中，在data事件回調中收集全部的POST數據，當接收到全部數據，觸發end事件後，其回調函數調用請求路由，並將數據傳遞給它，而後，請求路由再將該數據傳遞給請求處理程序。

還等什麼，立刻來實現。先從server.js開始：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//請求（require）Node.js自帶的 http 模塊，而且把它賦值給 http 變量。
let http = require("http");

let url = require("url");

//用一個函數將以前的內容包裹起來
let start = (route,handle) => {
        //箭頭函數
    let onRequest = (request, response) => {
        
        let postData = "";
        let pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");

        request.setEncoding("utf8");

        request.addListener("data", function(postDataChunk) {
            postData += postDataChunk;
            console.log("Received POST data chunk '"+ postDataChunk + "'.");
        });

        request.addListener("end", function() {
            route(handle, pathname, response, postData);
        });
    }
    //把函數看成參數傳遞
    http.createServer(onRequest).listen(8888);

    console.log("Server has started.");
}

exports.start = start;

上述代碼作了三件事情：首先，咱們設置了接收數據的編碼格式爲UTF-8，而後註冊了「data」事件的監聽器，用於收集每次接收到的新數據塊，並將其賦值給postData 變量，最後，咱們將請求路由的調用移到end事件處理程序中，以確保它只會當全部數據接收完畢後才觸發，而且只觸發一次。咱們同時還把POST數據傳遞給請求路由，由於這些數據，請求處理程序會用到。

上述代碼在每一個數據塊到達的時候輸出了日誌，這對於最終生產環境來講，是很很差的（數據量可能會很大，還記得吧？），可是，在開發階段是頗有用的，有助於讓咱們看到發生了什麼。

我建議能夠嘗試下，嘗試着去輸入一小段文本，以及大段內容，當大段內容的時候，就會發現data事件會觸發屢次。

再來點酷的。咱們接下來在/upload頁面，展現用戶輸入的內容。要實現該功能，咱們須要將postData傳遞給請求處理程序，修改router.js爲以下形式：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

function route(handle, pathname, response, postData) {
  console.log("About to route a request for " + pathname);
  if (typeof handle[pathname] === 'function') {
    handle[pathname](response, postData);
  } else {
    console.log("No request handler found for " + pathname);
    response.writeHead(404, {"Content-Type": "text/plain"});
    response.write("404 Not found");
    response.end();
  }
}

exports.route = route;

而後，在requestHandlers.js中，咱們將數據包含在對upload請求的響應中：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */


//咱們引入了一個新的Node.js模塊，child_process。之因此用它，是爲了實現一個既簡單又實用的非阻塞操做：exec()。
var exec = require("child_process").exec;

function start(response, postData) {
  console.log("Request handler 'start' was called.");

  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" content="text/html; '+
    'charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" method="post">'+
    '<textarea name="text" rows="20" cols="60"></textarea>'+
    '<input type="submit" value="Submit text" />'+
    '</form>'+
    '</body>'+
    '</html>';

    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}

function upload(response, postData) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("You've sent: " + postData);
  response.end();
}

exports.start = start;
exports.upload = upload;

好了，咱們如今能夠接收POST數據並在請求處理程序中處理該數據了。

咱們最後要作的是：當前咱們是把請求的整個消息體傳遞給了請求路由和請求處理程序。咱們應該只把POST數據中，咱們感興趣的部分傳遞給請求路由和請求處理程序。在咱們這個例子中，咱們感興趣的其實只是text字段。

咱們可使用此前介紹過的querystring模塊來實現：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */


//咱們引入了一個新的Node.js模塊，child_process。之因此用它，是爲了實現一個既簡單又實用的非阻塞操做：exec()。
var exec = require("child_process").exec;
var querystring = require("querystring");

function start(response, postData) {
  console.log("Request handler 'start' was called.");

  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" content="text/html; '+
    'charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" method="post">'+
    '<textarea name="text" rows="20" cols="60"></textarea>'+
    '<input type="submit" value="Submit text" />'+
    '</form>'+
    '</body>'+
    '</html>';

    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}

function upload(response, postData) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("You've sent the text: "+querystring.parse(postData).text);
  response.end();
}

exports.start = start;
exports.upload = upload;

下面咱們瀏覽器中訪問http://127.0.0.1:8888/start,以下圖所示：

點擊Submit text按鈕，將跳轉到http://127.0.0.1:8888/upload,效果圖以下：

好了，這就是完整的POST請求。

15.處理文件上傳

最後，咱們來實現咱們最終的用例：容許用戶上傳圖片，並將該圖片在瀏覽器中顯示出來。

咱們經過它能學到這樣兩件事情：

如何安裝外部Node.js模塊
以及如何將它們應用到咱們的應用中

這裏咱們要用到的外部模塊是Felix Geisendörfer開發的node-formidable模塊。它對解析上傳的文件數據作了很好的抽象。其實說白了，處理文件上傳「就是」處理POST數據 —— 可是，麻煩的是在具體的處理細節，因此，這裏採用現成的方案更合適點。

使用該模塊，首先須要安裝該模塊。Node.js有它本身的包管理器，叫NPM。它可讓安裝Node.js的外部模塊變得很是方便。

首先在當前項目路徑下面經過npm init建立package.json文件:

PS:在終端輸入npm init後，一路回車便可。新增的package.json文件的內容以下：

{
  "author" : "liyuechun",
  "description" : "",
  "license" : "ISC",
  "main" : "index.js",
  "name" : "fileupload",
  "scripts" : {
    "test" : "echo \"Error: no test specified\" && exit 1"
  },
  "version" : "1.0.0"
}

接下來，在終端輸入以下命令安裝formidable外部模塊。
以下所示：

liyuechun:fileupload yuechunli$ ls
index.js                requestHandlers.js      server.js
package.json            router.js
liyuechun:fileupload yuechunli$ npm install formidable
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN fileupload@1.0.0 No description
npm WARN fileupload@1.0.0 No repository field.

+ formidable@1.1.1
added 1 package in 1.117s
liyuechun:fileupload yuechunli$

package.json文件變化以下：

{
  "author": "liyuechun",
  "description": "",
  "license": "ISC",
  "main": "index.js",
  "name": "fileupload",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "version": "1.0.0",
  "dependencies": {
    "formidable": "^1.1.1"
  }
}

項目總體變化以下圖所示：

如今咱們就能夠用formidable模塊了——使用外部模塊與內部模塊相似，用require語句將其引入便可：

let formidable = require("formidable");

這裏該模塊作的就是將經過HTTP POST請求提交的表單，在Node.js中能夠被解析。咱們要作的就是建立一個新的IncomingForm，它是對提交表單的抽象表示，以後，就能夠用它解析request對象，獲取表單中須要的數據字段。

node-formidable官方的例子展現了這兩部分是如何融合在一塊兒工做的：

let formidable = require('formidable'),
    http = require('http'),
    util = require('util');

http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // parse a file upload
    let form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload:\n\n');
      res.end(util.inspect({fields: fields, files: files}));
    });
    return;
  }

  // show a file upload form
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
    '<form action="/upload" enctype="multipart/form-data" '+
    'method="post">'+
    '<input type="text" name="title"><br>'+
    '<input type="file" name="upload" multiple="multiple"><br>'+
    '<input type="submit" value="Upload">'+
    '</form>'
  );
}).listen(8888);

若是咱們將上述代碼，保存到一個文件中，並經過node來執行，就能夠進行簡單的表單提交了，包括文件上傳。而後，能夠看到經過調用form.parse傳遞給回調函數的files對象的內容，以下所示：

received upload:

{ fields: { title: 'Hello World' },
  files:
   { upload:
      { size: 1558,
        path: './tmp/1c747974a27a6292743669e91f29350b',
        name: 'us-flag.png',
        type: 'image/png',
        lastModifiedDate: Tue, 21 Jun 2011 07:02:41 GMT,
        _writeStream: [Object],
        length: [Getter],
        filename: [Getter],
        mime: [Getter] } } }

爲了實現咱們的功能，咱們須要將上述代碼應用到咱們的應用中，另外，咱們還要考慮如何將上傳文件的內容（保存在./tmp目錄中）顯示到瀏覽器中。

咱們先來解決後面那個問題：對於保存在本地硬盤中的文件，如何才能在瀏覽器中看到呢？

顯然，咱們須要將該文件讀取到咱們的服務器中，使用一個叫fs的模塊。

咱們來添加/showURL的請求處理程序，該處理程序直接硬編碼將文件./tmp/test.png內容展現到瀏覽器中。固然了，首先須要將該圖片保存到這個位置才行。

將requestHandlers.js修改成以下形式：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

var querystring = require("querystring"),
    fs = require("fs");

function start(response, postData) {
  console.log("Request handler 'start' was called.");

  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" '+
    'content="text/html; charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" method="post">'+
    '<textarea name="text" rows="20" cols="60"></textarea>'+
    '<input type="submit" value="Submit text" />'+
    '</form>'+
    '</body>'+
    '</html>';

    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}

function upload(response, postData) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("You've sent the text: "+
  querystring.parse(postData).text);
  response.end();
}

function show(response, postData) {
  console.log("Request handler 'show' was called.");
  fs.readFile("./tmp/test.png", "binary", function(error, file) {
    if(error) {
      response.writeHead(500, {"Content-Type": "text/plain"});
      response.write(error + "\n");
      response.end();
    } else {
      response.writeHead(200, {"Content-Type": "image/png"});
      response.write(file, "binary");
      response.end();
    }
  });
}

exports.start = start;
exports.upload = upload;
exports.show = show;

咱們還須要將這新的請求處理程序，添加到index.js中的路由映射表中：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//從`server`模塊中導入server對象

let server = require('./server');
let router = require("./router");
let requestHandlers = require("./requestHandlers");

//對象構造
var handle = {}
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;
handle["/show"] = requestHandlers.show;

//啓動服務器
server.start(router.route, handle);

重啓服務器以後，經過訪問http://localhost:8888/show看看效果：

緣由是當前項目路徑下面沒有./tmp/test.png圖片，咱們在當前項目路徑下面添加tmp文件夾，在往裏面拖拽一張圖片，命名爲test.png。

再從新啓動服務器，訪問http://localhost:8888/show查看效果以下：

咱繼續，從server.js開始 —— 移除對postData的處理以及request.setEncoding （這部分node-formidable自身會處理），轉而採用將request對象傳遞給請求路由的方式：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

//請求（require）Node.js自帶的 http 模塊，而且把它賦值給 http 變量。
let http = require("http");

let url = require("url");

//用一個函數將以前的內容包裹起來
let start = (route,handle) => {
        //箭頭函數
    let onRequest = (request, response) => {
        
        let pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");
        route(handle, pathname, response, request);
    }
    //把函數看成參數傳遞
    http.createServer(onRequest).listen(8888);

    console.log("Server has started.");
}

exports.start = start;

接下來是 router.js —— 咱們再也不須要傳遞postData了，此次要傳遞request對象：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

function route(handle, pathname, response, request) {
  console.log("About to route a request for " + pathname);
  if (typeof handle[pathname] === 'function') {
    handle[pathname](response, request);
  } else {
    console.log("No request handler found for " + pathname);
    response.writeHead(404, {"Content-Type": "text/html"});
    response.write("404 Not found");
    response.end();
  }
}

exports.route = route;

如今，request對象就能夠在咱們的upload請求處理程序中使用了。node-formidable會處理將上傳的文件保存到本地/tmp目錄中，而咱們須要作的是確保該文件保存成./tmp/test.png。沒錯，咱們保持簡單，並假設只容許上傳PNG圖片。

這裏採用fs.renameSync(path1,path2)來實現。要注意的是，正如其名，該方法是同步執行的，也就是說，若是該重命名的操做很耗時的話會阻塞。這塊咱們先不考慮。

接下來，咱們把處理文件上傳以及重命名的操做放到一塊兒，以下requestHandlers.js所示：

/**
 * 從零到壹全棧部落，添加小精靈微信(ershiyidianjian)
 */

var querystring = require("querystring"),
    fs = require("fs"),
    formidable = require("formidable");

function start(response) {
  console.log("Request handler 'start' was called.");

  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" content="text/html; '+
    'charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" enctype="multipart/form-data" '+
    'method="post">'+
    '<input type="file" name="upload" multiple="multiple">'+
    '<input type="submit" value="Upload file" />'+
    '</form>'+
    '</body>'+
    '</html>';

    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}

function upload(response, request) {
  console.log("Request handler 'upload' was called.");

  var form = new formidable.IncomingForm();
  console.log("about to parse");
  form.parse(request, function(error, fields, files) {
    console.log("parsing done");
    fs.renameSync(files.upload.path, "./tmp/test.png");
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write("received image:<br/>");
    response.write("<img src='/show' />");
    response.end();
  });
}

function show(response) {
  console.log("Request handler 'show' was called.");
  fs.readFile("./tmp/test.png", "binary", function(error, file) {
    if(error) {
      response.writeHead(500, {"Content-Type": "text/plain"});
      response.write(error + "\n");
      response.end();
    } else {
      response.writeHead(200, {"Content-Type": "image/png"});
      response.write(file, "binary");
      response.end();
    }
  });
}

exports.start = start;
exports.upload = upload;
exports.show = show;

重啓服務器，瀏覽器訪問http://127.0.0.1:8888，效果圖以下：