Nodejs Express4.x開發框架隨手筆記_node.js

Express: ?web application framework for?Node.js?Express 是一個簡潔、靈活的 node.js Web 應用開發框架, 它提供一系列強大的特性，幫助你創建各種 Web 和行動裝置應用。

目錄

此文重點介紹Express4.x(具體是4.10.4)的開發框架，其中也會涉及到Mongoose,Ejs,Bootstrap等相關內容。

建立工程
目錄結構
Express4.x設定檔
Ejs模板使用
Bootstrap介面框架
路由功能
Session使用
頁面提示
頁面存取控制

開發環境：

Ubuntu

MonogoDB: v2.6.4

nodejs:v0.11.2

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

1. 建立工程

進入工程目錄

mkdir workplace

cd workplace

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

npm install -g express

查看express版本

express -V

注意：在express4.x版本中已經不含有express指令了。

需要安裝 express-generator

npm install express-generator -g

詳細安裝過程請見：《準備Nodejs開發環境Ubuntu》

使用express指令建立工程，並支援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 (路由目錄,以後在這個目錄下開發程序，然後在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

專案創建成功。

依照上述提示安裝依賴：

複製程式碼 程式碼如下:

cd nodejs-demo && npm install

依照提示啟動web：

複製程式碼 程式碼如下:

 $ DEBUG=nodejs-demo ./bin/www

不過我們這裡不打算使用該方法啟動程式。原因是我們在開發過程中需要使用nodemon這麼一個工具。
nodemon用於動態識別開發過程中專案的改變，然後動態載入（這是Eclipse種開發java web類似）。該工具是開發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

然後修改程序，看看是否會動態載入。會有以下提示：

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

表示生效。

檢定：

本地的3000連接埠被打開，透過瀏覽器存取: localhost:3000

2. 目錄結構

./
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，專案依賴配置及開發者資訊
app.js，程式主入口
public，靜態檔案(css,js,img)
routes，路由檔案(MVC中的C,controller)
Views，頁面檔案(Ejs範本)
nodejs-demo/bin/www （啟動文件，用於啟動app.js）

開啟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

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檔案複製到專案中對應該的目錄裡。 包括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="http://www.geedoo.info/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- <link href="http://www.geedoo.info/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 %>
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正確。

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

並且已經引進了bootstrap介面框架。

6. 路由功能

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

存取路徑：/，頁數：index.html，不需要登陸，可以直接存取。
存取路徑：/home，頁：home.html，必須使用者登陸後，才可存取。
存取路徑：/login，頁面：login.html，登陸頁面，使用者名稱密碼輸入正確，自動跳到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文件，增加對應的方法。

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 %>
home.html：
<% include header.html %>
<h1>Welcome <%= user.username %>, 欢迎登陆！！</h1>
<a claa="btn" href="http://www.geedoo.info/logout">退出</a>
<% include footer.html %>

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

index.html

<% include header.html %>
<h1>Welcome to <%= title %></h1>
<p><a href="http://www.geedoo.info/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 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
}));
//用于把登录用户设置到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数据库。然后自动写入session信息到数据库中（也可以用mongoose中间件，但是要自己实现session的写入）

app.use(session(….)) 这里是全局设置了session的信息及session信息存储的方式。

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

安装session-mongoose依赖库

npm install connect

npm install session-mongoose

npm install session-mongoose

安装有错误但是没关系。

访问：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是express4.10.4的写法，与express4之前的版本是不一样的。

访问页面可以查看mongodb有没有数据：

nodejs-mongodb
nodejs-mongodb

由于上面配置的 cookie:{maxAge:10000} //expire session in 10 seconds
过期时间，因此你会看到mongodb里面的数据过一段时间就被清除了。
参考：

Mongoose：http://mongoosejs.com/

关于express4.2.0与express3.x操作的区别：http://blog.csdn.net/u013758116/article/details/38758351

8. 页面提示

登陆的大体我们都已经讲完了，最后看一下登陆失败的情况。

我们希望如果用户登陆时，用户名或者密码出错了，会给用户提示，应该如何去实现。

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

登陆的大体我们都已经讲完了，最后看一下登陆失败的情况。

我们希望如果用户登陆时，用户名或者密码出错了，会给用户提示，应该如何去实现。

打开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页面，f7e1051a7314c7d7c4371c24ffe6d522

<% 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. 页面访问控制

网站登陆部分按照我们的求已经完成了，但网站并不安全。

localhost:3000/home，页面本来是登陆以后才访问的，现在我们不要登陆，直接在浏览器输入也可访问。

页面报错了，提示ba980d12e5b7c2433035a997a636db0b 变量出错。

GET /home?user==a 500 15ms
TypeError: D:\workspace\project\nodejs-demo\views\home.html:2
1| bd8252839a1160287e059aba355d0851
>> 2| 4a249f0d628e2318394fd9b75b4636b1Welcome ba980d12e5b7c2433035a997a636db0b, 欢迎登陆！！473f0a7621bec819994bb5020d29372a
3| 3776e88ac50f1d21a105088d366d11bd退出5db79b134e9f6b82c0b36e0489ee08ed
4| bd8252839a1160287e059aba355d0851
Cannot read property 'username' of null
at eval (eval at 8299e0e36aa4be98b826c9c76c3775f0 (D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js:
at eval (eval at 8299e0e36aa4be98b826c9c76c3775f0 (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.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的请求，先调用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('/home');
 }
 next();
}

配置好后，我们未登陆，直接访问localhost:3000/home时或者localhost:3000/logout，就会跳到/login页面

登录后, 访问localhost:3000/login 则直接跳到/home页面

到此，express4 相关内容到此为止。

以上内容是小编给大家分享的Nodejs Express4.x开发框架随手笔记，希望大家喜欢。