轉載請註明出處： http://blog.fens.me/nodejs-express3/

程式程式碼已經上傳到github有需要的同學，自行下載。 https://github.com/bsspirit/nodejs-demo

從零開始nodejs系列文章

從零開始nodejs系列文章， 將介紹如何利Javascript做為服務端指令碼，通過Nodejs框架web開發。Nodejs框架是基於V8的引擎，是目前速度最快的 Javascript引擎。chrome瀏覽器就基於V8，同時開啟20-30個網頁都很流暢。Nodejs標準的web開發框架Express，可以幫 助我們迅速建立web站點，比起PHP的開發效率更高，而且學習曲線更低。非常適合小型網站，個性化網站，我們自己的Geek網站！！

目錄

此文重點介紹Express3.0的開發框架，其中還會涉及到Mongoose,Ejs,Bootstrap等相關內容。

1. 建立工程
2. 目錄結構
3. Express3.0配置檔案
4. Ejs模板使用
5. Bootstrap介面框架
6. 路由功能
7. Session使用
8. 頁面提示
9. 頁面訪問控制

開發環境：

Win7旗艦版 64bit

MonogoDB: v2.4.3

Tue May 14 09:24:50.118 [initandlisten] MongoDB starting : pid=1716 port=27017 dbpath=./data 64-bit host=PC201304202140
Tue May 14 09:24:50.119 [initandlisten] db version v2.4.3
Tue May 14 09:24:50.119 [initandlisten] git version: fe1743177a5ea03e91e0052fb5e2cb2945f6d95f
Tue May 14 09:24:50.119 [initandlisten] build info: windows sys.getwindowsversion(major=6, minor=1, build=7601, platform=2, service_pack='Service Pack 1') BOOST_LIB_VERSION=1_49
Tue May 14 09:24:50.119 [initandlisten] allocator: system
Tue May 14 09:24:50.119 [initandlisten] options: { dbpath: "./data" }
Tue May 14 09:24:50.188 [initandlisten] journal dir=./datajournal
Tue May 14 09:24:50.189 [initandlisten] recover : no journal files present, no recovery needed
Tue May 14 09:24:50.441 [initandlisten] preallocateIsFaster=true 3.26
Tue May 14 09:24:50.778 [initandlisten] preallocateIsFaster=true 5.88
Tue May 14 09:24:51.827 [initandlisten] waiting for connections on port 27017
Tue May 14 09:24:51.827 [websvr] admin web console waiting for connections on port 28017
 

nodejs: v0.10.5, npm 1.2.19

node -v
v0.10.5
npm -v
1.2.19

1. 建立工程

進入工程目錄

cd D:workspaceproject

全域性安裝express，express作為命令被安裝到了系統中

npm install -g express

檢視express版本

express -V
3.2.2

使用express命令建立工程，並支援ejs

D:workspaceproject>express -e nodejs-demo

create : nodejs-demo
create : nodejs-demo/package.json
create : nodejs-demo/app.js
create : nodejs-demo/public
create : nodejs-demo/public/javascripts
create : nodejs-demo/public/images
create : nodejs-demo/public/stylesheets
create : nodejs-demo/public/stylesheets/style.css
create : nodejs-demo/routes
create : nodejs-demo/routes/index.js
create : nodejs-demo/routes/user.js
create : nodejs-demo/views
create : nodejs-demo/views/index.ejs

install dependencies:
$ cd nodejs-demo && npm install
run the app:
$ node app
 

根據提示，下載依賴包

cd nodejs-demo && npm install

[email protected] node_modulesexpress
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected], [email protected])

模板專案建立成功，啟動模板專案。

D:workspaceprojectnodejs-demo>node app.js
Express server listening on port 3000

本地的3000埠被開啟，通過瀏覽器訪問: localhost:3000

通過node啟動程式，每次程式碼修改都需要重新啟動。 有一個工具supervisor，每次修改程式碼後會自動重啟，會我們開發省很多的時間。

npm install supervisor

再啟動服務

D:workspaceprojectnodejs-demo>supervisor app.js

DEBUG: Running node-supervisor with
DEBUG: program 'app.js'
DEBUG: --watch '.'
DEBUG: --ignore 'undefined'
DEBUG: --extensions 'node|js'
DEBUG: --exec 'node'

DEBUG: Starting child process with 'node app.js'
DEBUG: Watching directory 'D:workspaceprojectnodejs-demo' for changes.
Express server listening on port 3000

2. 目錄結構

D:workspaceprojectnodejs-demo>dir

2013/05/14 09:42 877 app.js 2013/05/14 09:48 <DIR> node_modules 2013/05/14 09:42 184 package.json 2013/05/14 09:42 <DIR> public 2013/05/14 09:42 <DIR> routes 2013/05/14 09:42 <DIR> views

目錄介紹：

• node_modules, 存放所有的專案依賴庫。(每個專案管理自己的依賴，與Maven,Gradle等不同)
• package.json，專案依賴配置及開發者資訊
• app.js，程式啟動檔案
• public，靜態檔案(css,js,img)
• routes，路由檔案(MVC中的C,controller)
• Views，頁面檔案(Ejs模板)

3. Express3.0配置檔案

開啟app.js檔案

/**
* 模組依賴
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');

var app = express();

//環境變數
app.set('port', process.env.PORT || 3000);
app.set('views', __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')));

// 開發模式
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

// 路徑解析
app.get('/', routes.index);
app.get('/users', user.list);

// 啟動及埠
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

4. Ejs模板使用

讓ejs模板檔案，使用副檔名為html的檔案。

修改：app.js

app.engine('.html', ejs.__express);
app.set('view engine', 'html');// app.set('view engine', 'ejs');

修改後，ejs變數沒有定義，supervisor的程式會一直報錯

ReferenceError: ejs is not defined
at Object. (D:workspaceprojectnodejs-demoapp.js:17:21)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:901:3
DEBUG: Program node app.js exited with code 8

在app.js中增加ejs變數

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

訪問localhost:3000，程式報錯

Error: Failed to lookup view "index"
at Function.app.render (D:workspaceprojectnodejs-demonode_modulesexpresslibapplication.js:495:17)
at ServerResponse.res.render (D:workspaceprojectnodejs-demonode_modulesexpresslibresponse.js:756:7)
at exports.index (D:workspaceprojectnodejs-demoroutesindex.js:7:7)
at callbacks (D:workspaceprojectnodejs-demonode_modulesexpresslibrouterindex.js:161:37)
at param (D:workspaceprojectnodejs-demonode_modulesexpresslibrouterindex.js:135:11)
at pass (D:workspaceprojectnodejs-demonode_modulesexpresslibrouterindex.js:142:5)
at Router._dispatch (D:workspaceprojectnodejs-demonode_modulesexpresslibrouterindex.js:170:5)
at Object.router (D:workspaceprojectnodejs-demonode_modulesexpresslibrouterindex.js:33:10)
at next (D:workspaceprojectnodejs-demonode_modulesexpressnode_modulesconnectlibproto.js:190:15)
at Object.methodOverride [as handle] (D:workspaceprojectnodejs-demonode_modulesexpressnode_modulesconnectlibmiddlewaremethodOverride.js:37:5)
GET / 500 26ms

重新命名：views/indes.ejs 為 views/index.html

訪問localhost:3000正確

5. 增加Bootstrap介面框架

其實就是把js,css檔案複製到專案中對應該的目錄裡。 包括4個檔案：

複製到public/stylesheets目錄

bootstrap.min.css
bootstrap-responsive.min.css

複製到public/javascripts目錄

bootstrap.min.js
jquery-1.9.1.min.js

接下來，我們把index.html頁面切分成3個部分：header.html, index.html, footer.html

header.html, 為html頁面的頭部區域 index.html, 為內容顯示區域 footer.html，為頁面底部區域

header.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%=: title %></title>
<!-- Bootstrap -->
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> -->
</head>
<body screen_capture_injected="true">

index.html

<% include header.html %>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<% include footer.html %>

注：express3.0時，ejs嵌入其他頁面時使用include，express2.x用法不一樣。

footer.html

<script src="/javascripts/jquery-1.9.1.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</body>
</html>

訪問localhost:3000正確。

我們已經成功的使用了EJS模板的功能，把公共的頭部和底部從頁面中分離出來了。

並已經引入了bootstrap介面框架，後面講到“登陸介面”的時候，就會看到bootstrap介面效果了。

6. 路由功能

我們設計一下使用者登陸業務需求。

訪問路徑：/，頁面：index.html，不需要登陸，可以直接訪問。 訪問路徑：/home，頁面：home.html，必須使用者登陸後，才可以訪問。 訪問路徑：/login，頁面：login.html，登陸頁面，使用者名稱密碼輸入正確，自動跳轉到home.html 訪問路徑：/logout，頁面：無，退出登陸後，自動回到index.html頁面 開啟app.js檔案，在增加路由配置

app.get('/', routes.index);
app.get('/login', routes.login);
app.post('/login', routes.doLogin);
app.get('/logout', routes.logout);
app.get('/home', routes.home);

注：get為get請求，post為post請求，all為所有針對這個路徑的請求

我們開啟routes/index.js檔案，增加對應的方法。

exports.index = function(req, res){
res.render('index', { title: 'Index' });
};
exports.login = function(req, res){
res.render('login', { title: '使用者登陸'});
};
exports.doLogin = function(req, res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username===user.username && req.body.password===user.password){
res.redirect('/home');
}
res.redirect('/login');
};
exports.logout = function(req, res){
res.redirect('/');
};
exports.home = function(req, res){
var user={
username:'admin',
password:'admin'
}
res.render('home', { title: 'Home',user: user});
};

建立views/login.html和views/home.html兩個檔案

login.html

<% include header.html %>
<div class="container-fluid">
<form class="form-horizontal" method="post">
<fieldset>
<legend>使用者登陸</legend>
<div class="control-group">
<label class="control-label" for="username">使用者名稱</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username" name="username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密碼</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password" name="password">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">登陸</button>
</div>
</fieldset>
</form>
</div>
<% include footer.html %>

注：使用了bootstrap介面框架，效果還不錯吧.

home.html

<% include header.html %>
<h1>Welcome <%= user.username %>, 歡迎登陸！！</h1>
<a claa="btn" href="/logout">退出</a>
<% include footer.html %>

修改index.html，增加登陸連結 index.html

<% include header.html %>
<h1>Welcome to <%= title %></h1>
<p><a href="/login">登陸</a></p>
<% include footer.html %>

路由及頁面我們都寫好了，快去網站上試試吧。

7. Session使用

從剛來的例子上面看，執行exports.doLogin時，如果使用者名稱和密碼正確，我們使用redirect方法跳轉到的home

res.redirect('/home');

執行exports.home時，我們又用render渲染頁面，並把user物件傳給home.html頁面

res.render('home', { title: 'Home',user: user});

為什麼不能在doLogin時，就把user物件賦值給session，每個頁面就不再傳值了。

session這個問題，其實是涉及到伺服器的底層處理方式。

像Java的web伺服器，是多執行緒呼叫模型。每使用者請求會開啟一個執行緒，每個執行緒在內容中維護著使用者的狀態。

像PHP的web伺服器，是交行CGI的程式處理，CGI是無狀態的，所以一般用cookie在客戶的瀏覽器是維護使用者的狀態。但cookie在客 戶端維護的資訊是不夠的，所以CGI應用要模仿使用者session，就需要在伺服器端生成一個session檔案儲存起來，讓原本無狀態的CGI應用，通 過中間檔案的方式，達到session的效果。

Nodejs的web伺服器，也是CGI的程式無狀態的，與PHP不同的地方在於，單執行緒應用，所有請求都是非同步響應，通過callback方式返回資料。如果我們想儲存session資料，也是需要找到一個儲存，通過檔案儲存,redis,Mongdb都可以。

接下來，我將演示如何通過mongodb來儲存session，並實現登陸後用戶物件傳遞。

app.js檔案

var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, ejs = require('ejs')
, SessionStore = require("session-mongoose")(express);
var store = new SessionStore({
url: "mongodb://localhost/session",
interval: 120000
});
....
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.cookieSession({secret : 'fens.me'}));
app.use(express.session({
secret : 'fens.me',
store: store,
cookie: { maxAge: 900000 }
}));
app.use(function(req, res, next){
res.locals.user = req.session.user;
next();
});
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

注：app.js檔案有順序要求，一定要注意！！！

安裝session-mongoose依賴庫

D:workspaceprojectnodejs-demo>npm install session-mongoose
D:workspaceprojectnodejs-demonode_modulessession-mongoosenode_modulesmongoosenode_modulesmongodbnode_modulesbson>node "D:toolkitnodejsnode_modulesnpmbinnode-gyp-bin\....node_modulesnode-gypbinnode-gyp.js" rebuild
C:Program Files (x86)MSBuildMicrosoft.Cppv4.0Microsoft.Cpp.InvalidPlatform.Targets(23,7): error MSB8007: 專案“kerberos.vcxproj”的平臺無效。平臺為“x64”。您會看到此訊息的可能原因是，您嘗試在沒有解決方案檔案的情況下生成專案，並且為
oosenode_modulesmongoosenode_modulesmongodbnode_modulesbsonbuildbson.vcxproj]
[email protected] node_modulessession-mongoose
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

安裝有錯誤但是沒關係。

訪問：http://localhost:3000/login，正常

修改routes/index.js檔案

exports.doLogin方法

exports.doLogin = function(req, res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username===user.username && req.body.password===user.password){
req.session.user=user;
return res.redirect('/home');
} else {
return res.redirect('/login');
}
};

exports.logout方法

exports.logout = function(req, res){
req.session.user=null;
res.redirect('/');
};

exports.home方法

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

這個時候session已經起作用了，exports.home的user顯示傳值已經被去掉了。 是通過app.js中app.use的res.locals變數，通過框架進行的賦值。

app.use(function(req, res, next){
res.locals.user = req.session.user;
next();
});

注：這個session是express3.0的寫法，與express2.x是不一樣的。原理是在框架內每次賦值，把我們剛才手動傳值的過程，讓框架去完成了。

8. 頁面提示

登陸的大體我們都已經講完了，最後看一下登陸失敗的情況。

我們希望如果使用者登陸時，使用者名稱或者密碼出錯了，會給使用者提示，應該如何去實現。

開啟app.js的，增加res.locals.message

app.use(function(req, res, next){
res.locals.user = req.session.user;
var err = req.session.error;
delete req.session.error;
res.locals.message = '';
if (err) res.locals.message = '<div class="alert alert-error">' + err + '</div>';
next();
});

修改login.html頁面，<%- message %>

<% include header.html %>
<div class="container-fluid">
<form class="form-horizontal" method="post">
<fieldset>
<legend>使用者登陸</legend>
<%- message %>
<div class="control-group">
<label class="control-label" for="username">使用者名稱</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username" name="username" value="admin">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密碼</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password" name="password" value="admin">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">登陸</button>
</div>
</fieldset>
</form>
</div>
<% include footer.html %>

修改routes/index.js，增加req.session.error

exports.doLogin = function(req, res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username===user.username && req.body.password===user.password){
req.session.user=user;
return res.redirect('/home');
} else {
req.session.error='使用者名稱或密碼不正確';
return res.redirect('/login');
}
};

讓我們來看看效果： http://localhost:3000/login 輸入錯誤的和密碼， 使用者名稱：adminfe，密碼：12121

9. 頁面訪問控制

網站登陸部分按照我們的求已經完成了，但網站並不安全。

localhost:3000/home，頁面本來是登陸以後才訪問的，現在我們不要登陸，直接在瀏覽器輸入也可訪問。

頁面報錯了，提示<%= user.username %> 變量出錯。

GET /home?user==a 500 15ms
TypeError: D:workspaceprojectnodejs-demoviewshome.html:2
1| <% include header.html %>
>> 2| <h1>Welcome <%= user.username %>, 歡迎登陸！！</h1>
3| <a claa="btn" href="/logout">退出</a>
4| <% include header.html %>
Cannot read property 'username' of null
at eval (eval at <anonymous> (D:workspaceprojectnodejs-demonode_modulesejslibejs.js:
at eval (eval at <anonymous> (D:workspaceprojectnodejs-demonode_modulesejslibejs.js:
at D:workspaceprojectnodejs-demonode_modulesejslibejs.js:249:15
at Object.exports.render (D:workspaceprojectnodejs-demonode_modulesejslibejs.js:287:
at View.exports.renderFile [as engine] (D:workspaceprojectnodejs-demonode_modulesejsl
at View.render (D:workspaceprojectnodejs-demonode_modulesexpresslibview.js:75:8)
at Function.app.render (D:workspaceprojectnodejs-demonode_modulesexpresslibapplicati
at ServerResponse.res.render (D:workspaceprojectnodejs-demonode_modulesexpresslibres
at exports.home (D:workspaceprojectnodejs-demoroutesindex.js:36:8)
at callbacks (D:workspaceprojectnodejs-demonode_modulesexpresslibrouterindex.js:161

這個頁面被打開發，因為沒有user.username引數。我們避免這樣的錯誤發生。

還記錄路由部分裡說的get,post,all的作用嗎？我現在要回到路由配置中，再做點事情。

修改app.js檔案

app.all('/login', notAuthentication);
app.get('/login', routes.login);
app.post('/login', routes.doLogin);
app.get('/logout', authentication);
app.get('/logout', routes.logout);
app.get('/home', authentication);
app.get('/home', routes.home);

訪問控制：

• / ，誰訪問都行，沒有任何控制
• /login，用all攔截所有訪問/login的請求，先呼叫authentication，使用者登陸檢查
• /logout，用get攔截訪問/login的請求，先呼叫notAuthentication，使用者不登陸檢查
• /home，用get攔截訪問/home的請求，先呼叫Authentication，使用者登陸檢查

修改app.js檔案，增加authentication，notAuthentication兩個方法

function authentication(req, res, next) {
if (!req.session.user) {
req.session.error='請先登陸';
return res.redirect('/login');
}
next();
}
function notAuthentication(req, res, next) {
if (req.session.user) {
req.session.error='已登陸';
return res.redirect('/');
}
next();
}

配置好後，我們未登陸，直接訪問localhost:3000/home時，就會跳到/login頁面

如果你也出現圖片顯示的內容，那麼恭喜你了。

Nodejs使用Express3.0框架的第一步你已經完成了，並且還使用了ejs,bootstrap,mongoose庫的使用。

希望此文對大家有所幫助。

轉載請註明出處： http://blog.fens.me/nodejs-express3/

程式程式碼已經上傳到github有需要的同學，自行下載。 https://github.com/bsspirit/nodejs-demo