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

目录

　　开发环境
　　1、建立工程
　　2、目录结构
　　3、Express配置文件
　　4、Ejs模板
　　5、安装常用库及页面分离
　　6、路由
　　7、session
　　8、页面访问控制及提示

　　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、建立工程

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

　　根据提示下载依赖包：

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

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

　　2、目录结构

bin——存放命令行程序。

node_modules——存放所有的项目依赖库。

public——存放静态文件，包括css、js、img等。

routes——存放路由文件。

views——存放页面文件（ejs模板）。

app.js——程序启动文件。

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的文件：

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

　　index.html

　　 footer.html

　重启服务，访问成功。

　　6、路由

　　登录设计：

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

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

　打开routes/index.js文件，添加对应方法：

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

　　login.html

　　home.html

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

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

　　7、session

　　安装中间件express-session：

　　安装中间件connect-mongodb：

　　安装中间件mongodb：

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

　　settings.js

　　msession.js

　　修改app.js文件：

　　修改index.js文件：

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

　　8、页面访问控制及提示

　　访问控制设计：

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

　　修改index.js文件：

　　重启服务，访问成功。

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

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

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

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