Nodejs Express4.x開發(fā)框架隨手筆記
Express: ?web application framework for?Node.js?Express 是一個簡潔、靈活的 node.js Web 應(yīng)用開發(fā)框架, 它提供一系列強(qiáng)大的特性，幫助你創(chuàng)建各種 Web 和移動設(shè)備應(yīng)用。
目錄
此文重點介紹Express4.x(具體是4.10.4)的開發(fā)框架，其中還會涉及到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安裝的時候是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 （項目名）
create : nodejs-demo/package.json （項目包的信息）
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 (路由目錄,以后在這個目錄下開發(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 （啟動文件，用于啟動app.js）
install dependencies:
$ cd nodejs-demo && npm install
run the app:
$ DEBUG=nodejs-demo ./bin/www
項目創(chuàng)建成功。
根據(jù)上述提示安裝依賴：
cd nodejs-demo && npm install
根據(jù)提示啟動web：
$ DEBUG=nodejs-demo ./bin/www
不過我們這里不打算使用該方法啟動程序。原因是我們在開發(fā)過程中需要使用nodemon這么一個工具。
nodemon用于動態(tài)識別開發(fā)過程中項目的改變，然后動態(tài)加載（這是Eclipse種開發(fā)java web類似）。該工具是開發(fā)web的必備啊
安裝nodemon：
npm install nodemon -g
那么為什么我們上面不使用./bin/www腳本呢？
原因是nodemon ./bin/www 這樣是沒有辦法識別項目的改動。（我個人實驗的，如有知道的大牛，望賜教）
修改app.js：
把最有一行//module.exports = app;注釋掉
換成：app.listen(3000);
使用下面命令啟動app.js主程序：
hadoop@sven:~/workspace/nodeJs/nodejs-demo$ nodemon app.js
然后修改程序，看看是否會動態(tài)加載。會有下面提示：
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, 存放所有的項目依賴庫。(每個項目管理自己的依賴，與Maven,Gradle等不同)
package.json，項目依賴配置及開發(fā)者信息
app.js，程序主入口
public，靜態(tài)文件(css,js,img)
routes，路由文件(MVC中的C,controller)
Views，頁面文件(Ejs模板)
nodejs-demo/bin/www （啟動文件，用于啟動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);
// 啟動及端口
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界面框架
其實就是把js,css文件復(fù)制到項目中對應(yīng)該的目錄里。 包括4個文件：
復(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個部分：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è)計一下用戶登陸業(yè)務(wù)需求。
訪問路徑：/，頁面：index.html，不需要登陸，可以直接訪問。
訪問路徑：/home，頁面：home.html，必須用戶登陸后，才可以訪問。
訪問路徑：/login，頁面：login.html，登陸頁面，用戶名密碼輸入正確，自動跳轉(zhuǎn)到home.html
訪問路徑：/logout，頁面：無，退出登陸后，自動回到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為所有針對這個路徑的請求
我們打開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兩個文件
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時，如果用戶名和密碼正確，我們使用redirect方法跳轉(zhuǎn)到的home
res.redirect('/home');
執(zhí)行exports.home時，我們又用render渲染頁面，并把user對象傳給home.html頁面
res.render('home', { title: 'Home',user: user});
為什么不能在doLogin時，就把user對象賦值給session，每個頁面就不再傳值了。
session這個問題，其實是涉及到服務(wù)器的底層處理方式。
像Java的web服務(wù)器，是多線程調(diào)用模型。每用戶請求會打開一個線程，每個線程在內(nèi)容中維護(hù)著用戶的狀態(tài)。
像PHP的web服務(wù)器，是交行CGI的程序處理，CGI是無狀態(tài)的，所以一般用cookie在客戶的瀏覽器是維護(hù)用戶的狀態(tài)。但cookie在客戶端維護(hù)的信息是不夠的，所以CGI應(yīng)用要模仿用戶session，就需要在服務(wù)器端生成一個session文件存儲起來，讓原本無狀態(tài)的CGI應(yīng)用，通過中間文件的方式，達(dá)到session的效果。
Nodejs的web服務(wù)器，也是CGI的程序無狀態(tài)的，與PHP不同的地方在于，單線程應(yīng)用，所有請求都是異步響應(yīng)，通過callback方式返回數(shù)據(jù)。如果我們想保存session數(shù)據(jù)，也是需要找到一個存儲，通過文件存儲,redis,Mongdb都可以。
接下來，我將演示如何通過mongodb來保存session，并實現(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ù)庫。然后自動寫入session信息到數(shù)據(jù)庫中（也可以用mongoose中間件，但是要自己實現(xiàn)session的寫入）
app.use(session(….)) 這里是全局設(shè)置了session的信息及session信息存儲的方式。
注：app.js文件有順序要求，一定要注意！?。?/span>
安裝session-mongoose依賴庫
npm install connect
npm install session-mongoose
npm install session-mongoose
安裝有錯誤但是沒關(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'});
};
這個時候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();
});
注：這個session是express4.10.4的寫法，與express4之前的版本是不一樣的。
訪問頁面可以查看mongodb有沒有數(shù)據(jù)：
nodejs-mongodb
nodejs-mongodb
由于上面配置的 cookie:{maxAge:10000} //expire session in 10 seconds
過期時間，因此你會看到mongodb里面的數(shù)據(jù)過一段時間就被清除了。
參考：
Mongoose：http://mongoosejs.com/
關(guān)于express4.2.0與express3.x操作的區(qū)別：http://blog.csdn.net/u013758116/article/details/38758351
8. 頁面提示
登陸的大體我們都已經(jīng)講完了，最后看一下登陸失敗的情況。
我們希望如果用戶登陸時，用戶名或者密碼出錯了，會給用戶提示，應(yīng)該如何去實現(xiàn)。
打開app.js的，增加res.locals.message
登陸的大體我們都已經(jīng)講完了，最后看一下登陸失敗的情況。
我們希望如果用戶登陸時，用戶名或者密碼出錯了，會給用戶提示，應(yīng)該如何去實現(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 輸入錯誤的和密碼， 用戶名：dad，密碼：da
boostrap-nodejs
9. 頁面訪問控制
網(wǎng)站登陸部分按照我們的求已經(jīng)完成了，但網(wǎng)站并不安全。
localhost:3000/home，頁面本來是登陸以后才訪問的，現(xiàn)在我們不要登陸，直接在瀏覽器輸入也可訪問。
頁面報錯了，提示<%= 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="
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
這個頁面被打開發(fā)，因為沒有user.username參數(shù)。我們避免這樣的錯誤發(fā)生。
還記錄路由部分里說的get,post,all的作用嗎？我現(xià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兩個方法
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時或者localhost:3000/logout，就會跳到/login頁面
登錄后, 訪問localhost:3000/login 則直接跳到/home頁面
到此，express4 相關(guān)內(nèi)容到此為止。
以上內(nèi)容是小編給大家分享的Nodejs Express4.x開發(fā)框架隨手筆記，希望大家喜歡。
相關(guān)文章
我的Node.js學(xué)習(xí)之路（三）--node.js作用、回調(diào)、同步和異步代碼 以及事件循環(huán)
本篇文章主要介紹了node.js的幾個重要的知識點：node.js作用、回調(diào)、同步和異步代碼 以及事件循環(huán)2014-07-07
npm一鍵安裝Python以及node-sass依賴環(huán)境的方法
Node-sass是一個庫,它將Node.js綁定到LibSass,下面這篇文章主要給大家介紹了關(guān)于npm一鍵安裝Python以及node-sass依賴環(huán)境的相關(guān)資料,文中還介紹了安裝node-sass報錯Python環(huán)境問題避坑指南,需要的朋友可以參考下2022-09-09
nodejs實現(xiàn)獲取本地文件夾下圖片信息功能示例
這篇文章主要介紹了nodejs實現(xiàn)獲取本地文件夾下圖片信息功能,涉及node.js針對文件、目錄的遍歷、讀取等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
用nodejs的實現(xiàn)原理和搭建服務(wù)器(動態(tài))
下面小編就為大家?guī)硪黄胣odejs的實現(xiàn)原理和搭建服務(wù)器(動態(tài))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
關(guān)于npm主版本升級及其相關(guān)知識點總結(jié)
npm是Node.js默認(rèn)的包管理器,以javascript?編寫的軟件包管理系統(tǒng)用于分享和使用代碼,下面這篇文章主要給大家介紹了關(guān)于npm主版本升級及其相關(guān)知識點總結(jié)的相關(guān)資料,需要的朋友可以參考下2022-12-12
node.js中TCP Socket多進(jìn)程間的消息推送示例詳解
這篇文章主要給大家介紹了關(guān)于node.js中TCP Socket多進(jìn)程間的消息推送的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了node操作mysql數(shù)據(jù)庫,結(jié)合實例形式較為詳細(xì)的分析了node操作數(shù)據(jù)庫的連接、增刪改查、事務(wù)處理及錯誤處理相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
用nodejs實現(xiàn)json和jsonp服務(wù)的方法
本篇文章主要介紹了用nodejs實現(xiàn)json和jsonp服務(wù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本文先介紹原生的node.js實現(xiàn)命令行交互，了解原生的api,然后通過commander.js和inquirer.js實現(xiàn)一個完整的交互命令行工具。感興趣的朋友跟隨小編一起看看吧2019-05-05
Node.js+jade抓取博客所有文章生成靜態(tài)html文件的實例
下面小編就為大家?guī)硪黄狽ode.js+jade抓取博客所有文章生成靜態(tài)html文件的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09