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

第1部分 – 15分鐘安裝

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

第1步 – 安裝Node.JS

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

第2步 – 安裝Express

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

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

第3步 – 創(chuàng)建一個Express項目

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

現在在同一個命令行窗口中輸入：

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

第4步 – 編輯依賴項

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

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

第5步 – 安裝依賴

現在我們定義好了項目的依賴項。*號會告訴NPM“安裝最新版本”?；氐矫钚写翱?，進入nodetest1目錄，輸入：

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

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

回車后你會看到：

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

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

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

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

這個只是定義了一堆JavaScript變量并指向了一些包和依賴，node函數，和routes。Routes（路由）相當于MVC中Models和Controllers的集合，它負責轉發(fā)請求并且也包含一些處理邏輯。Express已經為我們創(chuàng)建好了所有這些東西，我們現在先忽略user route，開始寫最頂層的route（由routes\index.js控制）。

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

這一句至關重要。它實例化了Express并賦值給我們的app變量。接下來的內容都要使用這個變量來配置一堆Express的參數。繼續(xù)輸入：

這里設置了端口，尋找views的目錄，用什么模板引擎來處理這些views，和一些其它的東西。還要注意最后一行，它告訴Express把public/目錄下的靜態(tài)文件作為頂層目錄的文件來托管。比如你的圖片目錄存放在c:\node\nodetest1\public\images\里，但是實際訪問地址是http://localhost:3000/images/。

注意：你需要把這一行

改成

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

然后增加：

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

繼續(xù)增加：

這會告訴路由當一個URI請求到達時使用哪個Route來處理。注意user變量是在前面定義的，并被map到了/routes/user.js，我們會調用這個文件中定義的list函數。這里可以顯示用戶列表。

繼續(xù)增加：

最后，創(chuàng)建一個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，打開它。它看上去應該是這樣的：

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

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

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

服務器啟動后，注服務器打開http://localhost:3000/helloworld，應該能看到這個漂亮的界面了：

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

第3部分 – 創(chuàng)建數據庫并讀取數據

第1步 – 安裝Mongodb

我們先關掉文本編輯器，回到命令行窗口。先用瀏覽器，打開http://mongodb.org/，下載Mongo。點擊主菜單里的下載鏈接，找到適合你的系統的版本。對于64位win8，下載64-bit *2008R2+版本。下載后是個zip文件，解壓到c:\mongo或者c:\program files\mongo或者隨便什么地方，這不重要。我們把數據保存在我們的nodetest1目錄里。

第2步 – 運行Mongod和mongo

在我們的nodetest1目錄里創(chuàng)建一個子目錄data，然后在命令行窗口中進入你的mongodb目錄的bin目錄里，輸入：

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

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

這時候如果你看一下mongod的窗口，你會看到提示一個連接已接入。我們接下來會使用這個命令行的客戶端去手工處理一下我們的數據庫，不過這對我們的Web站點并不是必須的。

第3步 – 創(chuàng)建一個數據庫

不用擔心上面的連接到test的提示。那只是當你沒有指定數據庫時mongo默認的一個數據庫，它甚至不會創(chuàng)建這個名叫test的數據庫，除非你增加一條記錄進去。我們創(chuàng)建一個自己的數據庫吧。在mongo的命令行窗口中，輸入：

除非我們插入一些數據進去，否則它也不會創(chuàng)建這個數據庫。

第4步 – 添加一些數據

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

我們添加一些數據到collection中。在這個教程里，我們只有一個簡單的數據庫，留侯 username和email兩個字段。我們的數據看起來是這個樣子的：

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

重要提示：db就是我們上面創(chuàng)建的nodetest1數據庫，usercollection就是我們的collection，相當于一張數據表。注意我們不需要提前創(chuàng)建這個collection，它會在第一次使用的時候自動創(chuàng)建。好了，按下回車。如果一切順利，你會看到……什么也沒有。這可不太好，輸入：

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

當然，你得到ObjectID應該是不一樣的，mongo會自動生成一個。如果你以前使用過JSON接口的服務，現在是不是會覺得，哇，在web里調用這個應該很簡單吧！嗯，你說對了。

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

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

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

現在我們來整合前面搭建的web服務器和數據庫。

第5步 – 把mongo連接到node

現在我們來建立一個頁面，把數據庫里的記錄顯示成一個漂亮的表格。這是我們準備生成的HTML內容：

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

在它下面添加：

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

下面添加一行：

這一行告訴app當用戶訪問/userlist路徑的時候，我們需要把db變量傳遞到userlist路由。但是我們現在還沒有userlist路由，現在就去創(chuàng)建一個吧。

第6步 – 讀取mongo中的數據并顯示

用你的編輯器打開c:\node\nodetest1\routes\idnex.js，里面有index和hello world兩個route，現在我們來添加第三個：

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

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

保存文件，重啟node服務器。希望你還記得怎么重啟。打開瀏覽器，訪問http://localhost:3000/userlist，你應該能看到這樣的界面：

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

第2步 – 創(chuàng)建你的數據庫處理函數

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

注意這里是app.post，不是app.get了。來設置route吧。回到routes/index.js，創(chuàng)建我們的數據庫插入函數。這個比較大，所以我建議你寫好注釋。

顯然在真正的項目里你還需要做很多驗證，比如用戶名和email不允許重復，email地址必須符合一定的格式規(guī)則。不過現在我們先不管這些。你可以看到，當插入數據庫完成時，我們讓用戶跳轉回userlist頁面，他們應該在那里看到新插入的數據。

這是最好的方式嗎？

第3步 – 連接數據庫，寫入數據

確保你的mongod在運行！然后重啟你的node服務器。用瀏覽器打開http://localhost:3000/newuser?，F在我們填入一些內容，點擊提交按鈕。如果順利，我們應該回到了userlist頁面，并且看到了剛剛添加的新數據。

現在我們正式的完成了使用Node.js，Exress，Ejs讀取和寫入Mongodb數據庫，我們已經是牛X的程序員了。

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

第5部分 – 下一步

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

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

最新評論