零基礎建置Node.js、Express、Ejs、Mongodb伺服器及應用程式開發入門_node.js

本文改自非魚的《【翻譯】前端開發人員入門指南，從零開始搭建Node.js, Express, Jade, Mongodb伺服器》，之所以把Jade換成Ejs，是因為我覺得ejs比較符合WEB程式設計師的習慣，更確切地說應該是更符合PHP、ASP程式設計師的使用習慣。好了，廢話不多說，直接開始教學。

第1部 – 15分鐘安裝

如果你真的是從零開始學，那就花點時間先把環境搭建起來吧。這不難，我用的是Win8，所以這看起來跟那些用Mac和Ubuntu或者其它*nix系統的教程有點區別，不過大致是一樣的。

第1步 – 安裝Node.JS

這很容易，進入Node.js官方網站，點擊綠色的大Install按鈕，它會自動偵測你的系統並給你一個正確的安裝檔案的下載。 （如果沒有，點擊Download按鈕選擇你需要的下載）。運行安裝程序，這樣就好了。你已經裝上了Node.js，和NPM（Node包管理器）可以讓你很容易的安裝各種有用的套件到Node。

第2步 – 安裝Express

現在我們已經讓Node跑起來了，我們還需要一些東西讓我們能夠實際創建一個可用的網站。下面我們要安裝Express，這是一個把Node從一個原始的應用變成一個更像我們平常使用的Web伺服器的框架。我們需要從Express開始，因為我們需要它提供的scaffolding功能。我們輸入這麼個指令：

複製程式碼 程式碼如下:

c:node>npm install -g express

這樣Express就被正確的安裝到我們的Node了，而且已經設為全域可用的。你會在命令列視窗看到一堆輸出，大部分是http 304和GET請求，這是正常的。 Express應該已經裝好並可用了。

第3步 – 建立一個Express專案

我們準備使用Express和Ejs，但不是用來做CSS預處理的。我們會手寫一些CSS。我們要用Ejs或其它的模板引擎來處理Node和Express的資料。如果你會HTML的話，Ejs並不難。只要記住你需要集中精神，否則事情可能很容易出錯。

現在在同一個命令列視窗中輸入：

複製程式碼 程式碼如下:

c:node>express –sessions nodetest1

回車，你會看到這樣一堆東西：

複製程式碼 程式碼如下:

C:node>express --sessions nodetest1
create : nodetest1
create : nodetest1/package.json
create : nodetest1/app.js
create : nodetest1/routes
create : nodetest1/routes/index.js
create : nodetest1/routes/user.js
create : nodetest1/views
create : nodetest1/views/index.ejs
create : nodetest1/public/images
create : nodetest1/public/javascripts
create : nodetest1/public
create : nodetest1/public/stylesheets
create : nodetest1/public/stylesheets/style.css

install dependencies:
$ cd nodetest1 && npm install

run the app:
$ node app

第4步 – 編輯相依性

好了，我們現在有一些基本項目結構，但還沒完。你會注意到express的安裝過程在你的nodetest1目錄裡創建了一個叫做package.json的文件，用文字編輯器打開這個文件，它應該是長這樣的。

複製程式碼 程式碼如下:

{
    "name": "application-name",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "express": "3.4.8",
        "ejs": "*"
    }
}

這是一個標準的JSON格式文件，顯示了我們的應用和它的依賴。我們需要添加一點東西。例如對mongodb和Monk的呼叫。把dependencies部分改成這樣：

複製程式碼 程式碼如下:

"dependencies": {
    "express": "3.4.8",
    "ejs": "*",
    "mongodb": "*",
    "monk": "*"
}

第5步 – 安裝依賴

現在我們定義好了專案的依賴項。 *號會告訴NPM「安裝最新版本」。回到命令列窗口，進入nodetest1目錄，輸入：

複製程式碼 程式碼如下:

C:nodenodetest1>npm install

它會輸出一堆東西。這是因為它直接讀取我們修改過的JSON文件，識別其中的依賴項，並安裝必須的文件。當NPM安裝完成以後，你應該有了一個node_modules目錄，其中包含我們的專案所需的所有依賴檔案。

現在我們有了完整功能的App，而且可以運作了。我們試試看吧！確保你的目前目錄是nodetest1目錄，輸入：

複製程式碼 程式碼如下:

C:nodenodetest1>node app.js

回車後你會看到：

複製程式碼 程式碼如下:

Express server listening on port 3000

太棒了。開啟瀏覽器，輸入http://localhost:3000，你應該可以看到Express的一個歡迎頁了。

現在你已經運行起了自己的Node JS WebServer，帶有Express引擎和Ejs HTML模板引擎。不是很難啊，對吧？

第2部分 – 好了，我們來寫「Hello, World!」吧

開啟你常用的文字編輯器或其它IDE，我個人喜歡用Sublime Text。打開你的nodetest1目錄下的app.js，這個檔案就是你的App的核心了。你應該會看到這樣的內容：

複製程式碼 程式碼如下:

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

這只是定義了一堆JavaScript變數並指向了一些套件和依賴，node函數，和routes。 Routes（路由）相當於MVC中Models和Controllers的集合，它負責轉送要求並且也包含一些處理邏輯。 Express已經為我們創建了所有這些東西，我們現在先忽略user route，開始寫最頂層的route（由routesindex.js控制）。

在上面的這個文件的最後寫上：

複製程式碼 程式碼如下:

var app = express();

這句話至關重要。它實例化了Express並賦值給我們的app變數。接下來的內容都要使用這個變數來設定一堆Express的參數。繼續輸入：

複製程式碼 程式碼如下:

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

這裡設置了端口，尋找views的目錄，用什麼模板引擎來處理這些views，和一些其它的東西。也要注意最後一行，它告訴Express把public/目錄下的靜態檔案當作頂層目錄的檔案來託管。例如你的圖片目錄存放在c:nodenodetest1publicimages裡，但是實際存取位址是http://localhost:3000/images/。

注意：你需要把這一行

複製程式碼 程式碼如下:

app.use(express.bodyParser());

改成

複製程式碼 程式碼如下:

app.use(express.urlencoded());

這是為了忽略一些App運行過程中Node視窗裡面的警告訊息。主要是一些Express和它的插件未來可能的修改。如果你不做這個修改，程式執行時你會收到一堆某某函數即將過期的警告。

然後增加：

複製程式碼 程式碼如下:

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

這樣在開發過程中你可以做一些錯誤檢查。

繼續增加：

複製程式碼 程式碼如下:

app.get('/', routes.index);
app.get('/users', user.list);

這會告訴路由當一個URI請求到達時使用哪個Route來處理。注意user變數是在前面定義的，並且被map到了/routes/user.js，我們會呼叫這個檔案中定義的list函數。這裡可以顯示使用者列表。

繼續增加：

複製程式碼 程式碼如下:

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' app.get('port'));
});

最後，建立一個http server並且啟動它。這樣就差不多了。

（以上內容在新的express產生的模板裡是完整的，不需要自己寫進去）

現在，我們寫點有用的。我們不會直接在我們的index頁面裡寫“Hello World!”，我們藉這個機會學習如何使用route路由，同時學習一下Ejs引擎是如何運作的。在上面的app.js檔案的app.get()這段的後面加上一行：

app.get('/helloworld', routes.helloworld);
如果這時候你在命令列視窗按ctrl C結束app.js進程再重啟，然後用瀏覽器訪問http://localhost:3000/helloworld，你會得到一個很激動人心的node錯誤和命令列視窗中的一堆崩潰提示。這是因為我們還沒有修改路由去處理這個路徑。來做這個吧。在你的編輯器裡，進入routes目錄，找到index.js，打開它。它看起來應該是這樣的：

複製程式碼 程式碼如下:

/*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

我們來新增一個新頁面。我比較喜歡為每一個一級目錄建立一個獨立的route文件，但是現在我們還不打算在views下面為helloworld建立一個完整的目錄結構，所以我們暫時先使用index路由。在這個文件的最後加上：

複製程式碼 程式碼如下:

exports.helloworld = function(req, res){
  res.render('helloworld', { title: 'Hello, World!' });
};

它會負責處理這個URI請求，但現在我們還沒有一個實際的頁面讓res.render去render，這是Ejs負責的工作。進入你的views目錄，打開index.ejs，把它另存為helloworld.ejs檔。現在它看起來應該是這樣的：

複製程式碼 程式碼如下:

Welcome to

應該很容易理解。
儲存文件。在命令列視窗中按ctrl c中斷app.js，然後輸入node app.js重新啟動它。提示：當你修改一個ejs模板檔案的時候，你不需要重新啟動伺服器。但是當你改了一個js檔案的時候，像是app.js或是一個路由js文件，就必須要重啟伺服器才能看到效果了。

伺服器啟動後，附伺服器開啟http://localhost:3000/helloworld，應該可以看到這個漂亮的介面了：

好了！現在我們有了路由可以處理我們的模板，看到了我們想要的效果。接下來我們來做一些Model（資料層）。

第3部分 – 建立資料庫並讀取資料

第1步 – 安裝Mongodb

我們先關掉文字編輯器，回到命令列視窗。先用瀏覽器，開啟http://mongodb.org/，下載Mongo。點擊主選單裡的下載鏈接，找到適合你的系統的版本。對於64位元win8，下載64-bit *2008R2 版本。下載後是個zip文件，解壓縮到c:mongo或c:program filesmongo或隨便什麼地方，這不重要。我們把資料保存在我們的nodetest1目錄裡。

第2步 – 執行Mongod和mongo

在我們的nodetest1目錄裡建立一個子目錄data，然後在命令列視窗中進入你的mongodb目錄的bin目錄裡，輸入：

複製程式碼 程式碼如下:

mongod –dbpath c:nodenodetest1data

你會看到mongo伺服器啟動了，第一次啟動需要一點時間，因為它需要預先分配一些硬碟空間和一些它的任務。當它提示」[initandlisten] waiting for connections on port 27017″的時候，就搞定了。沒有別的需要做的了，伺服器已經在運作了。現在你需要另外打開一個命令列窗口，進入mongo目錄的bin目錄中，輸入

複製程式碼 程式碼如下:

mongo

你會看到一些類似這種提示：

複製程式碼 程式碼如下:

c:mongo>mongo
MongoDB shell version: 2.4.5
connecting to: test

這時候如果你看一下mongod的窗口，你會看到提示一個連接已接入。我們接下來會使用這個命令列的客戶端去手動處理一下我們的資料庫，不過這對我們的Web網站並不是必須的。

第3步 – 建立一個資料庫

不用擔心上面的連接到test的提示。那隻是當你沒有指定資料庫時mongo預設的一個資料庫，它甚至不會建立這個名叫test的資料庫，除非你增加一筆記錄進去。我們創建一個自己的資料庫吧。在mongo的命令列視窗中，輸入：

複製程式碼 程式碼如下:

use nodetest1

除非我們插入一些資料進去，否則它也不會建立這個資料庫。

第4步 – 增加一些數據

我最喜歡的MongoDB的特性就是它使用JSON作為資料結構，這意味著我對此非常的熟悉。如果你不熟悉JSON，先去讀點相關資料吧，這超出了本教學的範圍。

我們加入一些資料到collection。在這個教學裡，我們只有一個簡單的資料庫，留侯 username和email兩個欄位。我們的數據看起來是這樣的：

複製程式碼 程式碼如下:

{
    "_id" : 1234,
    "username" : "cwbuecheler",
    "email" : "cwbuecheler@nospam.com"
}

你可以創建你自己的_id字段的值，不過我覺得最好還是讓mongo來做這件事。它會為每一筆記錄建立一個唯一的值。我們看看它是怎麼工作的。在mongo的視窗中，輸入：

複製程式碼 程式碼如下:

db.usercollection.insert({ “username” : “testuser1″, “email” : “testuser1@testdomain.com” })

重要提示：db就是我們上面建立的nodetest1資料庫，usercollection就是我們的collection，相當於一張資料表。注意我們不需要事先建立這個collection，它會在第一次使用的時候自動建立。好了，按回車。如果一切順利，你會看到……什麼都沒有。這樣可不太好，輸入：

複製程式碼 程式碼如下:

db.usercollection.find().pretty()

如果你好奇的話，pretty方法會格式化輸出內容，加入換行縮排。它應該會顯示：

複製程式碼 程式碼如下:

{
    "_id" : ObjectId("5202b481d2184d390cbf6eca"),
    "username" : "testuser1",
    "email" : "testuser1@testdomain.com"
}

當然，你得到ObjectID應該是不同的，mongo會自動產生一個。如果你以前有使用過JSON介面的服務，現在是不是會覺得，哇，在web裡呼叫這個應該很簡單吧！嗯，你說對了。

提示：作為正式服務，你應該不希望所有的資料都存在最頂層。關於mongodb資料結構的設計，多看看Google吧。

現在我們有了一條數據，我們多加點吧。在mongo視窗中輸入：

複製程式碼 程式碼如下:

newstuff = [{ "username" : "testuser2", "email" : "testuser2@testdomain.com" }, { "username" : "testuser3", "email" : "testuser3@testdomain.com" }]
db.usercollection.insert(newstuff);

注意，我們透過一個資料一次傳遞了多條資料到collection。多簡單！再使用上面的find指令你會看到這三條資料。

現在我們來整合前面搭建的網頁伺服器和資料庫。

第5步 – 把mongo連接到node

現在我們來建立一個頁面，把資料庫裡的記錄顯示成一個漂亮的表格。這是我們準備好要產生的HTML內容：

複製程式碼 程式碼如下:

   
• testuser1

   
• testuser2

   
• testuser3

我知道這不太科學，不過你理解就好。我們只是為了建立一個簡單的資料庫讀寫程序，不是為了建立一個完整的網站。首先，我們在app.js（我們的程式的心臟和靈魂）裡加入一點內容，這樣才能接連上mongodb。打開c:nodenodetest1app.js，在頂部你會看到：

複製程式碼 程式碼如下:

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');

在它下面加上：

複製程式碼 程式碼如下:

// New Code
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/nodetest1');

這幾行會告訴app我們需要連接MongoDB，我們用Monk來負責這個連接，我們資料庫位置是localhost:27017/nodetest1。注意27017是mongodb的預設端口，如果因為某些原因你修改了端口，記錄這裡也要跟著改。現在看文件的底部：

複製程式碼 程式碼如下:

app.get('/', routes.index);
app.get('/users', user.list);
app.get('/helloworld', routes.helloworld);

下面新增一行：

複製程式碼 程式碼如下:

app.get('/userlist', routes.userlist(db));

這一行告訴app當使用者存取/userlist路徑的時候，我們需要把db變數傳遞到userlist路由。但是我們現在還沒有userlist路由，現在就去建立一個吧。

第6步 – 讀取mongo中的資料並顯示

用你的編輯器開啟c:nodenodetest1routesidnex.js，裡面有index和hello world兩個route，現在我們來加入第三個：

複製程式碼 程式碼如下:

exports.userlist = function(db) {
    return function(req, res) {
        var collection = db.get('usercollection');
        collection.find({},{},function(e,docs){
            res.render('userlist', {
                "userlist" : docs
            });
        });
    };
};

好吧，事情變得有點複雜了。這裡先定義了一個function，接收我們傳過來的db變量，然後呼叫一個跟前面兩個route一樣的page render。我們告訴它需要讀取usercollection，做一個查找，回傳的資料保存在docs變數中。一旦我們讀取到了內容，就呼叫render來渲染userlist模板頁面，把獲取到的docs變數當作模板引擎中的userlist變數傳遞進去。

接下來建立我們的Ejs模板。在views目錄下開啟index.ejs，另存為userlist.ejs，然後把它的HTML修改成這樣：

複製程式碼 程式碼如下:

Userlist

for(var i in userlist){
%>

• ”>

儲存文件，重啟node伺服器。希望你還記得怎麼重啟。開啟瀏覽器，造訪http://localhost:3000/userlist，你應該可以看到這樣的介面：

點提交按鈕，你會看到一個「can't post to /adduser」的錯誤。我們來修正它。

第2步 – 建立你的資料庫處理函數

跟之前一樣，我們修改app.js，然後是route文件，然後是ejs模板。不過，這裡不需要ejs模板，因為我們post以後會跳轉。在app.js的app.get()這段的後面加上一行：

複製程式碼 程式碼如下:

app.post('/adduser', routes.adduser(db));

注意這裡是app.post，不是app.get了。來設定route吧。回到routes/index.js，建立我們的資料庫插入函數。這個比較大，所以我建議你寫好註解。

複製程式碼 程式碼如下:

exports.adduser = function(db) {
    return function(req, res) {

        // Get our form values. These rely on the "name" attributes
        var userName = req.body.username;
        var userEmail = req.body.useremail;

        // Set our collection
        var collection = db.get('usercollection');

        // Submit to the DB
        collection.insert({
            "username" : userName,
            "email" : userEmail
        }, function (err, doc) {
            if (err) {
                // If it failed, return error
                res.send("There was a problem adding the information to the database.");
            }
            else {
                // If it worked, set the header so the address bar doesn't still say /adduser
                res.location("userlist");
                // And forward to success page
                res.redirect("userlist");
            }
        });

    }
}

顯然在真正的專案裡你還需要做很多驗證，例如使用者名稱和email不允許重複，email地址必須符合一定的格式規則。不過現在我們先不管這些。你可以看到，當插入資料庫完成時，我們讓使用者跳轉回userlist頁面，他們應該在那裡看到新插入的資料。

這是最好的方式嗎？

第3步 – 連接資料庫，寫入資料

確保你的mongod在運作！然後重啟你的node伺服器。用瀏覽器開啟http://localhost:3000/newuser。現在我們填入一些內容，點擊提交按鈕。如果順利，我們應該回到了userlist頁面，並且看到了剛剛新增的新資料。

現在我們正式的完成了使用Node.js，Exress，Ejs讀取和寫入Mongodb資料庫，我們已經是牛X的程式設計師了。

恭喜你，真的。如果你認真的看完了這篇教程，並且很認真的學習而不只是複製程式碼，你應該對routes, views，讀數據，寫入數據有了完整的概念。這是你用來開發任何其它完整的Web網站所需要的一切知識點！不管你怎麼想，我覺得這真是挺酷的。

第5部分 – 下一步

現在開始，你擁有無限的可能。你可以看看Mongoose, 另一個處理MongoDB資料庫的Node包。它比Monk更大一些，功能也更豐富。你還可以看看Stylus，一個Express的CSS引擎。你可以穀歌一下Node Express Mongo Tutorial，看看接下來的內容。好好學習，天天向上。

我希望這篇教學能夠有所幫助，我寫這篇文章是因為當我開始學習的時候我真的很需要這樣的東西，但是又真的找不到。如果你已經看到了這裡，非常感謝！