新建express項(xiàng)目,定義路由規(guī)則
1.創(chuàng)建一個(gè)項(xiàng)目express+ejs
cd 工作目錄
express -e expressEjsWeb
cd expressEjsWeb && npm install
2.默認(rèn)會(huì)有routes目錄下會(huì)有index.js和users.js文件雇锡，這里為了不產(chǎn)生其它示例外的困擾，刪除user.js文件
3.在app.js文件中修改代碼
刪除
var users = require('./routes/users');
...
app.use('/users', users);
添加
var subform = require('./routes/subform');
var usesession = require('./routes/usesession');
var usecookies = require('./routes/usecookies');
var usecrypto = require('./routes/usecrypto');
...
app.use('/subform', subform);
app.use('/usesession', usesession);
app.use('/usecookies', usecookies);
app.use('/usecrypto', usecrypto);
4.在routes目錄下添加subform.js、usesession.js仓坞、usecookies.js夜郁、usecrypto.js文件漓糙，并在對(duì)應(yīng)的js文件中添加代碼
//subform.js 代碼
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('subform', { title: '提交表單及接收參數(shù)示例' });
});
module.exports = router;
//usesession.js 代碼
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('usesession', { title: '使用session示例' });
});
module.exports = router;
//usecookies.js 代碼
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('usecookies', { title: '使用cookies示例' });
});
module.exports = router;
//usecrypto.js 代碼
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('usecrypto', { title: '加密字符串示例' });
});
module.exports = router;
5.在views目錄下添加subform.ejs闹丐、usesession.ejs阱高、usecookies.ejs赚导、usecrypto.ejs文件,并在views目錄下除了error.ejs外所有ejs文件中添加如下代碼
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<a href="/">首頁(yè)</a>
<a href="/subform">如何提交表單并接收參數(shù)?</a>
<a href="/usesession">如何使用session?</a>
<a href="/usecookies">如何使用cookies?</a>
<a href="/usecrypto">如何字符串加密?</a>
</body>
</html>
6.在app.js中添加3000端口監(jiān)聽(tīng)并運(yùn)行
app.listen(3000);
顯示：
減少代碼量，提取頁(yè)面中的公共部分
1.在views目錄下新建一個(gè)nav.ejs文件赤惊，并添加如下代碼
<a href="/">首頁(yè)</a>
<a href="/subform">如何提交表單并接收參數(shù)?</a>
<a href="/usesession">如何使用session?</a>
<a href="/usecookies">如何使用cookies?</a>
<a href="/usecrypto">如何字符串加密?</a>
2.把views目錄下index.ejs吼旧、subform.ejs、usesession.ejs未舟、usecookies.ejs圈暗、usecrypto.ejs 中一樣部分替換
<% include nav %>
<% include 文件名 %> express提供include來(lái)嵌入其它頁(yè)，這和html嵌入其它頁(yè)類似
提交表單并接收參數(shù)Get,Post
構(gòu)建一個(gè)表單簡(jiǎn)單模擬登錄GET方式提交數(shù)據(jù)
1.打開(kāi)subform.ejs文件裕膀，修改文件代碼為如下：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<% include nav %>
<form>
用戶名：<input type="text" id="txtUserName" name="txtUserName" />
密碼：<input type="password" id="txtUserPwd" name="txtUserPwd" />
<input type="submit" value="提交">
</form>
</body>
</html>
2.打開(kāi)subform.js我們?cè)囍邮諈?shù)值并輸出到控制臺(tái)
//subform.js 代碼
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
console.log('get=====');
var userName = req.query.txtUserName;
var userPwd = req.query.txtUserPwd;
var userName2 = req.param('txtUserName');
var userPwd2 = req.param('txtUserPwd');
console.log('req.query用戶名:'+userName);
console.log('req.query密碼:'+userPwd);
console.log('req.param用戶名:'+userName2);
console.log('req.param密碼:'+userPwd2);
res.render('subform', { title: '提交表單及接收參數(shù)GET' });
});
module.exports = router;
3.運(yùn)行员串，并提交表單 在瀏覽器中運(yùn)行：http://localhost:3000/subform
輸入提交
控制臺(tái)
完成GET方式提交表單！
構(gòu)建一個(gè)表單簡(jiǎn)單模擬登錄post方式提交數(shù)據(jù)
1.首先修改一下subform.ejs文件中的form標(biāo)簽：
<form method="post">
...
</form>
2.再在subform.js中添加代碼昼扛，接收post提交寸齐、接收參數(shù)并輸出到控制臺(tái)
router.post('/', function(req, res) {
console.log('post=====');
var userName = req.query.txtUserName;
var userPwd = req.query.txtUserPwd;
var userName3 = req.body.txtUserName;
var userPwd3 = req.body.txtUserPwd;
var userName2 = req.param('txtUserName');
var userPwd2 = req.param('txtUserPwd');
console.log('req.query用戶名:'+userName);
console.log('req.query密碼:'+userPwd);
console.log('req.body:'+userName3);
console.log('req.body:'+userPwd3);
console.log('req.param用戶名:'+userName2);
console.log('req.param密碼:'+userPwd2);
res.render('subform', { title: '提交表單及接收參數(shù)POST' });
});
3.運(yùn)行，并提交表單 在瀏覽器中運(yùn)行：http://localhost:3000/subform抄谐，輸入表單項(xiàng)并提交渺鹦，可以發(fā)現(xiàn)url不會(huì)發(fā)生變化
控制臺(tái)輸出：
完成POST方式提交表單！
總結(jié)：
req.query：我用來(lái)接收GET方式提交參數(shù)
req.body：我用來(lái)接收POST提交的參數(shù)
req.params：兩種都能接收到
req.body蛹含，Express處理這個(gè)post請(qǐng)求是通過(guò)中間件bodyParser毅厚，可以自行找下API
密碼字符串加密
當(dāng)我們提交表單后，比如密碼這些敏感信息挣惰，Node.js提供了一個(gè)加密模塊
Crypto http://nodejs.org/api/crypto.html
1.usecrypto.js卧斟，修改代碼：
var express = require('express');
var router = express.Router();
var crypto = require('crypto');
/* GET home page. */
router.get('/', function(req, res) {
res.render('usecrypto', { title: '加密字符串示例' });
});
router.post('/',function(req, res){
var
userName = req.body.txtUserName,
userPwd = req.body.txtUserPwd;
//生成口令的散列值
var md5 = crypto.createHash('md5'); //crypto模塊功能是加密并生成各種散列
var en_upwd = md5.update(userPwd).digest('hex');
console.log('加密后的密碼:'+en_upwd);
res.render('usecrypto', { title: '加密字符串示例' });
});
module.exports = router;
2.usecrypto.ejs，修改代碼
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<% include nav %>
<form method="post">
用戶名：<input type="text" id="txtUserName" name="txtUserName" />
密碼：<input type="password" id="txtUserPwd" name="txtUserPwd" />
<input type="submit" value="提交">
</form>
</body>
</html>
3.運(yùn)行憎茂，提交表單珍语，查看控件臺(tái)輸出
成功MD5方式加密！
其中用到了createHash(algorithm)方法 ,這是利用給定的算法生成hash對(duì)象
update(data, [input_encoding])方法竖幔，可以通過(guò)指定的input_encoding和傳入的data數(shù)據(jù)更新hash對(duì)象板乙，input_encoding為可選參數(shù)，沒(méi)有傳入則作為buffer處理 （input_encoding可為'utf-8'拳氢、'ascii'等）
digest([encoding])方法募逞，計(jì)算數(shù)據(jù)的hash摘要值，encoding是可選參數(shù)馋评，不傳則返回buffer (encoding可為 'hex'放接、'base64'等)；當(dāng)調(diào)用digest方法后hash對(duì)象將不可用留特；
具體參考：Crypto http://nodejs.org/api/crypto.html
session的使用
express中可以用中間件來(lái)使用session纠脾，express-session( https://github.com/expressjs/session ) 可以存在內(nèi)存中玛瘸，也可以存在mongodb、redis等中...
更多中間件：https://github.com/senchalabs/connect#middleware
示例設(shè)計(jì)思路：使用兩個(gè)頁(yè)面苟蹈，一個(gè)登錄糊渊，兩個(gè)頁(yè)都判斷是否有這個(gè)session,如果有，顯示已登錄慧脱，沒(méi)有則顯示一個(gè)登錄按鈕渺绒，點(diǎn)此按鈕，記錄session
1.首先通過(guò)npm安裝這個(gè)中間件菱鸥，打開(kāi)package.json文件宗兼，在dependencies節(jié)點(diǎn)下添加一個(gè)鍵值對(duì) "express-session" : "latest"
"dependencies": {
...,
"express-session" : "latest"
}
2. cd到項(xiàng)目根目錄下，執(zhí)行npm install
3.app.js氮采，添加代碼
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require('express-session');
...
//這里傳入了一個(gè)密鑰加session id
app.use(cookieParser('Tiany'));
//使用靠就這個(gè)中間件
app.use(session({ secret: 'tiany'}));
...
4.usesession和usecookies针炉，修改ejs和js如下
usesession.ejs和usecookies.ejs
usesession.js
//usession.js 示例代碼
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
if(req.session.islogin)
{
console.log('usesession:' + req.session.islogin);
res.locals.islogin = req.session.islogin;
}
res.render('usesession', { title: '使用session示例' });
});
router.post('/', function(req, res) {
req.session.islogin = 'success';
res.locals.islogin = req.session.islogin;
res.render('usesession', { title: '使用session示例' });
});
module.exports = router;
usecookies.js
//usecookies.js 示例代碼
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
if(req.session.islogin)
{
console.log('usecookies:' + req.session.islogin);
res.locals.islogin = req.session.islogin;
}
res.render('usecookies', { title: '使用cookies示例' });
});
router.post('/', function(req, res) {
req.session.islogin = 'success';
res.locals.islogin = req.session.islogin;
res.render('usecookies', { title: '使用cookies示例' });
});
module.exports = router;
5.運(yùn)行并查看
6.點(diǎn)擊登錄按鈕后，再查看這兩個(gè)頁(yè)
7.關(guān)閉瀏覽器扳抽，再打開(kāi)查看這兩個(gè)頁(yè)
這是新開(kāi)的篡帕，顯示也是已登錄
官方示例：https://github.com/visionmedia/express/blob/master/examples/session/index.js
cookies
如果是登錄，那常見(jiàn)就是“記錄密碼”或“自動(dòng)登錄”功能贸呢，這個(gè)一般用 cookies來(lái)完成
cookies存在客戶端镰烧，安全性較低，一般要存入加密后的信息楞陷；建議要設(shè)置使用過(guò)期時(shí)間或不使用時(shí)刪除掉
express也同樣可以用中間件來(lái)使用：https://github.com/expressjs/cookie-parser
1.修改下usecookies.js
//usecookies.js 示例代碼
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
if(req.cookies.islogin)
{
console.log('usecookies-cookies:' + req.cookies.islogin);
req.session.islogin = req.cookies.islogin;
}
if(req.session.islogin)
{
console.log('usecookies:' + req.session.islogin);
res.locals.islogin = req.session.islogin;
}
res.render('usecookies', { title: '使用cookies示例' });
});
router.post('/', function(req, res) {
req.session.islogin = 'success';
res.locals.islogin = req.session.islogin;
//maxAge為過(guò)期時(shí)長(zhǎng)怔鳖，毫秒為單位，我設(shè)置一分鐘
res.cookie('islogin', 'sucess', { maxAge: 60000 });
res.render('usecookies', { title: '使用cookies示例' });
});
module.exports = router;
2.運(yùn)行訪問(wèn) http://localhost:8000/usecookies固蛾，點(diǎn)擊登錄按鈕登錄成功并記錄cookies
maxAge為過(guò)期時(shí)長(zhǎng)结执，毫秒為單位，我設(shè)置一分鐘
3.關(guān)閉瀏覽器艾凯，再次訪問(wèn)http://localhost:8000/usecookies 献幔，頁(yè)面顯示已登錄
4.再次關(guān)閉瀏覽器，過(guò)一分鐘再訪問(wèn)http://localhost:8000/usecookies趾诗，頁(yè)面不再是已登錄蜡感，而是顯示登錄按鈕，表示cookies過(guò)期恃泪，不會(huì)自動(dòng)登錄
官方示例：https://github.com/visionmedia/express/blob/master/examples/cookies/app.js
清除session和cookies
//清除cookies
res.clearCookie('islogin');
//清除session
req.session.destroy();
小結(jié)一下：
cookie
在web應(yīng)用中郑兴，多個(gè)請(qǐng)求之間共享“用戶會(huì)話”是非常必要的。但HTTP1.0協(xié)議是無(wú)狀態(tài)的贝乎。那這時(shí)Cookie就出現(xiàn)了情连。那Cookie又是如何處理的呢？
Cookie的處理：
服務(wù)端向客戶端發(fā)送Cookie
客戶端的瀏覽器把Cookie保存
然后在每次請(qǐng)求瀏覽器都會(huì)將Cookie發(fā)送到服務(wù)端
在HTML文檔被發(fā)送之前览效，Web服務(wù)器通過(guò)傳送HTTP 包頭中的Set-Cookie 消息把一個(gè)cookie 發(fā)送到用戶的瀏覽器中却舀，如下示例：
Set-Cookie: name=value; Path=/; expires=Wednesday, 09-Nov-99 23:12:40 GMT;
其中比較重要的屬性：
name=value：鍵值對(duì)球榆，可以設(shè)置要保存的 Key/Value，注意這里的 name 不能和其他屬性項(xiàng)的名字一樣
Expires： 過(guò)期時(shí)間（秒）禁筏，在設(shè)置的某個(gè)時(shí)間點(diǎn)后該 Cookie 就會(huì)失效，如 expires=Wednesday, 09-Nov-99 23:12:40 GMT
maxAge： 最大失效時(shí)間（毫秒）衡招，設(shè)置在多少后失效
secure： 當(dāng) secure 值為 true 時(shí)篱昔，cookie 在 HTTP 中是無(wú)效，在 HTTPS 中才有效
Path： 表示 cookie 影響到的路始腾，如 path=/州刽。如果路徑不能匹配時(shí)，瀏覽器則不發(fā)送這個(gè)Cookie
session
session是另一種記錄客戶狀態(tài)的機(jī)制浪箭，不同的是Cookie保存在客戶端瀏覽器中穗椅，而session保存在服務(wù)器上。
客戶端瀏覽器訪問(wèn)服務(wù)器的時(shí)候奶栖，服務(wù)器把客戶端信息以某種形式記錄在服務(wù)器上匹表，這就是session⌒桑客戶端瀏覽器再次訪問(wèn)時(shí)只需要從該Session中查找該客戶的狀態(tài)就可以了袍镀。
如果說(shuō)Cookie機(jī)制是通過(guò)檢查客戶身上的“通行證”來(lái)確定客戶身份的話，那么session機(jī)制就是通過(guò)檢查服務(wù)器上的“客戶明細(xì)表”來(lái)確認(rèn)客戶身份冻晤。
session相當(dāng)于程序在服務(wù)器上建立的一份客戶檔案苇羡，客戶來(lái)訪的時(shí)候只需要查詢客戶檔案表就可以了。
兩者的區(qū)別：
cookie數(shù)據(jù)存放在客戶的瀏覽器上鼻弧，session數(shù)據(jù)放在服務(wù)器上设江。
cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙 考慮到安全應(yīng)當(dāng)使用session攘轩。
session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上叉存。當(dāng)訪問(wèn)增多，會(huì)比較占用你服務(wù)器的性能 考慮到減輕服務(wù)器性能方面度帮，應(yīng)當(dāng)使用COOKIE鹉胖。
單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie够傍。
所以建議：將登陸信息等重要信息存放為session甫菠、其他信息如果需要保留，可以放在cookie中
其他一些session,cookie 配置
http://www.cnblogs.com/vipzhou/p/4949120.html
大多是網(wǎng)上和書(shū)籍的內(nèi)容簡(jiǎn)單的跑了下冕屯，這篇寫(xiě)的比較糙寂诱，還有許多值得考慮的，以后慢慢思考安聘。有建議還請(qǐng)?zhí)岢鰜?lái)痰洒，謝謝瓢棒。
ps:在搭建中存在的一個(gè)破問(wèn)題。丘喻。脯宿。
在使用session的時(shí)候報(bào)錯(cuò)了：
Cannot read property 'islogin' of undefined
TypeError: Cannot read property 'islogin' of undefined
at D:\Program Files\nodejs\WebstormProjects\SecondTest\routes\usesession.js:10:19
at Layer.handle [as handle_request] (D:\Program Files\nodejs\WebstormProjects\SecondTest\node_modules\express\lib\router\layer.js:95:5)
at next (D:\Program Files\nodejs\WebstormProjects\SecondTest\node_modules\express\lib\router\route.js:131:13)
at Route.dispatch (D:\Program Files\nodejs\WebstormProjects\SecondTest\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (D:\Program Files\nodejs\WebstormProjects\SecondTest\node_modules\express\lib\router\layer.js:95:5)
at D:\Program Files\nodejs\WebstormProjects\SecondTest\node_modules\express\lib\router\index.js:277:22
at Function.process_params (D:\Program Files\nodejs\WebstormProjects\SecondTest\node_modules\express\lib\router\index.js:330:12)
at next (D:\Program Files\nodejs\WebstormProjects\SecondTest\node_modules\express\lib\router\index.js:271:10)
at Function.handle (D:\Program Files\nodejs\WebstormProjects\SecondTest\node_modules\express\lib\router\index.js:176:3)
at router (D:\Program Files\nodejs\WebstormProjects\SecondTest\node_modules\express\lib\router\index.js:46:12)
