接上一篇TWaver HTML5 + Node.js + express + socket.io + redis（五）,?這一篇將講解如何用模版生成html頁面, 如何驗證用戶登錄, 您將了解到:

1. 模版引擎jade
2. 使用express的session功能

?

一. 用jade生成登陸界面
用express就不得不了解一下模版引擎, 比較流行的是jade和ejs, 這里以jade為例:
1. 安裝jade:
npm install jade

2. 配置express使用jade

//設(shè)置express使用jade作為模版引擎 server.set('view engine', 'jade'); //設(shè)置jade模版的目錄 server.set('views', __dirname + '/views');

3. 配置jade模版
在主程序目錄創(chuàng)建views目錄, 在views目錄添加layout.jade文件(layout文件用于指定所有頁面的模版), 內(nèi)容如下:

!!! 5 htmlinclude headerbody!= body

?再添加header.jade文件, 內(nèi)容如下:

headtitle TWaver HTML5 Demoscript(type='text/javascript', src='/socket.io/socket.io.js')script(type='text/javascript', src='/twaver.js')script(type='text/javascript', src='/demo.js')

?4. 生成登陸界面和主界面

添加login.jade文件, 內(nèi)容如下:

form(action='/login', method='post')label Name:input(name='name', type='text')input(name='password', type='password')input(type='submit', value='Login')

?5. 添加登錄和主頁路由:

//添加登錄路由 server.get('/login', function (req, res) {res.render('login'); }); //添加主頁路由 server.get('/', function (req, res) {res.render('index'); });

?啟動node, 用瀏覽器打開http://localhost:8080/login, 看看效果:

再打開http://localhost:8080/, 內(nèi)容和上一章看到的一樣, demo目錄的demo.html可以刪掉了:

二. 配置express, 驗證用戶
1. 啟用session, 表單和cookie解析功能

//設(shè)置表單和cookie解析器 server.use(express.bodyParser()); server.use(express.cookieParser()); //啟用session server.use(express.session({secret: 'anything', key: 'express.sid'}));

?2. 添加登陸post路由, 將用戶名信息存入session中

//登陸post路由 server.post('/login', function (req, res) {var name = req.body.name;var password = req.body.password;req.session.user = name;res.redirect('/'); });

?3. 修改主頁路由, 判斷如果沒有登陸就重定向到登陸界面:

server.get('/', function (req, res) {if (req.session.user) {res.render('index');} else {res.redirect('/login');} });

?再用瀏覽器打開http://localhost:8080/, 會出現(xiàn)登陸界面, 輸入任意非空用戶名后, 即可登陸

本文完整demo見附件, 下一講將介紹加密密碼, 漢化i18n等內(nèi)容
另外, 一個小技巧:客戶端ji里生成socket時, 需要指定ip和端口, 如果是本機, 可以直接:socket = io.connect('http://' + location.hostname + '/', { port: location.port });

轉(zhuǎn)載于:https://www.cnblogs.com/twaver/archive/2012/03/23/2413992.html

總結(jié)

以上是生活随笔為你收集整理的TWaver HTML5 + Node.js + express + socket.io + redis（六）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。