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

零基礎搭建Node.js、Express、Ejs、Mongodb伺服器及應用開發入門
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

本文改自非魚的《【翻譯】前端開發人員入門指南,從零開始搭建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:\node\nodetest1>npm install

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

現在我們有了一個完整功能的App,並且可以執行了。我們試試看吧!確保你的當前目錄是nodetest1目錄,輸入:
複製程式碼 程式碼如下:
C:\node\nodetest1>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(由routes\index.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:\node\nodetest1\public\images\裡,但是實際訪問地址是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檔案。現在它看上去應該是這樣的:
複製程式碼 程式碼如下:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel=’stylesheet’ href=’/stylesheets/style.css’ />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>

應該很容易理解。
儲存檔案。在命令列視窗中按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 files\mongo或者隨便什麼地方,這不重要。我們把資料儲存在我們的nodetest1目錄裡。

第2步 – 執行Mongod和mongo

在我們的nodetest1目錄裡建立一個子目錄data,然後在命令列視窗中進入你的mongodb目錄的bin目錄裡,輸入:
複製程式碼 程式碼如下:
mongod –dbpath c:\node\nodetest1\data

你會看到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” : “[email protected]
}

你可以建立你自己的_id欄位的值,不過我覺得最好還是讓mongo來做這件事。它會為每一條記錄建立一個唯一的值。我們看看它是怎麼工作的。在mongo的視窗中,輸入:
複製程式碼 程式碼如下:
db.usercollection.insert({ “username” : “testuser1″, “email” : “[email protected]” })

重要提示:db就是我們上面建立的nodetest1資料庫,usercollection就是我們的collection,相當於一張資料表。注意我們不需要提前建立這個collection,它會在第一次使用的時候自動建立。好了,按下回車。如果一切順利,你會看到……什麼也沒有。這可不太好,輸入:
複製程式碼 程式碼如下:
db.usercollection.find().pretty()

如果你好奇的話,pretty方法會格式化輸出內容,新增換行縮排。它應該會顯示:
複製程式碼 程式碼如下:
{
    “_id” : ObjectId(“5202b481d2184d390cbf6eca”),
    “username” : “testuser1”,
    “email” : “[email protected]
}

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

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

現在我們有了一條資料,我們多新增點吧。在mongo視窗中輸入:
複製程式碼 程式碼如下:
newstuff = [{ “username” : “testuser2”, “email” : “[email protected]” }, { “username” : “testuser3”, “email” : “[email protected]” }]
db.usercollection.insert(newstuff);

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

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

第5步 – 把mongo連線到node

現在我們來建立一個頁面,把資料庫裡的記錄顯示成一個漂亮的表格。這是我們準備生成的HTML內容:
複製程式碼 程式碼如下:
<ul>
    <li><a href=”mailto:[email protected]”>testuser1</a></li>
    <li><a href=”mailto:[email protected]”>testuser2</a></li>
    <li><a href=”mailto:[email protected]”>testuser3</a></li>
</ul>

我知道這不太科學,不過你理解就好。我們只是為了建立一個簡單的資料庫讀寫程式,不是為了建立一個完整的網站。首先,我們往app.js(我們的程式的心臟和靈魂)裡新增一點內容,這樣才能接連上mongodb。開啟c:\node\nodetest1\app.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:\node\nodetest1\routes\idnex.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修改成這樣:
複製程式碼 程式碼如下:
<!DOCTYPE html>
<html>
<head>
<title>USERLIST</title>
<link rel=’stylesheet’ href=’/stylesheets/style.css’ />
</head>
<body>
<h1>Userlist</h1>
<ul>
<%
for(var i in userlist){
%>
<li><a href=”mailto:<%=userlist[i].email%>”><%=userlist[i].username%></a></li>
<% } %>
</ul>
</body>
</html>

儲存檔案,重啟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引擎。你可以Google一下Node Express Mongo Tutorial,看看接下來的內容。好好學習,天天向上。

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

您可能感興趣的文章:

Node.js包管理器Yarn的入門介紹與安裝Node.js的Web模板引擎ejs的入門使用教程Node.js Express配置入門教程詳解Java開發者結合Node.js程式設計入門教程Node.js入門教程:在windows和Linux上安裝配置Node.js圖文教程node.js入門教程Node.js簡單入門前傳

相關文章

前端開發 最新文章