jade宓膕javacript void 0中怎么取到后台传来的json变量

jade模板后台传台的Object变量,另一个请求取出来是自动转成Array - CNode技术社区
积分: 6460
这家伙很懒,什么个性签名都没有留下。
比如在 post 请求里
req.flash(“data”,{bj:100,sh:200});
get请求里 取得 data
req.flash(“data”);
[ { bj: 100, sh: 200 } ]
如果再传到模板用
res.render(‘page’, {data:JSON.stringify(data[0]));
用 var data= !{data} 这样取
空值的话最后解析出来 是var data=
有值的话提示
SyntaxError: missing ] after element list
var data= [object Object]
(!{data}) {
var data=!{data};
空值解析出来是 if() 会报语法错误
如果是传列表
res.render(‘page’, {data:JSON.stringify(data));
只不过页面里是一个列表,每次再用下标选一下
没法直接传object
只能从object -& list -& object
CNode 社区为国内最专业的 Node.js 开源技术社区,致力于 Node.js 的技术研究。
服务器赞助商为
,存储赞助商为
,由提供应用性能服务。
新手搭建 Node.js 服务器,推荐使用无需备案的CNode:Node.js专业中文社区
积分: 1615
雁过无声,叶落留痕——【叶落之痕】
CNode 社区为国内最专业的 Node.js 开源技术社区,致力于 Node.js 的技术研究。
服务器赞助商为
,存储赞助商为
,由提供应用性能服务。
新手搭建 Node.js 服务器,推荐使用无需备案的前端开发模板引擎 -- Jade之数据的动态传递和流程控制 - 推酷
前端开发模板引擎 -- Jade之数据的动态传递和流程控制
文章首发于前端乱炖社区, 现在搬迁过来了.
前面介绍了一些
的简单用法,这篇文章为大家讲一下
中如何进行数据的动态传递和流程控制,干货来咯~
中简单的变量定义和使用
静态页面的过程中,免不了会碰到一些需要动态注入的地方,一般的写法就略显麻烦,那么我们有了
之后呢,不啰嗦了,我们从最简单的例子开始:
doctype htmlhtml
title Hello,World.
- var title = '';
p welcome to #{title}
我想我们大概能够想象出编译结果:
&!DOCTYPE html&&html&
&title&Hello,World.&/title&
&p&welcome &/p&
&/body&&/html&
从上面的代码中我们可以看出,在
中进行数据传递非常简单:
开始,作为标记在
中定义变量
进行输出和调用即可.
那要是我们就只是想输出
的时候该怎么办呢?转义咯~
p welcome to \#{title} // =& &p&welcome to #{title}&/p&
里面我们就可以通过这种方式使用
的语法了,比如这样:(为了看着方便,我就直接在后面写出关键行的编译结果了)
- var title = '';p welcome to #{title.toUpperCase()}
// =& &p&welcome &/p&
- var title = '';p welcome to #{title.charAt(0)}
// =& &p&welcome to s&/p&
- var title = '';p welcome to #{title.substring(0,4)} // =& &p&welcome to sqrt&/p&
怎么样?有没有觉得很简单呢。
但是呢,我们在工作中是很少直接在文件中这样直接定义变量值的,通常都是在后台读取到值然后设置到页面中,那我们现在没有后台该怎么办呢?还记得第一篇文章中我们说过的
命令行工具么?我们可以在
为我们提供的命令行工具中直接传递数据,话不多说,继续上代码:
我们通过如下的命令编译下面的
文件,为了方便查看,就只显示部分的编译结果
jade test.jade
-P --obj '{&title&: &sqrtthree&}'
文件如下:
doctype htmlhtml
title welcome
p welcome to #{title}
// =& &p&welcome to sqrtthree&/p&
那么问题就来了,如果我们在命令行中和文件中定义了相同名字的变量,那究竟是显示哪一个变量的值呢?
doctype htmlhtml
title welcome
- var title = ''
p welcome to #{title}
// =& &p&welcome &/p&
根据编译结果显示,在文件中定义的值把之前外部传入的值替换掉了。
其实上面的方式中有一个坑不知道大家发现没有,就是通常我们传入数据的时候都不会只传一个的,那如果需要传入很多的数据的话,怎么还能够这么写呢?反正换我我是绝逼会崩溃的。
也支持传入
文件的方式进行数据传递的, 例如我们在项目里新建一个
文件,格式如下:
&title&: &根号三的博客&,
&href&: &&,
&cont&: &我可耻,我打了个硬广。^_^&}
这里我们就要在命令行里执行另一个参数的命令了
jade test.jade
-P -O data.json
// 注意,O 为英文大写
页面和编译结果分别为:
doctype htmlhtml
title welcome #{title} // =& &title&welcome 根号三的博客&/title&
a(href='#{href}', title='#{title}') #{href}
// =& &a href=&& title=&根号三的博客&&&/a&
// =& &p&我可耻,我打了个硬广。^_^&/p&
变量一多,我们就难免会忘记他们的含义,为了便于后期维护,我们的好习惯是给他们都加上注释方便理解。
单行注释和 JavaScript 里是一样的,通过
来开始,并且必须为单独一行哟~
// just some example
// =& &!-- just some example--&p just some example
// =& &p&just some example&/p&
同样支持不输出的注释,只需要加一个横线
//- just some examplep just some example
// =& &p&just some example&/p&
如果我们需要多行注释的话,使用下面的块注释也是极好的
h1 this is a demo.
p this is a paragraph.
编译结果是这样的:
&div class=&box&&
h1 this is a demo.
p this is a paragraph.
3、流程控制
有了变量,我们就可以做很多事情。比如像下面这样:
- var data = {&name&: &sqrtthree&,&age&: 20};- for ( var attr in data)
p= 'my ' + attr + ' is ' + data[attr]ighlight html %}
那么结果是什么样的呢?
&p&my name is sqrtthree&/p&&p&my age is 20&/p&
咦,看着怎么这么熟悉呢?没错,就是
对象的操作。当然了,下面这种方式也是可以的,结果和上面是一样的
- var data = {&name&: &sqrtthree&,&age&: 20};- for ( var attr in data)
//- p= 'my ' + attr + ' is ' + data[attr]
p my #{attr} is #{data[attr]}
当然了,除了
还提供了另外一种语法糖
- var data = {&name&: &sqrtthree&,&age&: 20};- each value, keys in data
//- p=keys + ' : ' + value
p #{keys} : #{value}
对象,我们来说一说他的好搭档 - 数组
- var skills = ['html', 'css', 'javascript', 'nodejs'];ul
- each skill in skills
li #{skill}
编译结果是这个样子的
&li&html&/li&
&li&css&/li&
&li&javascript&/li&
&li&nodejs&/li&&/ul&
什么?太简单了?那我们来点复杂的
- var data = [{id: 1,skills: ['html', 'css']},{id: 2,skills: ['javascript','nodejs']}];dl
- each list in data
dt #{list.id}
- each item in list.skills
dd #{item}
结果是这样的
&dt&1&/dt&
&dd&html&/dd&
&dd&css&/dd&
&dt&2&/dt&
&dd&javascript&/dd&
&dd&nodejs&/dd&&/dl&
语句,我们还有
语句呢,比如我们要输出5个
,我们可以这么写:
- var n = 0;ul
while n & 5
结果很明显:
&li&0&/li&
&li&1&/li&
&li&2&/li&
&li&3&/li&
&li&4&/li&&/ul&
4、条件判断
,我们可以这样用
- var onOff = true;- var data = ['html','css','javascript']ul
-each skills in data
变量为真时,结果为
&li&html&/li&
&li&css&/li&
&li&javascript&/li&&/ul&
变量为假时,结果为
&li&none&/li&&/ul&
又见语法糖,
默认是支持
的,那么问题来了,
究竟是个什么东东呢?
- var onOff = true;- var data = ['html','css','javascript']ul
unless !onOff
-each skills in data
从上面的代码中,我们可以看出,
实际上就是
if ( !(expr) )
的等价方式.
下面我们谈谈
的用法,编译结果我就不写了,大家可以自行测试。
- var data = 'jser';case data
when 'jser'
p Hello, jser.
when 'weber'
p Hello, weber.
p Hello, #{data}
您的鼓励是作者写作最大的动力
如果您认为本网站的文章质量不错,读后觉得收获很大,不妨小额赞助我一下,让我有动力继续写出高质量的文章:我的支付宝账号是
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致& Nodejs开发框架Express3.0开发手记–从零开始
Nodejs开发框架Express3.0开发手记–从零开始
Nodejs给Javascript赋予了服务端应用的生命,Jquery让Javascript成为浏览中开发的利器。 最近学习了Nodejs的Express3.0的开发框架,本来是按照“node.js开发指南”书中介绍,但“node.js开发指南”讲的是Express2.x的,从Express2.x到Express3.0自己模索中还是走了不少弯路的。写篇文章总结一下。
张丹(Conan), 程序员Java,R,PHP,Javacript
weibo:@Conan_Z
blog: http://blog.fens.me
转载请注明出处:
程序代码已经上传到github有需要的同学,自行下载。
从零开始nodejs系列文章
,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低。非常适合小型网站,个性化网站,我们自己的Geek网站!!
此文重点介绍Express3.0的开发框架,其中还会涉及到Mongoose,Ejs,Bootstrap等相关内容。
Express已经升级到4.x,请同时参考文章,
Express3.0配置文件
Ejs模板使用
Bootstrap界面框架
Session使用
页面访问控制
开发环境:
Win7旗舰版 64bit
MonogoDB: v2.4.3
Tue May 14 09:24:50.118 [initandlisten] MongoDB starting : pid=1716 port=27017 dbpath=./data 64-bit host=PC
Tue May 14 09:24:50.119 [initandlisten] db version v2.4.3
Tue May 14 09:24:50.119 [initandlisten] git version: feea03e91ecbf
Tue May 14 09:24:50.119 [initandlisten] build info: windows sys.getwindowsversion(major=6, minor=1, build=7601, platform=2, service_pack='Service Pack 1') BOOST_LIB_VERSION=1_49
Tue May 14 09:24:50.119 [initandlisten] allocator: system
Tue May 14 09:24:50.119 [initandlisten] options: { dbpath: "./data" }
Tue May 14 09:24:50.188 [initandlisten] journal dir=./data\journal
Tue May 14 09:24:50.189 [initandlisten] recover : no journal files present, no recovery needed
Tue May 14 09:24:50.441 [initandlisten] preallocateIsFaster=true 3.26
Tue May 14 09:24:50.778 [initandlisten] preallocateIsFaster=true 5.88
Tue May 14 09:24:51.827 [initandlisten] waiting for connections on port 27017
Tue May 14 09:24:51.827 [websvr] admin web console waiting for connections on port 28017
nodejs: v0.10.5, npm 1.2.19
1. 建立工程
进入工程目录
cd D:\workspace\project
全局安装express,express作为命令被安装到了系统中
npm install -g express
查看express版本
express -V
使用express命令创建工程,并支持ejs
D:\workspace\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/user.js
create : nodejs-demo/views
create : nodejs-demo/views/index.ejs
install dependencies:
$ cd nodejs-demo && npm install
run the app:
$ node app
根据提示,下载依赖包
cd nodejs-demo && npm install
express@3.2.2 node_modules\express
├── methods@0.0.1
├── fresh@0.1.0
├── buffer-crc32@0.2.1
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── cookie@0.0.5
├── qs@0.6.3
├── commander@0.6.1
├── debug@0.7.2
├── mkdirp@0.3.4
├── send@0.1.0 (mime@1.2.6)
└── connect@2.7.8 (pause@0.0.1, bytes@0.2.0, formidable@1.0.13)
模板项目建立成功,启动模板项目。
D:\workspace\project\nodejs-demo&node app.js
Express server listening on port 3000
本地的3000端口被打开,通过浏览器访问: localhost:3000
通过node启动程序,每次代码修改都需要重新启动。 有一个工具supervisor,每次修改代码后会自动重启,会我们开发省很多的时间。
npm install supervisor
再启动服务
D:\workspace\project\nodejs-demo&supervisor app.js
DEBUG: Running node-supervisor with
DEBUG: program 'app.js'
DEBUG: --watch '.'
DEBUG: --ignore 'undefined'
DEBUG: --extensions 'node|js'
DEBUG: --exec 'node'
DEBUG: Starting child process with 'node app.js'
DEBUG: Watching directory 'D:\workspace\project\nodejs-demo' for changes.
Express server listening on port 3000
2. 目录结构
D:\workspace\project\nodejs-demo&dir
09:42 877 app.js
09:48 &DIR& node_modules
09:42 184 package.json
09:42 &DIR& public
09:42 &DIR& routes
09:42 &DIR& views
目录介绍:
node_modules, 存放所有的项目依赖库。(每个项目管理自己的依赖,与Maven,Gradle等不同)
package.json,项目依赖配置及开发者信息
app.js,程序启动文件
public,静态文件(css,js,img)
routes,路由文件(MVC中的C,controller)
Views,页面文件(Ejs模板)
3. Express3.0配置文件
打开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
app.engine('.html', ejs.__express);
app.set('view engine', 'html');// app.set('view engine', 'ejs');
修改后,ejs变量没有定义,supervisor的程序会一直报错
ReferenceError: ejs is not defined
at Object. (D:\workspace\project\nodejs-demo\app.js:17:21)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:901:3
DEBUG: Program node app.js exited with code 8
在app.js中增加ejs变量
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, ejs = require('ejs');
访问localhost:3000,程序报错
Error: Failed to lookup view "index"
at Function.app.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\application.js:495:17)
at ServerResponse.res.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\response.js:756:7)
at exports.index (D:\workspace\project\nodejs-demo\routes\index.js:7:7)
at callbacks (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:161:37)
at param (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:135:11)
at pass (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:142:5)
at Router._dispatch (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:170:5)
at Object.router (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:33:10)
at next (D:\workspace\project\nodejs-demo\node_modules\express\node_modules\connect\lib\proto.js:190:15)
at Object.methodOverride [as handle] (D:\workspace\project\nodejs-demo\node_modules\express\node_modules\connect\lib\middleware\methodOverride.js:37:5)
GET / 500 26ms
重命名:views/indes.ejs 为 views/index.html
访问localhost:3000正确
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"&
&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"& --&
&body screen_capture_injected="true"&
index.html
&% include header.html %&
&h1&&%= title %&&/h1&
&p&Welcome to &%= title %&&/p&
&% include footer.html %&
注:express3.0时,ejs嵌入其他页面时使用include,express2.x用法不一样。
footer.html
&script src="/javascripts/jquery-1.9.1.min.js"&&/script&
&script src="/javascripts/bootstrap.min.js"&&/script&
访问localhost:3000正确。
我们已经成功的使用了EJS模板的功能,把公共的头部和底部从页面中分离出来了。
并已经引入了bootstrap界面框架,后面讲到“登陆界面”的时候,就会看到bootstrap界面效果了。
6. 路由功能
我们设计一下用户登陆业务需求。
访问路径:/,页面:index.html,不需要登陆,可以直接访问。
访问路径:/home,页面:home.html,必须用户登陆后,才可以访问。
访问路径:/login,页面:login.html,登陆页面,用户名密码输入正确,自动跳转到home.html
访问路径:/logout,页面:无,退出登陆后,自动回到index.html页面
打开app.js文件,在增加路由配置
app.get('/', routes.index);
app.get('/login', routes.login);
app.post('/login', 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 class="control-group"&
&label class="control-label" for="password"&密码&/label&
&div class="controls"&
&input type="password" class="input-xlarge" id="password" name="password"&
&div class="form-actions"&
&button type="submit" class="btn btn-primary"&登陆&/button&
&/fieldset&
&% include footer.html %&
注:使用了bootstrap界面框架,效果还不错吧.
&% include header.html %&
&h1&Welcome &%= user.username %&, 欢迎登陆!!&/h1&
&a claa="btn" href="/logout"&退出&/a&
&% include footer.html %&
修改index.html,增加登陆链接
index.html
&% include header.html %&
&h1&Welcome to &%= title %&&/h1&
&p&&a href="/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 express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, ejs = require('ejs')
, SessionStore = require("session-mongoose")(express);
var store = new SessionStore({
url: "mongodb://localhost/session",
interval: 120000
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 : 'fens.me'}));
app.use(express.session({
secret : 'fens.me',
store: store,
cookie: { maxAge: 900000 }
app.use(function(req, res, next){
res.locals.user = req.session.
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
注:app.js文件有顺序要求,一定要注意!!!
安装session-mongoose依赖库
D:\workspace\project\nodejs-demo&npm install session-mongoose
D:\workspace\project\nodejs-demo\node_modules\session-mongoose\node_modules\mongoose\node_modules\mongodb\node_modules\bson&node "D:\toolkit\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild
C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\Microsoft.Cpp.InvalidPlatform.Targets(23,7): error MSB8007: 项目“kerberos.vcxproj”的平台无效。平台为“x64”。您会看到此消息的可能原因是,您尝试在没有解决方案文件的情况下生成项目,并且为
oose\node_modules\mongoose\node_modules\mongodb\node_modules\bson\build\bson.vcxproj]
session-mongoose@0.2.2 node_modules\session-mongoose
└── mongoose@3.6.10 (mpath@0.1.1, ms@0.1.0, hooks@0.2.1, sliced@0.0.3, muri@0.3.1, mpromise@0.2.1, mongodb@1.3.3)
安装有错误但是没关系。
访问:http://localhost:3000/login,正常
修改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=
return res.redirect('/home');
return res.redirect('/login');
exports.logout方法
exports.logout = function(req, res){
req.session.user=
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.
注:这个session是express3.0的写法,与express2.x是不一样的。原理是在框架内每次赋值,把我们刚才手动传值的过程,让框架去完成了。
8. 页面提示
登陆的大体我们都已经讲完了,最后看一下登陆失败的情况。
我们希望如果用户登陆时,用户名或者密码出错了,会给用户提示,应该如何去实现。
打开app.js的,增加res.locals.message
app.use(function(req, res, next){
res.locals.user = req.session.
var err = req.session.
delete req.session.
res.locals.message = '';
if (err) res.locals.message = '&div class="alert alert-error"&' + err + '&/div&';
修改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 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 class="form-actions"&
&button type="submit" class="btn btn-primary"&登陆&/button&
&/fieldset&
&% 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=
return res.redirect('/home');
req.session.error='用户名或密码不正确';
return res.redirect('/login');
让我们来看看效果: http://localhost:3000/login 输入错误的和密码, 用户名:adminfe,密码:12121
9. 页面访问控制
网站登陆部分按照我们的求已经完成了,但网站并不安全。
localhost:3000/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="/logout"&退出&/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.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);
访问控制:
/ ,谁访问都行,没有任何控制
/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');
function notAuthentication(req, res, next) {
if (req.session.user) {
req.session.error='已登陆';
return res.redirect('/');
配置好后,我们未登陆,直接访问localhost:3000/home时,就会跳到/login页面
如果你也出现图片显示的内容,那么恭喜你了。
Nodejs使用Express3.0框架的第一步你已经完成了,并且还使用了ejs,bootstrap,mongoose库的使用。
希望此文对大家有所帮助。
Express已经升级到4.x,请同时参考文章,
转载请注明出处:
程序代码已经上传到github有需要的同学,自行下载。
This entry was posted in
Pingback: ()
Pingback: ()
Pingback: ()
Pingback: ()
Pingback: ()
Pingback: ()
Pingback: ()
Pingback: ()
Designed by

我要回帖

更多关于 sconscript 的文章

 

随机推荐