零基礎(chǔ)搭建Node.js、Express、Ejs、Mongodb服務(wù)器及應(yīng)用開發(fā)入門
本文改自非魚的《【翻譯】前端開發(fā)人員入門指南,從零開始搭建Node.js, Express, Jade, Mongodb服務(wù)器》,之所以把Jade換成Ejs,是因?yàn)槲矣X得ejs更符合WEB編程人員的習(xí)慣,更確切說應(yīng)該是更符合PHP、ASP程序員的使用習(xí)慣。好了,廢話不多說,直接開始教程。
第1部分 – 15分鐘安裝
如果你真的是從零開始學(xué),那就花點(diǎn)時間先把環(huán)境搭建起來吧。這不難,我用的是Win8,所以這看上去跟那些用Mac和Ubuntu或者其它*nix系統(tǒng)的教程有點(diǎn)區(qū)別,不過大致是一樣的。
第1步 – 安裝Node.JS
這很容易,進(jìn)入Node.js官方網(wǎng)站,點(diǎn)擊綠色的大Install按鈕,它會自動檢測你的系統(tǒng)并給你一個正確的安裝文件的下載。(如果沒有,點(diǎn)擊Download按鈕選擇你需要的下載)。運(yùn)行安裝程序,這樣就好了。你已經(jīng)裝上了Node.js,和NPM(Node包管理器)可以讓你很容易的安裝各種有用的包到Node里。
第2步 – 安裝Express
現(xiàn)在我們已經(jīng)讓Node跑起來了,我們還需要一些東西讓我們能夠?qū)嶋H創(chuàng)建一個可用的站點(diǎn)。下面我們需要安裝Express,這是一個把Node從一個原始的應(yīng)用變成一個更像我們平時使用的Web服務(wù)器的框架。我們需要從Express開始,因?yàn)槲覀冃枰峁┑膕caffolding功能。我們輸入這么個命令:
c:\node>npm install -g express
這樣Express就被正確的安裝到我們的Node里了,并且已經(jīng)設(shè)為全局可用的。你會在命令行窗口看到一堆輸出,大部分是http 304和GET請求,這是正常的。Express應(yīng)該已經(jīng)裝好并可用了。
第3步 – 創(chuàng)建一個Express項(xiàng)目
我們準(zhǔn)備使用Express和Ejs,但是不是用來做CSS預(yù)處理的。我們會手寫一些CSS。我們要用Ejs或者其它的模板引擎來處理Node和Express的數(shù)據(jù)。如果你會HTML的話,Ejs并不難。只要記住你需要集中精神,否則事情可能很容易出錯。
現(xiàn)在在同一個命令行窗口中輸入:
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步 – 編輯依賴項(xiàng)
好了,我們現(xiàn)在有一些基本項(xiàng)目結(jié)構(gòu),但是還沒完。你會注意到express的安裝過程在你的nodetest1目錄里創(chuàng)建了一個叫package.json的文件,用文本編輯器打開這個文件,它應(yīng)該是長這樣的。
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.4.8",
"ejs": "*"
}
}
這是一個標(biāo)準(zhǔn)的JSON格式文件,表明了我們的應(yīng)用和它的依賴。我們需要添加一點(diǎn)東西。比如對mongodb和Monk的調(diào)用。把dependencies部分改成這樣:
"dependencies": {
"express": "3.4.8",
"ejs": "*",
"mongodb": "*",
"monk": "*"
}
第5步 – 安裝依賴
現(xiàn)在我們定義好了項(xiàng)目的依賴項(xiàng)。*號會告訴NPM“安裝最新版本”?;氐矫钚写翱冢M(jìn)入nodetest1目錄,輸入:
C:\node\nodetest1>npm install
它會輸出一堆東西。這是因?yàn)樗苯幼x取我們修改過的JSON文件,識別其中的依賴項(xiàng),并安裝必須的文件。當(dāng)NPM安裝完成以后,你應(yīng)該有了一個node_modules目錄,其中包含我們的項(xiàng)目所需要的所有依賴文件。
現(xiàn)在我們有了一個完整功能的App,并且可以運(yùn)行了。我們試試看吧!確保你的當(dāng)前目錄是nodetest1目錄,輸入:
C:\node\nodetest1>node app.js
回車后你會看到:
Express server listening on port 3000
太棒了。打開瀏覽器,輸入http://localhost:3000,你應(yīng)該能看到Express的一個歡迎頁面了。
現(xiàn)在你已經(jīng)運(yùn)行起了你自己的Node JS WebServer,帶有Express引擎和Ejs HTML模板引擎。不是很難啊,對吧?
第2部分 – 好了,我們來寫“Hello, World!”吧
打開你常用的文本編輯器或者其它IDE,我個人喜歡用Sublime Text。打開你的nodetest1目錄下的app.js,這個文件就是你的App的核心了。你應(yīng)該會看到這樣的內(nèi)容:
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
這個只是定義了一堆JavaScript變量并指向了一些包和依賴,node函數(shù),和routes。Routes(路由)相當(dāng)于MVC中Models和Controllers的集合,它負(fù)責(zé)轉(zhuǎn)發(fā)請求并且也包含一些處理邏輯。Express已經(jīng)為我們創(chuàng)建好了所有這些東西,我們現(xiàn)在先忽略user route,開始寫最頂層的route(由routes\index.js控制)。
在上面的這個文件的最后寫上:
var app = express();
這一句至關(guān)重要。它實(shí)例化了Express并賦值給我們的app變量。接下來的內(nèi)容都要使用這個變量來配置一堆Express的參數(shù)。繼續(xù)輸入:
// 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')));
這里設(shè)置了端口,尋找views的目錄,用什么模板引擎來處理這些views,和一些其它的東西。還要注意最后一行,它告訴Express把public/目錄下的靜態(tài)文件作為頂層目錄的文件來托管。比如你的圖片目錄存放在c:\node\nodetest1\public\images\里,但是實(shí)際訪問地址是http://localhost:3000/images/。
注意:你需要把這一行
app.use(express.bodyParser());
改成
app.use(express.urlencoded());
這是為了忽略一些App運(yùn)行過程中Node窗口里面的警告信息。主要是一些Express和它的插件未來可能的修改。如果你不做這個修改,程序運(yùn)行時你會收到一堆某某函數(shù)即將過期的警告。
然后增加:
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
這樣在開發(fā)過程中你可以做一些錯誤檢查。
繼續(xù)增加:
app.get('/', routes.index);
app.get('/users', user.list);
這會告訴路由當(dāng)一個URI請求到達(dá)時使用哪個Route來處理。注意user變量是在前面定義的,并被map到了/routes/user.js,我們會調(diào)用這個文件中定義的list函數(shù)。這里可以顯示用戶列表。
繼續(xù)增加:
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
最后,創(chuàng)建一個http server并且啟動它。這樣就差不多了。
(以上內(nèi)容在新的express生成的模板里是完整的,不需要自己寫進(jìn)去)
現(xiàn)在,我們寫點(diǎn)有用的。我們不會直接在我們的index頁面里寫“Hello World!”,我們借這個機(jī)會學(xué)習(xí)一下如何使用route路由,同時學(xué)習(xí)一下Ejs引擎是如何工作的。在上面的app.js文件的app.get()這一段的后面添加一行:
app.get('/helloworld', routes.helloworld);
如果這時候你在命令行窗口按ctrl+C結(jié)束app.js進(jìn)程再重啟,然后用瀏覽器訪問http://localhost:3000/helloworld,你會得到一個很激動人心的node錯誤和命令行窗口中的一堆崩潰提示。這是因?yàn)槲覀冞€沒有修改路由去處理這個路徑。來做這個吧。在你的編輯器里,進(jìn)入routes目錄,找到index.js,打開它。它看上去應(yīng)該是這樣的:
/*
* GET home page.
*/
exports.index = function(req, res){
res.render('index', { title: 'Express' });
};
我們來添加一個新頁面。我比較喜歡給每一個一級目錄創(chuàng)建一個獨(dú)立的route文件,但是現(xiàn)在我們還不打算在views下面給helloworld建一個完整的目錄結(jié)構(gòu),所以我們暫時先使用index路由。在這個文件的最后添加:
exports.helloworld = function(req, res){
res.render('helloworld', { title: 'Hello, World!' });
};
它會負(fù)責(zé)處理這個URI請求,但是現(xiàn)在我們還沒有一個實(shí)際的頁面讓res.render去render,這是Ejs負(fù)責(zé)的工作。進(jìn)入你的views目錄,打開index.ejs,把它另存為helloworld.ejs文件?,F(xiàn)在它看上去應(yīng)該是這樣的:
<!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>
應(yīng)該很容易理解。
保存文件。在命令行窗口中按ctrl+c中斷app.js,然后輸入node app.js重新啟動它。提示:當(dāng)你修改一個ejs模板文件的時候,你不需要重啟服務(wù)器。但是當(dāng)你改了一個js文件的時候,比如app.js或者一個路由js文件,就必須要重啟服務(wù)器才能看到效果了。
服務(wù)器啟動后,注服務(wù)器打開http://localhost:3000/helloworld,應(yīng)該能看到這個漂亮的界面了:
好了!現(xiàn)在我們有了路由可以處理我們的模板,看到了我們想要的效果。接下來我們來做一些Model(數(shù)據(jù)層)。
第3部分 – 創(chuàng)建數(shù)據(jù)庫并讀取數(shù)據(jù)
第1步 – 安裝Mongodb
我們先關(guān)掉文本編輯器,回到命令行窗口。先用瀏覽器,打開http://mongodb.org/,下載Mongo。點(diǎn)擊主菜單里的下載鏈接,找到適合你的系統(tǒng)的版本。對于64位win8,下載64-bit *2008R2+版本。下載后是個zip文件,解壓到c:\mongo或者c:\program files\mongo或者隨便什么地方,這不重要。我們把數(shù)據(jù)保存在我們的nodetest1目錄里。
第2步 – 運(yùn)行Mongod和mongo
在我們的nodetest1目錄里創(chuàng)建一個子目錄data,然后在命令行窗口中進(jìn)入你的mongodb目錄的bin目錄里,輸入:
mongod –dbpath c:\node\nodetest1\data
你會看到mongo服務(wù)器啟動了,第一次啟動需要一點(diǎn)時間,因?yàn)樗枰A(yù)分配一些硬盤空間和一些其它的任務(wù)。當(dāng)它提示”[initandlisten] waiting for connections on port 27017″的時候,就搞定了。沒有什么別的需要做的了,服務(wù)器已經(jīng)在運(yùn)行了?,F(xiàn)在你需要另外打開一個命令行窗口,進(jìn)入mongo目錄的bin目錄中,輸入
mongo
你會看到一些類似這種提示:
c:\mongo>mongo
MongoDB shell version: 2.4.5
connecting to: test
這時候如果你看一下mongod的窗口,你會看到提示一個連接已接入。我們接下來會使用這個命令行的客戶端去手工處理一下我們的數(shù)據(jù)庫,不過這對我們的Web站點(diǎn)并不是必須的。
第3步 – 創(chuàng)建一個數(shù)據(jù)庫
不用擔(dān)心上面的連接到test的提示。那只是當(dāng)你沒有指定數(shù)據(jù)庫時mongo默認(rèn)的一個數(shù)據(jù)庫,它甚至不會創(chuàng)建這個名叫test的數(shù)據(jù)庫,除非你增加一條記錄進(jìn)去。我們創(chuàng)建一個自己的數(shù)據(jù)庫吧。在mongo的命令行窗口中,輸入:
use nodetest1
除非我們插入一些數(shù)據(jù)進(jìn)去,否則它也不會創(chuàng)建這個數(shù)據(jù)庫。
第4步 – 添加一些數(shù)據(jù)
我最喜歡的MongoDB的特性就是它使用JSON作為數(shù)據(jù)結(jié)構(gòu),這就意味著我對此非常的熟悉。如果你不熟悉JSON,先去讀點(diǎn)相關(guān)資料吧,這超出了本教程的范圍。
我們添加一些數(shù)據(jù)到collection中。在這個教程里,我們只有一個簡單的數(shù)據(jù)庫,留侯 username和email兩個字段。我們的數(shù)據(jù)看起來是這個樣子的:
{
"_id" : 1234,
"username" : "cwbuecheler",
"email" : "cwbuecheler@nospam.com"
}
你可以創(chuàng)建你自己的_id字段的值,不過我覺得最好還是讓mongo來做這件事。它會為每一條記錄創(chuàng)建一個唯一的值。我們看看它是怎么工作的。在mongo的窗口中,輸入:
db.usercollection.insert({ “username” : “testuser1″, “email” : “testuser1@testdomain.com” })
重要提示:db就是我們上面創(chuàng)建的nodetest1數(shù)據(jù)庫,usercollection就是我們的collection,相當(dāng)于一張數(shù)據(jù)表。注意我們不需要提前創(chuàng)建這個collection,它會在第一次使用的時候自動創(chuàng)建。好了,按下回車。如果一切順利,你會看到……什么也沒有。這可不太好,輸入:
db.usercollection.find().pretty()
如果你好奇的話,pretty方法會格式化輸出內(nèi)容,添加換行縮進(jìn)。它應(yīng)該會顯示:
{
"_id" : ObjectId("5202b481d2184d390cbf6eca"),
"username" : "testuser1",
"email" : "testuser1@testdomain.com"
}
當(dāng)然,你得到ObjectID應(yīng)該是不一樣的,mongo會自動生成一個。如果你以前使用過JSON接口的服務(wù),現(xiàn)在是不是會覺得,哇,在web里調(diào)用這個應(yīng)該很簡單吧!嗯,你說對了。
提示:作為正式服務(wù),你應(yīng)該不希望所有的數(shù)據(jù)都存在最頂層。關(guān)于mongodb數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì),多看看Google吧。
現(xiàn)在我們有了一條數(shù)據(jù),我們多添加點(diǎn)吧。在mongo窗口中輸入:
newstuff = [{ "username" : "testuser2", "email" : "testuser2@testdomain.com" }, { "username" : "testuser3", "email" : "testuser3@testdomain.com" }]
db.usercollection.insert(newstuff);
注意,我們通過一個數(shù)據(jù)一次傳遞了多條數(shù)據(jù)到collection。多簡單!再使用上面的find命令你會看到這三條數(shù)據(jù)。
現(xiàn)在我們來整合前面搭建的web服務(wù)器和數(shù)據(jù)庫。
第5步 – 把mongo連接到node
現(xiàn)在我們來建立一個頁面,把數(shù)據(jù)庫里的記錄顯示成一個漂亮的表格。這是我們準(zhǔn)備生成的HTML內(nèi)容:
<ul>
<li><a href="mailto:testuser1@testdomain.com">testuser1</a></li>
<li><a href="mailto:testuser2@testdomain.com">testuser2</a></li>
<li><a href="mailto:testuser3@testdomain.com">testuser3</a></li>
</ul>
我知道這不太科學(xué),不過你理解就好。我們只是為了建立一個簡單的數(shù)據(jù)庫讀寫程序,不是為了建立一個完整的網(wǎng)站。首先,我們往app.js(我們的程序的心臟和靈魂)里添加一點(diǎn)內(nèi)容,這樣才能接連上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來負(fù)責(zé)這個連接,我們數(shù)據(jù)庫位置是localhost:27017/nodetest1。注意27017是mongodb的默認(rèn)端口,如果因?yàn)槟承┰蚰阈薷牧硕丝冢涗涍@里也要跟著改。現(xiàn)在看文件的底部:
app.get('/', routes.index);
app.get('/users', user.list);
app.get('/helloworld', routes.helloworld);
下面添加一行:
app.get('/userlist', routes.userlist(db));
這一行告訴app當(dāng)用戶訪問/userlist路徑的時候,我們需要把db變量傳遞到userlist路由。但是我們現(xiàn)在還沒有userlist路由,現(xiàn)在就去創(chuàng)建一個吧。
第6步 – 讀取mongo中的數(shù)據(jù)并顯示
用你的編輯器打開c:\node\nodetest1\routes\idnex.js,里面有index和hello world兩個route,現(xiàn)在我們來添加第三個:
exports.userlist = function(db) {
return function(req, res) {
var collection = db.get('usercollection');
collection.find({},{},function(e,docs){
res.render('userlist', {
"userlist" : docs
});
});
};
};
好吧,事情變得有點(diǎn)復(fù)雜了。這里首先定義了一個function,接收我們傳過來的db變量,然后調(diào)用一個跟前面兩個route一樣的page render。我們告訴它需要讀取usercollection,做一個查找,返回的數(shù)據(jù)保存在docs變量中。一旦我們讀取到了內(nèi)容,就調(diào)用render來渲染userlist模板頁面,把獲取到的docs變量作為模板引擎中的userlist變量傳遞進(jìn)去。
接下來建立我們的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服務(wù)器。希望你還記得怎么重啟。打開瀏覽器,訪問http://localhost:3000/userlist,你應(yīng)該能看到這樣的界面:
點(diǎn)提交按鈕,你會看到一個“can't post to /adduser”的錯誤。我們來修正它。
第2步 – 創(chuàng)建你的數(shù)據(jù)庫處理函數(shù)
跟以前一樣,我們修改app.js,然后是route文件,然后是ejs模板。不過,這里不需要ejs模板,因?yàn)槲覀僷ost以后會跳轉(zhuǎn)。在app.js的app.get()這一段的后面添加一行:
app.post('/adduser', routes.adduser(db));
注意這里是app.post,不是app.get了。來設(shè)置route吧。回到routes/index.js,創(chuàng)建我們的數(shù)據(jù)庫插入函數(shù)。這個比較大,所以我建議你寫好注釋。
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");
}
});
}
}
顯然在真正的項(xiàng)目里你還需要做很多驗(yàn)證,比如用戶名和email不允許重復(fù),email地址必須符合一定的格式規(guī)則。不過現(xiàn)在我們先不管這些。你可以看到,當(dāng)插入數(shù)據(jù)庫完成時,我們讓用戶跳轉(zhuǎn)回userlist頁面,他們應(yīng)該在那里看到新插入的數(shù)據(jù)。
這是最好的方式嗎?
第3步 – 連接數(shù)據(jù)庫,寫入數(shù)據(jù)
確保你的mongod在運(yùn)行!然后重啟你的node服務(wù)器。用瀏覽器打開http://localhost:3000/newuser?,F(xiàn)在我們填入一些內(nèi)容,點(diǎn)擊提交按鈕。如果順利,我們應(yīng)該回到了userlist頁面,并且看到了剛剛添加的新數(shù)據(jù)。
現(xiàn)在我們正式的完成了使用Node.js,Exress,Ejs讀取和寫入Mongodb數(shù)據(jù)庫,我們已經(jīng)是牛X的程序員了。
恭喜你,真的。如果你認(rèn)真的看完了這篇教程,并且很認(rèn)真的學(xué)習(xí)而不只是復(fù)制代碼,你應(yīng)該對routes, views,讀數(shù)據(jù),寫入數(shù)據(jù)有了完整的概念。這是你用來開發(fā)任何其它完整的Web網(wǎng)站所需要的一切知識點(diǎn)!不管你怎么想,我覺得這真挺酷的。
第5部分 – 下一步
現(xiàn)在開始,你擁有無限的可能。你可以看看Mongoose, 另一個處理MongoDB數(shù)據(jù)庫的Node包。它比Monk更大一些,功能也更豐富。你還可以看看Stylus,一個Express的CSS引擎。你可以Google一下Node Express Mongo Tutorial,看看接下來的內(nèi)容。好好學(xué)習(xí),天天向上。
我希望這篇教程能夠有所幫助,我寫這個是因?yàn)楫?dāng)我開始學(xué)習(xí)的時候我真的很需要這樣的東西,但是又真的找不到。如果你已經(jīng)看到了這里,非常感謝!
相關(guān)文章
Node.js靜態(tài)文件服務(wù)器改進(jìn)版
這篇文章主要介紹了Node.js靜態(tài)文件服務(wù)器改進(jìn)版的相關(guān)資料,需要的朋友可以參考下2016-01-01Node與Python 雙向通信的實(shí)現(xiàn)代碼
最簡單粗暴的通信方式是 Nodejs調(diào)用一下 Python 腳本,本文詳細(xì)介紹了Nodejs與Python 雙向通信的實(shí)現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-07-07Nodejs+angularjs結(jié)合multiparty實(shí)現(xiàn)多圖片上傳的示例代碼
這篇文章主要介紹了Nodejs+angularjs結(jié)合multiparty實(shí)現(xiàn)多圖片上傳的示例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09npm報錯:request to httpsregistry.npm.taobao.org 
這篇文章主要介紹了npm報錯:request to httpsregistry.npm.taobao.org failed, reason certificate has expired的解決方案,文中有詳細(xì)的解決方案,需要的朋友可以參考下2024-03-03詳解基于Node.js的HTTP/2 Server實(shí)踐
HTTP/2目前已經(jīng)逐漸的在各大網(wǎng)站上開始使用,這篇文章主要介紹了詳解基于Node.js的HTTP/2 Server實(shí)踐,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05