Nodejs給Javascript賦予了服務端應用的生命，Jquery讓Javascript成為瀏覽中開發的利器。 最近學習了Nodejs的Express3.0的開發框架，本來是按照“node.js開發指南”書中介紹，但“node.js開發指南”講的是Express2.x的，從Express2.x到Express3.0自己模索中還是走了不少彎路的。寫篇文章總結一下。
關于作者目錄此文重點介紹Express3.0的開發框架，其中還會涉及到Mongoose,Ejs,Bootstrap等相關內容。 - 建立工程
- 目錄結構
- Express3.0配置文件
- Ejs模板使用
- Bootstrap界面框架
- 路由功能
- Session使用
- 頁面提示
- 頁面訪問控制
開發環境：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=./data\journal
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:\workspace\project
全局安裝express，express作為命令被安裝到了系統中
npm install -g express
查看express版本
express -V
3.2.2
使用express命令創建工程，并支持ejs
D:\workspace\project>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
express@3.2.2 node_modules\express
├── methods@0.0.1
├── fresh@0.1.0
├── buffer-crc32@0.2.1
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── cookie@0.0.5
├── qs@0.6.3
├── commander@0.6.1
├── debug@0.7.2
├── mkdirp@0.3.4
├── send@0.1.0 (mime@1.2.6)
└── connect@2.7.8 (pause@0.0.1, bytes@0.2.0, formidable@1.0.13)
模板項目建立成功，啟動模板項目。
D:\workspace\project\nodejs-demo>node app.js
Express server listening on port 3000
本地的3000端口被打開，通過瀏覽器訪問: localhost:3000 通過node啟動程序，每次代碼修改都需要重新啟動。 有一個工具supervisor，每次修改代碼后會自動重啟，會我們開發省很多的時間。
npm install supervisor
再啟動服務
D:\workspace\project\nodejs-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:\workspace\project\nodejs-demo' for changes.
Express server listening on port 3000
2. 目錄結構D:\workspace\project\nodejs-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:\workspace\project\nodejs-demo\app.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:\workspace\project\nodejs-demo\node_modules\express\lib\application.js:495:17)
at ServerResponse.res.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\response.js:756:7)
at exports.index (D:\workspace\project\nodejs-demo\routes\index.js:7:7)
at callbacks (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:161:37)
at param (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:135:11)
at pass (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:142:5)
at Router._dispatch (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:170:5)
at Object.router (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:33:10)
at next (D:\workspace\project\nodejs-demo\node_modules\express\node_modules\connect\lib\proto.js:190:15)
at Object.methodOverride [as handle] (D:\workspace\project\nodejs-demo\node_modules\express\node_modules\connect\lib\middleware\methodOverride.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:\workspace\project\nodejs-demo>npm install session-mongoose
D:\workspace\project\nodejs-demo\node_modules\session-mongoose\node_modules\mongoose\node_modules\mongodb\node_modules\bson>node "D:\toolkit\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild
C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\Microsoft.Cpp.InvalidPlatform.Targets(23,7): error MSB8007: 項目“kerberos.vcxproj”的平臺無效。平臺為“x64”。您會看到此消息的可能原因是，您嘗試在沒有解決方案文件的情況下生成項目，并且為
oose\node_modules\mongoose\node_modules\mongodb\node_modules\bson\build\bson.vcxproj]
session-mongoose@0.2.2 node_modules\session-mongoose
└── mongoose@3.6.10 (mpath@0.1.1, ms@0.1.0, hooks@0.2.1, sliced@0.0.3, muri@0.3.1, mpromise@0.2.1, mongodb@1.3.3)
安裝有錯誤但是沒關系。 訪問：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:\workspace\project\nodejs-demo\views\home.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:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js: at eval (eval at <anonymous> (D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js: at D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js:249:15 at Object.exports.render (D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js:287: at View.exports.renderFile [as engine] (D:\workspace\project\nodejs-demo\node_modules\ejs\l at View.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\view.js:75:8) at Function.app.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\applicati at ServerResponse.res.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\res at exports.home (D:\workspace\project\nodejs-demo\routes\index.js:36:8) at callbacks (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.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庫的使用。 希望此文對大家有所幫助。
|