Nodejs Express4.x開發(fā)框架隨手筆記

更新時(shí)間：2015年11月23日 11:22:06 投稿：mrr

Express: ?web application framework for?Node.js?Express 是一個(gè)簡潔、靈活的 node.js Web 應(yīng)用開發(fā)框架, 它提供一系列強(qiáng)大的特性，幫助你創(chuàng)建各種 Web 和移動(dòng)設(shè)備應(yīng)用，本篇文章給大家介紹nodejs express4.x開發(fā)框架隨手筆記，感興趣的朋友一起學(xué)習(xí)吧

此文重點(diǎn)介紹Express4.x(具體是4.10.4)的開發(fā)框架，其中還會(huì)涉及到Mongoose,Ejs,Bootstrap等相關(guān)內(nèi)容。

建立工程
目錄結(jié)構(gòu)
Express4.x配置文件
Ejs模板使用
Bootstrap界面框架
路由功能
Session使用
頁面提示
頁面訪問控制

開發(fā)環(huán)境：

Ubuntu

MonogoDB: v2.6.4

nodejs:v0.11.2

npm 2.1.10 ( 如果nodejs安裝的時(shí)候是1.2.19版本，本文升級到了2.x版本)

1. 建立工程

進(jìn)入工程目錄

mkdir workplace

cd workplace

全局安裝express，express作為命令被安裝到了系統(tǒng)中.

npm install -g express

查看express版本

express -V

注意：在express4.x版本中已經(jīng)不含有express命令了。

需要安裝 express-generator

npm install express-generator -g

詳細(xì)安裝過程見：《準(zhǔn)備Nodejs開發(fā)環(huán)境Ubuntu》

使用express命令創(chuàng)建工程，并支持ejs

hadoop@sven:~/workspace/nodeJs$ express -e nodejs-demo

create : nodejs-demo （項(xiàng)目名）
create : nodejs-demo/package.json （項(xiàng)目包的信息）
create : nodejs-demo/app.js (主程序)
create : nodejs-demo/public (公開目錄)
create : nodejs-demo/public/images
create : nodejs-demo/public/javascripts
create : nodejs-demo/public/stylesheets
create : nodejs-demo/public/stylesheets/style.css
create : nodejs-demo/routes (路由目錄,以后在這個(gè)目錄下開發(fā)程序，然后在app.js里use)
create : nodejs-demo/routes/index.js
create : nodejs-demo/routes/users.js
create : nodejs-demo/views (視圖目錄，視圖模板文件等)
create : nodejs-demo/views/index.ejs
create : nodejs-demo/views/error.ejs
create : nodejs-demo/bin
create : nodejs-demo/bin/www （啟動(dòng)文件，用于啟動(dòng)app.js）
install dependencies:
$ cd nodejs-demo && npm install
run the app:
$ DEBUG=nodejs-demo ./bin/www

項(xiàng)目創(chuàng)建成功。

根據(jù)上述提示安裝依賴：

復(fù)制代碼代碼如下:

cd nodejs-demo && npm install

根據(jù)提示啟動(dòng)web：

復(fù)制代碼代碼如下:

$ DEBUG=nodejs-demo ./bin/www

不過我們這里不打算使用該方法啟動(dòng)程序。原因是我們在開發(fā)過程中需要使用nodemon這么一個(gè)工具。
nodemon用于動(dòng)態(tài)識別開發(fā)過程中項(xiàng)目的改變，然后動(dòng)態(tài)加載（這是Eclipse種開發(fā)java web類似）。該工具是開發(fā)web的必備啊

安裝nodemon：

npm install nodemon -g

那么為什么我們上面不使用./bin/www腳本呢？

原因是nodemon ./bin/www 這樣是沒有辦法識別項(xiàng)目的改動(dòng)。（我個(gè)人實(shí)驗(yàn)的，如有知道的大牛，望賜教）

修改app.js：

把最有一行//module.exports = app;注釋掉

換成：app.listen(3000);

使用下面命令啟動(dòng)app.js主程序：

hadoop@sven:~/workspace/nodeJs/nodejs-demo$ nodemon app.js

然后修改程序，看看是否會(huì)動(dòng)態(tài)加載。會(huì)有下面提示：

1 Dec 16:22:07 – [nodemon] restarting due to changes…
1 Dec 16:22:07 – [nodemon] starting `node app.js`

表示生效。

測試：

本地的3000端口被打開，通過瀏覽器訪問: localhost:3000

2. 目錄結(jié)構(gòu)

./
drwxrwxr-x 5 hadoop hadoop 4096 12月 1 15:57 ../
-rw-rw-r– 1 hadoop hadoop 1495 12月 1 16:22 app.js
-rw-r–r– 1 hadoop hadoop 12288 12月 1 16:22 .app.js.swp
drwxr-xr-x 2 hadoop hadoop 4096 12月 1 15:57 bin/
drwxrwxr-x 9 hadoop hadoop 4096 12月 1 15:58 node_modules/
-rw-rw-r– 1 hadoop hadoop 326 12月 1 15:57 package.json
drwxr-xr-x 5 hadoop hadoop 4096 12月 1 15:57 public/
drwxr-xr-x 2 hadoop hadoop 4096 12月 1 15:57 routes/
drwxr-xr-x 2 hadoop hadoop 4096 12月 1 15:57 views/

目錄介紹：

node_modules, 存放所有的項(xiàng)目依賴庫。(每個(gè)項(xiàng)目管理自己的依賴，與Maven,Gradle等不同)
package.json，項(xiàng)目依賴配置及開發(fā)者信息
app.js，程序主入口
public，靜態(tài)文件(css,js,img)
routes，路由文件(MVC中的C,controller)
Views，頁面文件(Ejs模板)
nodejs-demo/bin/www （啟動(dòng)文件，用于啟動(dòng)app.js）

打開app.js查看內(nèi)容：

/**
* 模塊依賴
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
//環(huán)境變量
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')));
// 開發(fā)模式
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
// 路徑解析
app.get('/', routes.index);
app.get('/users', user.list);
// 啟動(dòng)及端口
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

4. Ejs模板使用

讓ejs模板文件，使用擴(kuò)展名為html的文件。

修改：app.js

var ejs = require('ejs'); //引入ejs。重新安裝依賴>
app.engine('.html', ejs.__express);
app.set('view engine', 'html'); // app.set('view engine', 'ejs');
重命名：views/*.ejs 為 views/*.html

訪問localhost:3000正確

主要要重命名index.ejs等文件

5. 增加Bootstrap界面框架

其實(shí)就是把js,css文件復(fù)制到項(xiàng)目中對應(yīng)該的目錄里。包括4個(gè)文件：

復(fù)制到public/stylesheets目錄

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

復(fù)制到public/javascripts目錄

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

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

header.html, 為html頁面的頭部區(qū)域
index.html, 為內(nèi)容顯示區(qū)域
footer.html，為頁面底部區(qū)域

header.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%=: title %></title>
<!-- Bootstrap -->
<link  rel="stylesheet" media="screen">
<!-- <link  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 %>
footer.html
<script src="http://www.geedoo.info/javascripts/jquery-1.9.1.min.js"></script>
<script src="http://www.geedoo.info/javascripts/bootstrap.min.js"></script>
</body>
</html>

訪問localhost:3000正確。

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

并已經(jīng)引入了bootstrap界面框架。

6. 路由功能

我們設(shè)計(jì)一下用戶登陸業(yè)務(wù)需求。

訪問路徑：/，頁面：index.html，不需要登陸，可以直接訪問。
訪問路徑：/home，頁面：home.html，必須用戶登陸后，才可以訪問。
訪問路徑：/login，頁面：login.html，登陸頁面，用戶名密碼輸入正確，自動(dòng)跳轉(zhuǎn)到home.html
訪問路徑：/logout，頁面：無，退出登陸后，自動(dòng)回到index.html頁面

打開app.js文件，在增加路由配置

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

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

我們打開routes/index.js文件，增加對應(yīng)的方法。

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});
};

創(chuàng)建views/login.html和views/home.html兩個(gè)文件

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 %>
home.html：
<% include header.html %>
<h1>Welcome <%= user.username %>, 歡迎登陸??！</h1>
<a claa="btn" >退出</a>
<% include footer.html %>

修改index.html，增加登陸鏈接

index.html

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

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

7. Session使用

從剛來的例子上面看，執(zhí)行exports.doLogin時(shí)，如果用戶名和密碼正確，我們使用redirect方法跳轉(zhuǎn)到的home

res.redirect('/home');

執(zhí)行exports.home時(shí)，我們又用render渲染頁面，并把user對象傳給home.html頁面

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

為什么不能在doLogin時(shí)，就把user對象賦值給session，每個(gè)頁面就不再傳值了。

session這個(gè)問題，其實(shí)是涉及到服務(wù)器的底層處理方式。

像Java的web服務(wù)器，是多線程調(diào)用模型。每用戶請求會(huì)打開一個(gè)線程，每個(gè)線程在內(nèi)容中維護(hù)著用戶的狀態(tài)。

像PHP的web服務(wù)器，是交行CGI的程序處理，CGI是無狀態(tài)的，所以一般用cookie在客戶的瀏覽器是維護(hù)用戶的狀態(tài)。但cookie在客戶端維護(hù)的信息是不夠的，所以CGI應(yīng)用要模仿用戶session，就需要在服務(wù)器端生成一個(gè)session文件存儲(chǔ)起來，讓原本無狀態(tài)的CGI應(yīng)用，通過中間文件的方式，達(dá)到session的效果。

Nodejs的web服務(wù)器，也是CGI的程序無狀態(tài)的，與PHP不同的地方在于，單線程應(yīng)用，所有請求都是異步響應(yīng)，通過callback方式返回?cái)?shù)據(jù)。如果我們想保存session數(shù)據(jù)，也是需要找到一個(gè)存儲(chǔ)，通過文件存儲(chǔ),redis,Mongdb都可以。

接下來，我將演示如何通過mongodb來保存session，并實(shí)現(xiàn)登陸后用戶對象傳遞。

app.js文件

在相應(yīng)位置添加下面代碼：

var session = require('express-session');
var connect = require('connect');
var SessionStore = require("session-mongoose")(connect);
var store = new SessionStore({
url:"mongodb://localhost/session",
 interval: 120000
});
app.use(session({
 secret: 'test.com',
 store: store,
 cookie:{maxAge:10000} //expire session in 10 seconds
}));
//用于把登錄用戶設(shè)置到res.locals里面，在home.html里顯示
app.use(function(req,res,next){
 res.locals.user = req.session.user;
 console.log('Session is = ',req.session.user);
 next();
});

需要添加中間件connect、session-mongoose。

其中session-mongoose是用于連接mongodb數(shù)據(jù)庫。然后自動(dòng)寫入session信息到數(shù)據(jù)庫中（也可以用mongoose中間件，但是要自己實(shí)現(xiàn)session的寫入）

app.use(session(….)) 這里是全局設(shè)置了session的信息及session信息存儲(chǔ)的方式。

注：app.js文件有順序要求，一定要注意！??！

安裝session-mongoose依賴庫

npm install connect

npm install session-mongoose

安裝有錯(cuò)誤但是沒關(guān)系。

訪問：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'});
};

這個(gè)時(shí)候session已經(jīng)起作用了，exports.home的user顯示傳值已經(jīng)被去掉了。是通過app.js中app.use的res.locals變量，通過框架進(jìn)行的賦值。

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

注：這個(gè)session是express4.10.4的寫法，與express4之前的版本是不一樣的。

訪問頁面可以查看mongodb有沒有數(shù)據(jù)：

nodejs-mongodb
nodejs-mongodb

由于上面配置的 cookie:{maxAge:10000} //expire session in 10 seconds
過期時(shí)間，因此你會(huì)看到mongodb里面的數(shù)據(jù)過一段時(shí)間就被清除了。
參考：

Mongoose：http://mongoosejs.com/

關(guān)于express4.2.0與express3.x操作的區(qū)別：http://blog.csdn.net/u013758116/article/details/38758351

8. 頁面提示

登陸的大體我們都已經(jīng)講完了，最后看一下登陸失敗的情況。

我們希望如果用戶登陸時(shí)，用戶名或者密碼出錯(cuò)了，會(huì)給用戶提示，應(yīng)該如何去實(shí)現(xiàn)。

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

登陸的大體我們都已經(jīng)講完了，最后看一下登陸失敗的情況。

我們希望如果用戶登陸時(shí)，用戶名或者密碼出錯(cuò)了，會(huì)給用戶提示，應(yīng)該如何去實(shí)現(xiàn)。

打開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-danger">' + 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 輸入錯(cuò)誤的和密碼，用戶名：dad，密碼：da

boostrap-nodejs

9. 頁面訪問控制

網(wǎng)站登陸部分按照我們的求已經(jīng)完成了，但網(wǎng)站并不安全。

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

頁面報(bào)錯(cuò)了，提示<%= user.username %> 變量出錯(cuò)。

這個(gè)頁面被打開發(fā)，因?yàn)闆]有user.username參數(shù)。我們避免這樣的錯(cuò)誤發(fā)生。

還記錄路由部分里說的get,post,all的作用嗎？我現(xiàn)在要回到路由配置中，再做點(diǎn)事情。

修改app.js文件

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

訪問控制：

/ ，誰訪問都行，沒有任何控制
/login，用all攔截所有訪問/login的請求，先調(diào)用authentication，用戶登陸檢查
/logout，用get攔截訪問/login的請求，先調(diào)用notAuthentication，用戶不登陸檢查
/home，用get攔截訪問/home的請求，先調(diào)用Authentication，用戶登陸檢查
修改app.js文件，增加authentication，notAuthentication兩個(gè)方法

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('/home');
 }
 next();
}

配置好后，我們未登陸，直接訪問localhost:3000/home時(shí)或者localhost:3000/logout，就會(huì)跳到/login頁面

登錄后, 訪問localhost:3000/login 則直接跳到/home頁面

到此，express4 相關(guān)內(nèi)容到此為止。

以上內(nèi)容是小編給大家分享的Nodejs Express4.x開發(fā)框架隨手筆記，希望大家喜歡。