TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理
@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
接上一篇TWaver HTML5 + Node.js + express + socket.io + redis(五), 这一篇将讲解如何用模版生成html页面, 如何验证用户登录, 您将了解到:
1. 模版引擎jade
2. 使用express的session功能
一. 用jade生成登陆界面
用express就不得不了解一下模版引擎, 比较流行的是jadeejs, 这里以jade为例:
1. 安装jade:
npm install jade

2. 配置express使用jade
1 //设置express使用jade作为模版引擎
2 server.set('view engine', 'jade');
3 //设置jade模版的目录
4 server.set('views', __dirname + '/views');

3. 配置jade模版
在主程序目录创建views目录, 在views目录添加layout.jade文件(layout文件用于指定所有页面的模版), 内容如下:
1 !!! 5
2 html
3   include header
4   body!= body
再添加header.jade文件, 内容如下:
1 head
2   title TWaver HTML5 Demo
3   script(type='text/javascript', src='/socket.io/socket.io.js')
4   script(type='text/javascript', src='/twaver.js')
5   script(type='text/javascript', src='/demo.js')

4. 生成登陆界面和主界面
添加login.jade文件, 内容如下:
1 form(action='/login', method='post')
2   label Name:
3   input(name='name', type='text')
4   input(name='password', type='password')
5   input(type='submit', value='Login')
再添加index.jade文件, 内容如下:
1 body(onload="init()")

5. 添加登录和主页路由:
1 //添加登录路由
2 server.get('/login', function (req, res) {
3     res.render('login');
4 });
5 //添加主页路由
6 server.get('/', function (req, res) {
7     res.render('index');
8 });
9 
启动node, 用浏览器打开http://localhost:8080/login, 看看效果:
再打开http://localhost:8080/, 内容和上一章看到的一样, demo目录的demo.html可以删掉了:

二. 配置express, 验证用户
1. 启用session, 表单和cookie解析功能
1 //设置表单和cookie解析器
2 server.use(express.bodyParser());
3 server.use(express.cookieParser());
4 //启用session
5 server.use(express.session({secret: 'anything', key: 'express.sid'}));
6 

2. 添加登陆post路由, 将用户名信息存入session中
1 //登陆post路由
2 server.post('/login', function (req, res) {
3     var name = req.body.name;
4     var password = req.body.password;
5     req.session.user = name;
6     res.redirect('/');
7 });
8 

3. 修改主页路由, 判断如果没有登陆就重定向到登陆界面:
1 server.get('/', function (req, res) {
2     if (req.session.user) {
3         res.render('index');
4     } else {
5         res.redirect('/login');
6     }
7 });
再用浏览器打开http://localhost:8080/, 会出现登陆界面, 输入任意非空用户名后, 即可登陆

本文完整demo见附件, 下一讲将介绍加密密码, 汉化i18n等内容
另外, 一个小技巧:客户端ji里生成socket时, 需要指定ip和端口, 如果是本机, 可以直接:socket = io.connect('http://' + location.hostname + '/', { port: location.port });


评论

# re: TWaver HTML5 + Node.js + express + socket.io + redis(六)  回复  更多评论   

2012-04-03 12:51 by 分红商城
我想学习nodejs。不过不知道使用什么nosql数据库比较好。能推荐一个吗?

# re: TWaver HTML5 + Node.js + express + socket.io + redis(六)  回复  更多评论   

2012-04-03 13:24 by TWaver
MongoDB(http://www.mongodb.org)和Reids(http://redis.io)都可以考虑下

# re: TWaver HTML5 + Node.js + express + socket.io + redis(六)  回复  更多评论   

2012-05-23 15:42 by 学习nodejs
学习,能继续讲讲加密密码吗

只有注册用户登录后才能发表评论。


网站导航: