NodeJS学习笔记,x开发框架随手笔记

是一个简洁、灵活的 node.js Web 应用开发框架,还允许JS使用运行环境提供的内置对象和方法做一些事情

Express: ?web application framework for?Node.js?Express
是二个简练、灵活的 node.js Web 应用开辟框架,
它提供一名目非常多有力的特点,协理您成立各类 Web 和平运动动设备使用。

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

NodeJS学习笔记,x开发框架随手笔记。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学习笔记,x开发框架随手笔记。nodejs-demo> npm install

npm WARN deprecated
[email protected]:
use serve-favicon module

[email protected]
node_modules\龙8游戏,static-favicon

 

[email protected]
node_modules\debug

NodeJS学习笔记,x开发框架随手笔记。 

[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])

└──
[NodeJS学习笔记,x开发框架随手笔记。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])

└──
[email protected]
([email protected])

E:\project\nodejs-demo>

复制代码

  工程创设成功,运行服务:

 

E:\project\nodejs-demo> npm start

 

>
[email protected]
start E:\project\nodejs-demo

> node ./bin/www

  本地三千端口被展开,在浏览器地址栏输入localhost:三千,访谈成功。

 

  2、目录结构

bin——寄放命令行程序。

node_modules——寄放全体的体系依赖库。

NodeJS学习笔记,x开发框架随手笔记。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:

 

复制代码

 1 var express = require(‘express’);

 2 var path = require(‘path’);

 3 var favicon = require(‘static-favicon’);

 4 var logger = require(‘morgan’);

 5 var cookieParser = require(‘cookie-parser’);

 6 var bodyParser = require(‘body-parser’);

 7 

 8 var routes = require(‘./routes/index’);

 9 var users = require(‘./routes/users’);

10 

NodeJS学习笔记,x开发框架随手笔记。11 var app = express();

12 

13 // view engine setup

14 app.set(‘views’, path.join(__dirname, ‘views’));

15 app.set(‘view engine’, ‘ejs’);

16 

17 app.use(favicon());

18 app.use(logger(‘dev’));

19 app.use(bodyParser.json());

20 app.use(bodyParser.urlencoded());

21 app.use(cookieParser());

22 app.use(express.static(path.join(__dirname, ‘public’)));

23 

NodeJS学习笔记,x开发框架随手笔记。24 app.use(‘/’, routes);

25 app.use(‘/users’, users);

26 

27 /// catch 404 and forward to error handler

28 app.use(function(req, res, next) {

29     var err = new Error(‘Not Found’);

30     err.status = 404;

31     next(err);

32 });

33 

34 /// error handlers

35 

36 // development error handler

37 // will print stacktrace

38 if (app.get(‘env’) === ‘development’) {

39     app.use(function(err, req, res, next) {

40         res.status(err.status || 500);

41         res.render(‘error’, {

42             message: err.message,

43             error: err

44         });

45     });

46 }

NodeJS学习笔记,x开发框架随手笔记。47 

48 // production error handler

49 // no stacktraces leaked to user

50 app.use(function(err, req, res, next) {

51     res.status(err.status || 500);

52     res.render(‘error’, {

53         message: err.message,

54         error: {}

55     });

56 });

57 

58 

59 module.exports = app;

复制代码

  4、Ejs模板

  修改app.js,让ejs模板文件使用扩大名称叫html的公文:

 

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 <!DOCTYPE html>

2 <html lang=”en”>

3 <head>

4     <meta charset=”utf-8″>

5     <title><%= title %></title>

6     <!– Bootstrap –>

7     <link href=”/stylesheets/bootstrap.min.css” rel=”stylesheet”
media=”screen”>

8 </head>

9 <body screen_capture_injected=”true”>

复制代码

  index.html

 

1 <% include header.html %>

2 <h1><%= title %></h1>

3 <p>Welcome to <%= title %></p>

4 <% include footer.html %>

  footer.html

 

1     <script src=”/javascripts/jquery.min.js”></script>

2     <script src=”/javascripts/bootstrap.min.js”></script>

3 </body>

4 </html>

  重启服务,访谈成功。

 

  6、路由

  登陆设计:

 

拜候路线页面
描述

/
index.html
不须要报到,能够直接访谈。

/home
home.html
必得客商登入现在,技艺够访问。

/login
login.html
登陆页面,客户名密码输入准确,自动跳转到home.html。

/logout

退出登陆后,自动跳转到index.html。

  张开app.js文件,扩展路由配置:

 

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 var express = require(‘express’);

 2 var router = express.Router();

 3 

 4 /* GET home page. */

 5 router.get(‘/’, function(req, res) {

 6   res.render(‘index’, { title: ‘Express’ });

 7 });

 8 

 9 router.route(‘/login’)

10 .get(function(req, res) {

11     res.render(‘login’, { title: ‘顾客登陆’ });

12 })

13 .post(function(req, res) {

14     var user={

15         username: ‘admin’,

16         password: ‘123456’

17     }

18     if(req.body.username === user.username && req.body.password ===
user.password){

19         res.redirect(‘/home’);

20     }

21     res.redirect(‘/login’);

22 });

23 

24 router.get(‘/logout’, function(req, res) {

25     res.redirect(‘/’);

26 });

27 

28 router.get(‘/home’, function(req, res) {

29     var user={

30         username:’admin’,

31         password:’123456′

32     }

33     res.render(‘home’, { title: ‘Home’, user: user });

34 });

35 

36 module.exports = router;

复制代码

  创造views/login.html和views/home.html三个公文:

 

  login.html

 

复制代码

 1 <% include header.html %>

 2 <div class=”container”>

 3     <form class=”col-sm-offset-4 col-sm-4 form-horizontal”
role=”form” method=”post”>

 4         <fieldset>

 5             <legend>客户登陆</legend>

 6             <div class=”form-group”>

 7                 <label class=”col-sm-3 control-label”
for=”username”>用户名</label>

 8                 <div class=”col-sm-9″>

 9                     <input type=”text” class=”form-control”
id=”username” name=”username” placeholder=”用户名” required>

10                 </div>

11             </div>

12             <div class=”form-group”>

13                 <label class=”col-sm-3 control-label”
for=”password”>密码</label>

14                 <div class=”col-sm-9″>

15                     <input type=”password” class=”form-control”
id=”password” name=”password” placeholder=”密码” required>

16                 </div>

17             </div>

18             <div class=”form-group”>

19                 <div class=”col-sm-offset-3 col-sm-9″>

20                     <button type=”submit” class=”btn
btn-primary”>登录</button>

21                 </div>

22             </div>

23         </fieldset>

24     </form>

25 </div>

26 <% include footer.html %>

复制代码

  home.html

 

1 <% include header.html %>

2 <h1>Welcome <%= user.username %>, 招待登陆!!</h1>

3 <a class=”btn” href=”/logout”>退出</a>

4 <% include footer.html %>

  修改index.html,扩大登入链接:

 

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:

 

复制代码

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:

 

复制代码

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:

 

复制代码

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 module.exports = {

2     COOKIE_SECRET: ‘ywang1724.com’, 

3     URL: ‘mongodb://127.0.0.1:27017/nodedb’,

4     DB: ‘nodedb’, 

5     HOST: ‘127.0.0.1’,

6     PORT: 27017,

7     USERNAME: ‘admin’,

8     PASSWORD: ‘123456’

9 };

复制代码

  msession.js

 

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

6 module.exports = db;

  修改app.js文件:

 

复制代码

 1 var express = require(‘express’);

 2 var path = require(‘path’);

 3 var favicon = require(‘static-favicon’);

 4 var logger = require(‘morgan’);

 5 var cookieParser = require(‘cookie-parser’);

 6 var bodyParser = require(‘body-parser’);

 7 

 8 //采纳connect-mongodb中间件作为Session存款和储蓄  

 9 var session = require(‘express-session’);  

10 var Settings = require(‘./database/settings’);  

11 var MongoStore = require(‘connect-mongodb’);  

12 var db = require(‘./database/msession’); 

13 

14 var routes = require(‘./routes/index’);

15 var users = require(‘./routes/users’);

16 

17 var app = express();

18 

19 // view engine setup

20 app.set(‘views’, path.join(__dirname, ‘views’));

21 //app.set(‘view engine’, ‘ejs’);

22 app.engine(‘html’, require(‘ejs’).renderFile);

23 app.set(‘view engine’, ‘html’);

24 

25 app.use(favicon());

26 app.use(logger(‘dev’));

27 app.use(bodyParser.json());

28 app.use(bodyParser.urlencoded());

29 app.use(cookieParser());

30 //session配置

31 app.use(session({

32     cookie: { maxAge: 600000 },

33     secret: Settings.COOKIE_SECRET,

34     store: new MongoStore({  

35         username: Settings.USERNAME,

36         password: Settings.PASSWORD,

37         url: Settings.URL,

38         db: db})

39 }))

40 app.use(function(req, res, next){

41     res.locals.user = req.session.user;

42     next();

43 });

44 

45 app.use(express.static(path.join(__dirname, ‘public’)));

46 

47 ……

复制代码

  修改index.js文件:

 

复制代码

 1 var express = require(‘express’);

 2 var router = express.Router();

 3 

 4 /* GET home page. */

 5 router.get(‘/’, function(req, res) {

 6     res.render(‘index’, { title: ‘Express’ });

 7 });

 8 

 9 router.route(‘/login’)

10 .get(function(req, res) {

11     res.render(‘login’, { title: ‘用户登录’ });

12 })

13 .post(function(req, res) {

14     var user = {

15         username: ‘admin’,

16         password: ‘123456’

17     }

18     if(req.body.username === user.username && req.body.password ===
user.password){

19         req.session.user = user;

20         res.redirect(‘/home’);

21     } else {

22         res.redirect(‘/login’);

23     }

24 });

25 

26 router.get(‘/logout’, function(req, res) {

27     req.session.user = null;

28     res.redirect(‘/’);

29 });

30 

31 router.get(‘/home’, function(req, res) {

32     res.render(‘home’, { title: ‘Home’ });

33 });

34 

35 module.exports = router;

复制代码

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

 

  8、页面访谈调节及提醒

  访问调整设计:

 

寻访路径描述

/
任什么人都能够访问,无需验证。

/home
拦截get乞求,调用authentication()进行表明,不经过则自动跳转到登陆页面。

/login
任哪个人都得以访谈,无需证实。

/logout
任何人都得以访谈,没有供给注明。

  修改index.js文件:

 

复制代码

34 router.get(‘/home’, function(req, res) {

35     authentication(req, res);

36     res.render(‘home’, { title: ‘Home’ });

37 });

38 

39 function authentication(req, res) {

40     if (!req.session.user) {

41         return res.redirect(‘/login’);

42     }

43 }

复制代码

  重启服务,访谈成功。

 

  增加页面提醒,修改app.js文件,扩展res.locals.message:

 

复制代码

40 app.use(function(req, res, next) {

41     res.locals.user = req.session.user;

42     var err = req.session.error;

43     delete req.session.error;

44     res.locals.message = ”;

45     if (err) {

46         res.locals.message = ‘<div class=”alert
alert-warning”>’ + err + ‘</div>’;

47     }

48     next();

49 });

复制代码

  修改index.js文件,增加req.session.error:

 

复制代码

 1 var express = require(‘express’);

 2 var router = express.Router();

 3 

 4 /* GET home page. */

 5 router.get(‘/’, function(req, res) {

 6     res.render(‘index’, { title: ‘Express’ });

 7 });

 8 

 9 router.route(‘/login’)

10 .get(function(req, res) {

11     if (req.session.user) {

12         res.redirect(‘/home’);

13     }

14     res.render(‘login’, { title: ‘用户登录’ });

15 })

16 .post(function(req, res) {

17     var user = {

18         username: ‘admin’,

19         password: ‘123456’

20     }

21     if (req.body.username === user.username && req.body.password ===
user.password) {

22         req.session.user = user;

23         res.redirect(‘/home’);

24     } else {

25         req.session.error=’客商名或密码不科学’;

26         res.redirect(‘/login’);

27     }

28 });

29 

30 router.get(‘/logout’, function(req, res) {

31     req.session.user = null;

32     res.redirect(‘/’);

33 });

34 

35 router.get(‘/home’, function(req, res) {

36     authentication(req, res);

37     res.render(‘home’, { title: ‘Home’ });

38 });

39 

40 function authentication(req, res) {

41     if (!req.session.user) {

42         req.session.error=’请首先登场入’;

43         return res.redirect(‘/login’);

44     }

45 }

46 

47 module.exports = router;

复制代码

  修改login.html,增加<%- message %>:

 

5 <legend>客商登入</legend>

6 <%- message %>

7 <div class=”form-group”>

JS是脚本语言,脚本语言都要求三个剖判器技能运营。对于写在HTML页面…

目录

此文重视介绍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

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主程序:

nodemon app.js

接下来修改程序,看看是还是不是会动态加载。会有下边提醒:

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

代表生效。

测试:

地面包车型地铁三千端口被展开,通过浏览器访谈: localhost:三千

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,增Garden陆链接

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

安装有荒唐不过没什么。

访问:,正常

修改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有未有数量:

龙8游戏 1

nodejs-mongodb
nodejs-mongodb

是因为地方配置的 cookie:{maxAge:一千0} //expire session in 10 seconds
过期日子,因而你会见到mongodb里面包车型地铁数目过一段时间就被拔除了。
参考:

Mongoose:

关于express4.2.0与express3.x操作的分别:

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页面,<%- 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');
 }
};

让我们来看看效果: 输入错误的和密码,
客户名:dad,密码:da

boostrap-nodejs

龙8游戏 2

9. 页面访谈调整

网站登入部分遵守大家的求已经做到了,但网址并不安全。

localhost:2000/home,页面本来是登入现在才访谈的,未来我们不要登入,直接在浏览器输入也可访问。

页面报错了,提示<%= 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=””>退出</a>
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

以此页面被展开荒,因为未有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:三千/home时或然localhost:2000/logout,就能跳到/login页面

报到后, 访谈localhost:三千/login 则平素跳到/home页面

到此,express4 相关内容到此甘休。

如上内容是我给我们大快朵颐的Nodejs
Express4.x开垦框架随手笔记,希望我们爱不释手。

你或然感兴趣的小说:

  • node.js
    Web应用框架Express入门指南
  • NodeJS框架Express的沙盘视图机制解析
  • windows下安装nodejs及框架express
  • Node.js的Express框架使用上手指南
  • 从零开头学习Node.js连串教程四:多页面完毕的数学生运动算示例
  • 从零开端学习Node.js种类教程三:图片上传和展现方式言传身教
  • 从零开端学习Node.js类别教程二:文本提交与呈现方式
  • 从零最早学习Node.js类别教程一:http
    get和post用法剖析
  • 从零伊始学习Node.js连串教程之基于connect和express框架的多页面完结数学生运动算示例