学习NodeJS也有一两个星期了,感觉进度很慢,估计是自己智商跟不上同时也很不习惯js语言,不过为了毕设也是豁出去了。这里就用Nodejs+Mongodb写一个注册与登入案例,全当学习,高手绕过。
首先明确功能:1、登入;2、注册,3、显示登入信息。这是一个最简单的功能。接下下来开始编写。默认大家都安装好了工具(WebStorm+Mongodb)。
1、建立工程MongodbTest,在工程下建立一个package.json依赖表。将所需要的模板添加进去。
package.json.
<span style="font-size:18px;">{
"name": "mongodbtest",
"version": "0.0.1",
"author":"xxk",
"dependencies": {
"express": "3.2.2",
"ejs": "*"
}
}</span>
然后再cmd下进入该工程执行 npm install将所要的模块安装进去,npm如依据package.json中的dependencies下定义的模块依次安装。
2、安装成功后,在工程中会多了一个文件夹node_modules。安装的模块就在这个文件夹下。下面在该工程中新建一个app.js。将需要的模块引进去require(''); app.js是工程的一个入口
3、首先配置Express
<span style="font-size:18px;">/**
* modules dependencies
* @type {exports}
* 模板依赖
*/
var express = require('express');
var routes = require('./routes');
var http = require('http');
var ejs = require('ejs');
var path =require('path');
var SessionStore=require('session-mongoose')(express);
var store=new SessionStore({
url:"mongodb://localhost/session",
interval: 120000 // expiration check worker run interval in millisec (default: 60000)
});
var app = express();
//all environment
app.set('port',process.env.port||3000);//set port
app.set('view',__dirname+'views');
app.engine('.html',ejs.__express);
app.set("view engine",'html'); //解析的模板是html
//添加中间件
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.cookieSession({secret : 'blog.fens.me'}));
app.use(express.session({
secret : 'blog.fens.me',
store: store,
cookie: { maxAge: 900000 } // expire session in 15 min or 900 seconds
}));
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-error">' + err + '</div>';
}
next();
});
app.use(app.router);
app.use(express.static(path.join(__dirname,'public')));
//development only
if('development'==app.get('evn')){
app.use(express.errorHandler());
}
</span>
首先我们导入Express模块,routes是一个本地文件夹模块,即./routes/index.js,它的功能是为指定路径组织返回内容相当于MVC框架中的控制器。通过express()创建了一个应用实例,后面的所有操作都是针对这个实例进行的。下面的app.set()是Express设置参数的工具,接受一个键(key)和一个值(value),可用的参数如下:
1、basepatn:基础地址,通常用于res.redirect()跳转。
2、views:视图文件的目录,存放文档文件。
3、view engine:视图模板引擎
4、view options:全局视图对象
5、view cache:全局视图缓存
6、case sensitive routes:路径区分大小写
7、strict routing:严格路径,启用后会忽略路径末尾的"/"。
8、jsonp callback:开启透明的JSONP支持。
Express依赖于connect提供了大量的中间件,可以通过app.use启用,以上启用的中间件功能为。
1、bodyParse:解析客户端请求,通常是通过post发送内容。
2、methodOverride:用于支持定制的HTTP方法。
3、router:项目的路由支持
4、static:提供静态文件支持
5、errorHandler:错误控制器。
<span style="font-size:18px;">//basic
app.get('/',routes.index);</span>
app.get('/',routes.index),是一个路由控制器,用户如果访问“/”,路径则由routes.index来控制。
<span style="font-size:18px;">http.createServer(app).listen(app.get('port'),function(){
console.log("Express server listening on port"+app.get('port'));
});</span>
最后服务器通过http.createServer().listen(app.get('port'))启动,监听3000端口
4、routes/index.js
routes/index.js是路由文件,相当于控制器,用于组织展示控制界面。
<span style="font-size:18px;">exports.index = function(req, res){
console.log('xx');
res.render('index', { title: 'Index' });
};
exports.login=function(req,res){
res.render('login',{title:'用户登录'});
};</span>
app.js中通过app.get('/',routes.index);将"/"路径映射到exports.index函数。其中只有一句res.render('index',{title:'Index'})
,功能是调用模板解析引擎,翻译名为index模板,并传入一个对象作为参数,这个对象只有一个属性,即title:"Index"。
完整源码:
app.js
<span style="font-size:18px;">/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, movie = require('./routes/movie')
, http = require('http')
, path = require('path')
, ejs = require('ejs')
, SessionStore = require("session-mongoose")(express);
var store = new SessionStore({
url: "mongodb://localhost/session",
interval: 120000 // expiration check worker run interval in millisec (default: 60000)
});
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.engine('.html', ejs.__express);
app.set('view engine', 'html');// app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.cookieSession({secret : 'blog.fens.me'}));
app.use(express.session({
secret : 'blog.fens.me',
store: store,
cookie: { maxAge: 900000 } // expire session in 15 min or 900 seconds
}));
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-error">' + err + '</div>';
next();
});
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
//basic
app.get('/', routes.index);
app.all('/login',notAuthentication);
app.get('/login',routes.login);
app.post('/login',routes.doLogin);
app.get('/logout',authentication);
app.get('/logout',routes.logout);
app.get('/home',authentication);
app.get('/home',routes.home);
http.createServer(app).listen(app.get('port'),function(){
console.log("Express server listening on port"+app.get('port'));
});
function notAuthentication(req,res,next){
if(req.session.user){
console.log("xx="+req.session.user)
req.session.error='已登录';
return res.redirect('/home');
}
next();
};
function authentication(req,res,next){
if(!req.session.user){
console.log(req.session.user);
req.session.error="请先登录";
return res.redirect('/login');
}
next();
}
</span>
routes/index.js
<span style="font-size:18px;">/**
* Created by kevin on 2015/1/14.
*/
exports.index = function(req, res){
console.log('xx');
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){
req.session.user=user;
return res.redirect('/home');
}else{
req.session.error="用户名或密码不正确";
return res.redirect('/login');
}
};
exports.logout=function(req,res){
req.session.user=null;
res.redirect('/');
}
exports.home=function(req,res){
res.render('home',{title:'home'});
};</span>
views/index.html
<span style="font-size:18px;"><% include header.html %>
<h1>Welcome to <%= title %></h1>
<p><a href="/login">登陆</a></p>
<% include footer.html %></span>
views/header.html
<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%=: title %></title>
<!-- Bootstrap -->
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> -->
</head>
<body screen_capture_injected="true"></span>
views/footer.html
<span style="font-size:18px;"><script src="/javascripts/jquery-1.9.1.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/movie.js"></script>
<script src="/javascripts/jquery.json-2.4.js"></script>
</body>
</html></span>
views/home.html
<span style="font-size:18px;"><% include header.html %>
<h1>Welcome <%= user.username %>, 欢迎登陆!!</h1>
<a claa="btn" href="/logout">退出</a>
<% include footer.html %></span>
views/login.html
<span style="font-size:18px;"><% 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="text" 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 %>
</span>