@import url(http://m.tkk7.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);
一. 用jade生成登陸界面
用express就不得不了解一下模版引擎, 比較流行的是
jade和
ejs, 這里以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文件, 內容如下:
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 });