NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证
2014-08-17 16:39
961 查看
JS是脚本语言,脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS,浏览器充当了解析器的角色。而对于需要独立运行的JS,NodeJS就是一个解析器。每一种解析器都是一个运行环境,不但允许JS定义各种数据结构,进行各种计算,还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM,浏览器就提供了document之类的内置对象。而运行在NodeJS中的JS的用途是操作磁盘文件或搭建HTTP服务器,NodeJS就相应提供了fs、http等内置对象。Express作为NodeJS的Web应用框架,可以帮助我们快速开发Web网站。
npm:1.4.21
OS:Win7旗舰版 32bit
Express:4.2.0
MongoDB:2.6.3
根据提示下载依赖包:
工程建立成功,启动服务:
本地3000端口被打开,在浏览器地址栏输入localhost:3000,访问成功。
node_modules——存放所有的项目依赖库。
public——存放静态文件,包括css、js、img等。
routes——存放路由文件。
views——存放页面文件(ejs模板)。
app.js——程序启动文件。
package.json——项目依赖配置及开发者信息。
修改完成后,重命名views/index.ejs为views/index.html。重启服务,访问成功。
接下来,把index.html分成三个部分:
header.html——页面头部区域。
index.html——页面内容区域。
footer.html——页面底部区域。
header.html
index.html
footer.html
重启服务,访问成功。
打开app.js文件,增加路由配置:
打开routes/index.js文件,添加对应方法:
创建views/login.html和views/home.html两个文件:
login.html
home.html
修改index.html,增加登录链接:
路由及页面已准备好,重启服务,访问成功。
安装中间件connect-mongodb:
安装中间件mongodb:
添加database/settings.js和database/msession.js这两个文件:
settings.js
msession.js
修改app.js文件:
修改index.js文件:
本地安装数据库MongoDB,新建用户nodedb。重启服务,访问成功。
修改index.js文件:
重启服务,访问成功。
添加页面提示,修改app.js文件,增加res.locals.message:
修改index.js文件,增加req.session.error:
修改login.html,增加<%- message %>:
重启服务,访问成功。输入错误用户名密码:
图1 登录不成功提示
开发环境
NodeJS:v0.10.30npm:1.4.21
OS:Win7旗舰版 32bit
Express:4.2.0
MongoDB:2.6.3
E:\project> node -v v0.10.30 E:\project> npm -v 1.4.21 E:\project> express -V 4.2.0
1、建立工程
使用express命令建立工程,并支持ejs:E:\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/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 install dependencies: $ cd nodejs-demo && npm install run the app: $ DEBUG=nodejs-demo ./bin/www E:\project>
根据提示下载依赖包:
E:\project> cd .\nodejs-demo E:\project\nodejs-demo> npm install npm WARN deprecated static-favicon@1.0.2: use serve-favicon module static-favicon@1.0.2 node_modules\static-favicon debug@0.7.4 node_modules\debug ejs@0.8.8 node_modules\ejs cookie-parser@1.0.1 node_modules\cookie-parser ├── cookie-signature@1.0.3 └── cookie@0.1.0 morgan@1.0.1 node_modules\morgan └── bytes@0.3.0 body-parser@1.0.2 node_modules\body-parser ├── qs@0.6.6 ├── raw-body@1.1.7 (bytes@1.0.0, string_decoder@0.10.25-1) └── type-is@1.1.0 (mime@1.2.11) express@4.2.0 node_modules\express ├── parseurl@1.0.1 ├── utils-merge@1.0.0 ├── cookie@0.1.2 ├── merge-descriptors@0.0.2 ├── escape-html@1.0.1 ├── range-parser@1.0.0 ├── fresh@0.2.2 ├── cookie-signature@1.0.3 ├── debug@0.8.1 ├── methods@1.0.0 ├── buffer-crc32@0.2.1 ├── serve-static@1.1.0 ├── path-to-regexp@0.1.2 ├── qs@0.6.6 ├── send@0.3.0 (debug@0.8.0, mime@1.2.11) ├── accepts@1.0.1 (negotiator@0.4.7, mime@1.2.11) └── type-is@1.1.0 (mime@1.2.11) E:\project\nodejs-demo>
工程建立成功,启动服务:
E:\project\nodejs-demo> npm start > nodejs-demo@0.0.1 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——项目依赖配置及开发者信息。
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: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的文件:// 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');
修改完成后,重命名views/index.ejs为views/index.html。重启服务,访问成功。
5、安装常用库及页面分离
添加bootstrap和jQuery:E:\project\nodejs-demo> npm install bootstrap bootstrap@3.2.0 node_modules\bootstrap E:\project\nodejs-demo> npm install jquery jquery@2.1.1 node_modules\jquery E:\project\nodejs-demo>
接下来,把index.html分成三个部分:
header.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"> </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="/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.use('/', routes); app.use('/users', users); app.use('/login', routes); app.use('/logout', routes); app.use('/home', routes);
打开routes/index.js文件,添加对应方法:
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
<% 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
<% include header.html %> <h1>Welcome <%= user.username %>, 欢迎登录!!</h1> <a class="btn" href="/logout">退出</a> <% include footer.html %>
修改index.html,增加登录链接:
<% include header.html %> <h1>Welcome to <%= title %></h1> <p><a href="/login">登录</a></p> <% include footer.html %>
路由及页面已准备好,重启服务,访问成功。
7、session
安装中间件express-session:E:\project\nodejs-demo> npm install express-session express-session@1.7.5 node_modules\express-session ├── cookie@0.1.2 ├── cookie-signature@1.0.4 ├── on-headers@1.0.0 ├── utils-merge@1.0.0 ├── parseurl@1.3.0 ├── buffer-crc32@0.2.3 ├── depd@0.4.4 ├── debug@1.0.4 (ms@0.6.2) └── uid-safe@1.0.1 (base64-url@1.0.0, mz@1.0.0) E:\project\nodejs-demo>
安装中间件connect-mongodb:
E:\project\nodejs-demo> npm install connect-mongodb \ > kerberos@0.0.3 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 | > bson@0.2.11 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 connect-mongodb@1.1.5 node_modules\connect-mongodb ├── connect@1.9.2 (mime@1.2.11, formidable@1.0.15, qs@1.2.2) └── mongodb@1.4.8 (kerberos@0.0.3, readable-stream@1.0.27-1, bson@0.2.11) E:\project\nodejs-demo>
安装中间件mongodb:
E:\project\nodejs-demo> npm install mongodb - > kerberos@0.0.3 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 | > bson@0.2.11 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 mongodb@1.4.8 node_modules\mongodb ├── kerberos@0.0.3 ├── readable-stream@1.0.27-1 (isarray@0.0.1, string_decoder@0.10.25-1, inheri ts@2.0.1, core-util-is@1.0.1) └── bson@0.2.11 (nan@1.2.0) E:\project\nodejs-demo>
添加database/settings.js和database/msession.js这两个文件:
settings.js
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
var Settings = require('./settings'); var Db = require('mongodb').Db; var Server = require('mongodb').Server; var db = new Db(Settings.DB, new Server(Settings.HOST, Settings.PORT, {auto_reconnect:true, native_parser: true}),{safe: false}); module.exports = db;
修改app.js文件:
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文件:
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 | 任何人都可以访问,不需要认证。 |
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:
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:
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 %>:
<legend>用户登录</legend> 6 <%- message %> 7 <div class="form-group">
重启服务,访问成功。输入错误用户名密码:
图1 登录不成功提示
相关文章推荐
- NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证
- NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证
- NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证
- NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证
- NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证
- 搭建开发框架Express,实现Web网站登录验证
- 搭建开发框架Express,实现Web网站登录验证
- 搭建开发框架Express,实现Web网站登录验证
- 搭建开发框架Express,实现Web网站登录验证
- Spring4.X + Spring MVC + Mybatis3 零配置应用开发框架搭建详解 (3) - 实现最基本的登录处理
- Ubuntu下搭建NodeJS+Express WEB开发框架
- SSH物流开发系统设计:搭建框架并实现登录
- j2ee 简单网站搭建:(七)使用 shiro 结合 jcaptcha 实现用户验证登录
- 使用SSM框架搭建Web服务器实现登录功能(Spring+SpringMVC+Mybatis)
- IOS开发-基于WebDriverAgent代理服务,实现iOS手机app自动化测试的框架搭建
- 使用SSM(Spring+SpringMVC+Mybatis)框架搭建服务器实现登录验证
- 从零开始实现asp.net MVC4框架网站的用户登录以及权限验证模块 详细教程
- 使用SSM框架搭建Web服务器实现登录功能(Spring+SpringMVC+Mybatis)
- 完整使用SSM框架(Spring SpringMVC Mybatis)搭建web服务器实现登录功能
- 使用SSM框架搭建Web服务器实现登录功能(Spring+SpringMVC+Mybatis)