TWaver HTML5 + Node.js + express + socket.io + redis（六）

接上一篇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

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

3. 配置jade模版
在主程序目录创建views目录, 在views目录添加layout.jade文件(layout文件用于指定所有页面的模版), 内容如下:

!!! 5
htmlinclude headerbody!= body

再添加header.jade文件, 内容如下:

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文件, 内容如下:

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/, 内容和上一章看到的一样, demo目录的demo.html可以删掉了:

二. 配置express, 验证用户
1. 启用session, 表单和cookie解析功能

//设置表单和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/, 会出现登陆界面, 输入任意非空用户名后, 即可登陆

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

转载于:https://www.cnblogs.com/twaver/archive/2012/03/23/2413992.html

TWaver HTML5 + Node.js + express + socket.io + redis（六）相关推荐

TWaver HTML5 + Node.js + express + socket.io + redis（五）
接上一回TWaver HTML5 + Node.js + express + socket.io + redis(四), 这一篇您将了解到 1. 如何保存更改后的拓扑数据 (包括新增的, 修改的, 删 ...
Node.js 和Socket.IO 实现chat
使用 Node.js 和 Socket.IO 构建简单的聊天程序在node.js根目录下创建文件夹chat,里面添加两个文件:app.js和index.html app.js var fs = re ...
node.js 之 socket.io
2019独角兽企业重金招聘Python工程师标准>>> 1 Install Node.js on Ubuntu sudo apt-get install python-softwar ...
TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建项目（一）
最近看到TWaver 的html5版本即将发布了,于是今天用TWaver HTML5 + NodeJS + express + websocket.io + redis搭建了一个简单原型.先发出几张效 ...
Express+Socket.IO 实现简易聊天室
代码地址如下: http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: ...
express+socket.io 共享session
express下socket.io使用session验证用户作者: littlejim 时间: April 23, 2015 分类: node.js express下使用socket.io来传输用户 ...
HTML5/Node.js/JS 经验谈 (会员专属)【讲师辅导】-曾亮-专题视频课程
HTML5/Node.js/JS 经验谈 (会员专属)[讲师辅导]-5481人已学习课程介绍 QQ 1405491181 链接 http://edu.csdn.net/lecture ...
SAP UI5 应用开发教程之五十五 - 如何将本地 SAP UI5 应用通过 Node.js Express 部署到公网上试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之五十五 - 如何将本地 SAP UI5 应用通过 Node.js Express 部署到公网上
本教程迄今为止的前 54 个步骤,开发出来的 SAP UI5 应用都只能在本地通过 localhost 访问,除非将其部署到 ABAP 服务器上. SAP UI5 应用开发教程之三十五 - 如何把本地 ...

TWaver HTML5 + Node.js + express + socket.io + redis（六）

TWaver HTML5 + Node.js + express + socket.io + redis（六）相关推荐

最新文章

热门文章