NodeJS学习笔记——搭建开发框架Express，实现Web网站登录验证

Posted winyh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了NodeJS学习笔记——搭建开发框架Express，实现Web网站登录验证相关的知识，希望对你有一定的参考价值。

 

 
 
 

目录

　　JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在html页面里 的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。每一种解析器都是一个运行环境，不但允许JS定义各种数据结 构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了 document之类的内置对象。而运行在NodeJS中的JS的用途是操作磁盘文件或搭建HTTP服务器，NodeJS就相应提供了fs、http等内 置对象。Express作为NodeJS的Web应用框架，可以帮助我们快速开发Web网站。

　　开发环境

  • NodeJS：v0.10.30
  • npm：1.4.21
  • OS：Win7旗舰版 32bit
  • Express：4.2.0
  • MongoDB：2.6.3
    1
    2
    E:\project> node -v
    v0.10.30 E:\project> npm -v 1.4.21 E:\project> express -V 4.2.0

     

     

　　1、建立工程

　　使用express命令建立工程，并支持ejs：

  

 

　　根据提示下载依赖包：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
E:\project> cd .\nodejs-demo
E:\project\nodejs-demo> npm install
npm WARN deprecated [email protected]: use serve-favicon module
[email protected] node_modules\static-favicon
 
[email protected] node_modules\debug
 
[email protected] node_modules\ejs
 
[email protected] node_modules\cookie-parser
├── [email protected] └── [email protected] [email protected] node_modules\morgan
└── [email protected] [email protected] node_modules\body-parser
├── [email protected] ├── [email protected] ([email protected], [email protected])
└── type[email protected] ([email protected])
 
[email protected] node_modules\express
├── [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], [email protected])
├── [email protected] ([email protected], [email protected])
└── type[email protected] ([email protected])
E:\project\nodejs-demo>

 

 

　　工程建立成功，启动服务：

1
E:\project\nodejs-demo> npm start > [email protected] start E:\project\nodejs-demo > node ./bin/www

 

 

 

　　本地3000端口被打开，在浏览器地址栏输入localhost:3000，访问成功。

　　2、目录结构

  • bin——存放命令行程序。
  • node_modules——存放所有的项目依赖库。
  • public——存放静态文件，包括css、js、img等。
  • routes——存放路由文件。
  • views——存放页面文件（ejs模板）。
  • app.js——程序启动文件。
  • package.json——项目依赖配置及开发者信息。
 
1
2
3
4
5
6
7
8
9
10
11
E:\project\nodejs-demo> dir
 
 
    目录: E:\project\nodejs-demo
 
 
Mode                LastWriteTime     Length Name ----                -------------     ------ ---- d----         2014/8/16     21:55 bin
d----         2014/8/16     22:03 node_modules
d----         2014/8/16     21:55 public
d----         2014/8/16     21:55 routes
d----         2014/8/16     21:55 views -a---         2014/8/16     21:55       1375 app.js -a---         2014/8/16     21:55        327 package.json

 

 

　　3、Express配置文件

　　打开app.js：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var express = require(‘express‘);
var path = require(‘path‘);
var favicon = require(‘static-favicon‘);
var logger = require(‘morgan‘);
var cookieParser = require(‘cookie-parser‘);
var bodyParser = require(‘body-parser‘);
 
var routes = require(‘./routes/index‘);
var users = require(‘./routes/users‘);
 
var app = express();
 
// view engine setup
app.set(‘views‘, path.join(__dirname, ‘views‘));
app.set(‘view engine‘, ‘ejs‘);
 
app.use(favicon());
app.use(logger(‘dev‘));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, ‘public‘)));
 
app.use(‘/‘, routes);
app.use(‘/users‘, users);
 
/// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error(‘Not Found‘);
    err.status = 404;
    next(err);
});
 
/// error handlers
 
// development error handler
// will print stacktrace
if (app.get(‘env‘) === ‘development‘) {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render(‘error‘, {
            message: err.message,
            error: err
        });
    });
}
 
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render(‘error‘, {
        message: err.message,
        error: {}
    });
});
 
 
module.exports = app;

 

 

　　4、Ejs模板

　　修改app.js，让ejs模板文件使用扩展名为html的文件：

1
2
3
4
5
13 // view engine setup
14 app.set(‘views‘, path.join(__dirname, ‘views‘));
15 //app.set(‘view engine‘, ‘ejs‘);
16 app.engine(‘html‘, require(‘ejs‘).renderFile);
17 app.set(‘view engine‘, ‘html‘);

 

 

 

　　修改完成后，重命名views/index.ejs为views/index.html。重启服务，访问成功。

　　5、安装常用库及页面分离

　　添加bootstrap和jQuery：

E:\project\nodejs-demo> npm install bootstrap
[email protected] node_modules\bootstrap
E:\project\nodejs-demo> npm install jquery
[email protected] node_modules\jquery
E:\project\nodejs-demo>

　　接下来，把index.html分成三个部分：

  • header.html——页面头部区域。
  • index.html——页面内容区域。
  • footer.html——页面底部区域。

　　header.html

 
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><%= title %></title>
    <!-- Bootstrap -->
    <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body screen_capture_injected="true">

 

 

　　index.html

 
1
2
3
4
1 <% include header.html %>
2 <h1><%= title %></h1>
3 <p>Welcome to <%= title %></p>
4 <% include footer.html %>

 

 

　　 footer.html

 

1
2
3
4
5
6
<script src="/javascripts/jquery.min.js"></script>
 <script src="/javascripts/bootstrap.min.js"></script>
 </body>
 </html>
 
　

 

 


 

　重启服务，访问成功。

　　6、路由

　　登录设计：

访问路径 页面 描述
/ index.html 不需要登录，可以直接访问。
/home home.html 必须用户登录以后，才可以访问。
/login login.html 登录页面，用户名密码输入正确，自动跳转到home.html。
/logout 无 退出登录后，自动跳转到index.html。

　　打开app.js文件，增加路由配置：

 
1
2
3
4
5
26 app.use(‘/‘, routes);
27 app.use(‘/users‘, users);
28 app.use(‘/login‘, routes);
29 app.use(‘/logout‘, routes);
30 app.use(‘/home‘, routes);

 

 

　打开routes/index.js文件，添加对应方法：
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var express = require(‘express‘);
var router = express.Router();
 
/* GET home page. */
router.get(‘/‘, function(req, res) {
  res.render(‘index‘, { title: ‘Express‘ });
});
 
router.route(‘/login‘)
.get(function(req, res) {
    res.render(‘login‘, { title: ‘用户登录‘ });
})
.post(function(req, res) {
    var user={
        username: ‘admin‘,
        password: ‘123456‘
    }
    if(req.body.username === user.username && req.body.password === user.password){
        res.redirect(‘/home‘);
    }
    res.redirect(‘/login‘);
});
 
router.get(‘/logout‘, function(req, res) {
    res.redirect(‘/‘);
});
 
router.get(‘/home‘, function(req, res) {
    var user={
        username:‘admin‘,
        password:‘123456‘
    }
    res.render(‘home‘, { title: ‘Home‘, user: user });
});
 
module.exports = router;

 

 

　　创建views/login.html和views/home.html两个文件：

　　login.html

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<% include header.html %>
<div class="container">
    <form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post">
        <fieldset>
            <legend>用户登录</legend>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="username">用户名</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="password">密码</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="password" name="password" placeholder="密码" required>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <button type="submit" class="btn btn-primary">登录</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
<% include footer.html %>

 

 

　　home.html

 
1
2
3
4
1 <% include header.html %>
2 <h1>Welcome <%= user.username %>, 欢迎登录！！</h1>
3 <a class="btn" href="/logout">退出</a>
4 <% include footer.html %>

 

 

　修改index.html，增加登录链接：

 

1
2
3
4
1 <% include header.html %>
2     <h1>Welcome to <%= title %></h1>
3     <p><a href="/login">登录</a></p>
4 <% include footer.html %>

 

 

　　路由及页面已准备好，重启服务，访问成功。

 

　　7、session

　　安装中间件express-session：

 
1
2
3
4
5
E:\project\nodejs-demo> npm install express-session
[email protected] node_modules\express-session
├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected])
E:\project\nodejs-demo>

 

 

　　安装中间件connect-mongodb：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
E:\project\nodejs-demo> npm install connect-mongodb
\ > [email protected] install E:\project\nodejs-demo\node_modules\connect-mongodb\nod
e_modules\mongodb\node_modules\kerberos > (node-gyp rebuild 2> builderror.log) || (exit 0) | E:\project\nodejs-demo\node_modules\connect-mongodb\node_modules\mongodb\node_mo
dules\kerberos>node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\
..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild |
> [email protected] install E:\project\nodejs-demo\node_modules\connect-mongodb\node_m
odules\mongodb\node_modules\bson > (node-gyp rebuild 2> builderror.log) || (exit 0)
 
 
E:\project\nodejs-demo\node_modules\connect-mongodb\node_modules\mongodb\node_mo
dules\bson>node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\.
.\node_modules\node-gyp\bin\node-gyp.js" rebuild
[email protected] node_modules\connect-mongodb
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected])
E:\project\nodejs-demo>

 

 

　　安装中间件mongodb：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
E:\project\nodejs-demo> npm install mongodb -
 
 
> [email protected] install E:\project\nodejs-demo\node_modules\mongodb\node_module
s\kerberos > (node-gyp rebuild 2> builderror.log) || (exit 0) - E:\project\nodejs-demo\node_modules\mongodb\node_modules\kerberos>node "C:\Progr
am Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\b
in\node-gyp.js" rebuild |
> [email protected] install E:\project\nodejs-demo\node_modules\mongodb\node_modules\b
son > (node-gyp rebuild 2> builderror.log) || (exit 0)
 
 
E:\project\nodejs-demo\node_modules\mongodb\node_modules\bson>node "C:\Program F
iles\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\n
ode-gyp.js" rebuild
[email protected] node_modules\mongodb
├── [email protected] ├── [email protected] ([email protected], [email protected], inheri
[email protected], [email protected])
└── [email protected] ([email protected])
E:\project\nodejs-demo>

 

 

　　添加database/settings.js和database/msession.js这两个文件：

　　settings.js

 
1
2
3
4
5
6
7
8
9
module.exports = {
    COOKIE_SECRET: ‘ywang1724.com‘,
    URL: ‘mongodb://127.0.0.1:27017/nodedb‘,
    DB: ‘nodedb‘,
    HOST: ‘127.0.0.1‘,
    PORT: 27017,
    USERNAME: ‘admin‘,
    PASSWORD: ‘123456‘
};

 

 

　　msession.js

 

1
2
3
4
5
6
1 var Settings = require(‘./settings‘);
2 var Db = require(‘mongodb‘).Db;
3 var Server = require(‘mongodb‘).Server;
4 var db = new Db(Settings.DB, new Server(Settings.HOST, Settings.PORT, {auto_reconnect:true, native_parser: true}),{safe: false});
5
6 module.exports = db;

 

 

 

　　修改app.js文件：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var express = require(‘express‘);
var path = require(‘path‘);
var favicon = require(‘static-favicon‘);
var logger = require(‘morgan‘);
var cookieParser = require(‘cookie-parser‘);
var bodyParser = require(‘body-parser‘);
 
//采用connect-mongodb中间件作为Session存储 
var session = require(‘express-session‘); 
var Settings = require(‘./database/settings‘); 
var MongoStore = require(‘connect-mongodb‘); 
var db = require(‘./database/msession‘);
 
var routes = require(‘./routes/index‘);
var users = require(‘./routes/users‘);
 
var app = express();
 
// view engine setup
app.set(‘views‘, path.join(__dirname, ‘views‘));
//app.set(‘view engine‘, ‘ejs‘);
app.engine(‘html‘, require(‘ejs‘).renderFile);
app.set(‘view engine‘, ‘html‘);
 
app.use(favicon());
app.use(logger(‘dev‘));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
//session配置
app.use(session({
    cookie: { maxAge: 600000 },
    secret: Settings.COOKIE_SECRET,
    store: new MongoStore({ 
        username: Settings.USERNAME,
        password: Settings.PASSWORD,
        url: Settings.URL,
        db: db})
}))
app.use(function(req, res, next){
    res.locals.user = req.session.user;
    next();
});
 
app.use(express.static(path.join(__dirname, ‘public‘)));
 
......

 

 

　　修改index.js文件：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var express = require(‘express‘);
var router = express.Router();
 
/* GET home page. */
router.get(‘/‘, function(req, res) {
    res.render(‘index‘, { title: ‘Express‘ });
});
 
router.route(‘/login‘)
.get(function(req, res) {
    res.render(‘login‘, { title: ‘用户登录‘ });
})
.post(function(req, res) {
    var user = {
        username: ‘admin‘,
        password: ‘123456‘
    }
    if(req.body.username === user.username && req.body.password === user.password){
        req.session.user = user;
        res.redirect(‘/home‘);
    } else {
        res.redirect(‘/login‘);
    }
});
 
router.get(‘/logout‘, function(req, res) {
    req.session.user = null;
    res.redirect(‘/‘);
});
 
router.get(‘/home‘, function(req, res) {
    res.render(‘home‘, { title: ‘Home‘ });
});
 
module.exports = router;

 

 

　　本地安装数据库MongoDB，新建用户nodedb。重启服务，访问成功。

　　8、页面访问控制及提示

　　访问控制设计：

访问路径 描述
/ 任何人都可以访问，不需要认证。
/home 拦截get请求，调用authentication()进行认证，不通过则自动跳转到登录页面。
/login 任何人都可以访问，不需要认证。
/logout 任何人都可以访问，不需要认证。

　　修改index.js文件：

 
1
2
3
4
5
6
7
8
9
10
router.get(‘/home‘, function(req, res) {
    authentication(req, res);
    res.render(‘home‘, { title: ‘Home‘ });
});
 
function authentication(req, res) {
    if (!req.session.user) {
        return res.redirect(‘/login‘);
    }
}

 

 

　　重启服务，访问成功。

　　添加页面提示，修改app.js文件，增加res.locals.message：

 
1
2
3
4
5
6
7
8
9
10
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-warning">‘ + err + ‘</div>‘;
    }
    next();
});

 

 

　　修改index.js文件，增加req.session.error：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var express = require(‘express‘);
var router = express.Router();
 
/* GET home page. */
router.get(‘/‘, function(req, res) {
    res.render(‘index‘, { title: ‘Express‘ });
});
 
router.route(‘/login‘)
.get(function(req, res) {
    if (req.session.user) {
        res.redirect(‘/home‘);
    }
    res.render(‘login‘, { title: ‘用户登录‘ });
})
.post(function(req, res) {
    var user = {
        username: ‘admin‘,
        password: ‘123456‘
    }
    if (req.body.username === user.username && req.body.password === user.password) {
        req.session.user = user;
        res.redirect(‘/home‘);
    } else {
        req.session.error=‘用户名或密码不正确‘;
        res.redirect(‘/login‘);
    }
});
 
router.get(‘/logout‘, function(req, res) {
    req.session.user = null;
    res.redirect(‘/‘);
});
 
router.get(‘/home‘, function(req, res) {
    authentication(req, res);
    res.render(‘home‘, { title: ‘Home‘ });
});
 
function authentication(req, res) {
    if (!req.session.user) {
        req.session.error=‘请先登录‘;
        return res.redirect(‘/login‘);
    }
}
 
module.exports = router;

 

 

　　修改login.html，增加<%- message %>：

 

1
2
3
5 <legend>用户登录</legend>
6 <%- message %>
7 <div class="form-group">

 

 

 

　　重启服务，访问成功。输入错误用户名密码：

技术分享



以上是关于NodeJS学习笔记——搭建开发框架Express，实现Web网站登录验证的主要内容，如果未能解决你的问题，请参考以下文章

express学习笔记一

nodejs 使用express搭建框架总是报错。

Windows环境下，从零开始搭建Nodejs+Express+Ejs框架---安装nodejs

express搭建简易web的服务器

从0开始学习node＋express；

nodejs学习笔记--Express下安装模版引擎ejs