目录
前言
前面经过五篇Node.js的学习,基本可以开始动手构建一个网站应用了,先用这一篇了解一些构建网站的知识!
主要是些基础的东西...
如何去创建路由规则、如何去提交表单并接收表单项的值、如何去给密码加密、如何去提取页面公共部分(相当于用户控件和母版页)等等...
下面就一步步开始吧^_^!...
新建express项目并自定义路由规则
1.首先用命令行express+ejs创建一个项目sampleEjsPre
cd 工作目录 express -e sampleEjsPre cd sampleEjsPre && npm install
2.默认会有routes目录下会有index.js和users.js文件,这里为了不产生其它示例外的困扰,删除user.js文件
3.打开app.js文件删除下面两行代码
var users = require('./routes/users'); ... app.use('/users', users);
4.在app.js文件中添加如下代码
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);
通过URL访问后,根据路由规则先到哪个文件,再到哪个文件的过程在上一篇文章(Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs)中有说到,这里就不多说了!
5.在routes目录下添加subform.js、usesession.js、usecookies.js、usecrypto.js文件,并在对应的js文件中添加如下代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res) { res.render('subform', { title: '提交表单及接收参数示例' }); }); module.exports = router;
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res) { res.render('usesession', { title: '使用session示例' }); }); module.exports = router;
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.render('usecookies', { title: '使用cookies示例' }); }); module.exports = router;
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.render('usecrypto', { title: '加密字符串示例' }); }); module.exports = router;
6.在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="/">首页</a> <a href="/subform">如何提交表单并接收参数?</a> <a href="/usesession">如何使用session?</a> <a href="/usecookies">如何使用cookies?</a> <a href="/usecrypto">如何字符串加密?</a> </body> </html>
7.在app.js中添加8000端口监听并运行
... app.listen(8000); ...
运行界面如下:
点击各链接都能正常跳转到对应的页面!这样第一步的目录就算达到了!
如何提取页面中的公共部分?
在上一步创建的网站中每个页面都几乎一样,现在都只有导航部分?每个页都要写?当然不是,我们可以提取出来
1.在views目录下新建一个nav.ejs文件,并添加如下代码
<a href="/">首页</a> <a href="/subform">如何提交表单并接收参数?</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修改成如下代码
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <% include nav %> </body> </html>
运行页面,发现和上次运行时没有作何区别,有了这样的办法更有利于减少重复代码、也更有利于统一布局!
<% include 文件名 %> express提供include来嵌入其它页,这和html嵌入其它页类似
如果用过express2.0版本的会发现当时没有这个include,用的是一个模版文件layout.ejs来布局!
如何提交表单并接收参数?
如果要做一个网站应用,不可避免的会遇到表单的提交及获取参数的值,下面我们来看看用node.js + express怎么做
1.打开subform.ejs文件,修改文件代码为如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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.打开subform.js我们试着接收参数值并输出到控制台
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { var userName = req.query.txtUserName, userPwd = req.query.txtUserPwd, userName2 = req.param('txtUserName'), 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: '提交表单及接收参数示例' }); }); module.exports = router;
3.运行,并提交表单 在浏览器中运行:http://localhost:8000/subform,输入表单项并提交,可以发现url发生了变化
可以发现url中出现了我表单中输入并要提交的值!
我们再看看控制台的输出
我们完成了GET方式提交表单并接收到了值,不错^_^!(稍后在后面再去讲得到值的方式和区别)
再来在上面的代码基础上去修改一下表单的method简单模拟登录POST方式提交数据
1.首先修改一下subform.ejs文件中的form标签,修改为如下:
<form method="post"> ... </form>
2.再在subform.js中添加代码,接收post提交、接收参数并输出到控制台
... router.post('/',function(req, res){ var userName = req.body.txtUserName, userPwd = req.body.txtUserPwd, userName2 = req.param('txtUserName'), userPwd2 = req.param('txtUserPwd'); console.log('req.body用户名:'+userName); console.log('req.body密码:'+userPwd); console.log('req.param用户名:'+userName2); console.log('req.param密码:'+userPwd2);
res.render('subform', { title: '提交表单及接收参数示例' }); }); ...
3.运行,并提交表单 在浏览器中运行:http://localhost:8000/subform,输入表单项并提交,可以发现url不会发生变化
改为post方式后,会发现不会跟get方式提交一样在url中出现了表单中输入并要提交的值!
我们再看看控制台的输出
OK,我们完成了POST提交表单并接收参数!
再回过头看看GET和POST方式接收值,从直接效果上来看
req.query:我用来接收GET方式提交参数
req.body:我用来接收POST提交的参数
req.params:两种都能接收到
大家自行看看Express的Request部分的API: http://expressjs.com/api.html#req.params
这里着重解释一下req.body,Express处理这个post请求是通过中间件bodyParser,你可以看到app.js中有一块代码
... var bodyParser = require('body-parser'); ... app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); ...
没有这个中间件Express就不知道怎么处理这个请求,通过bodyParser中间件分析 application/x-www-form-urlencoded和application/json请求,并把变量存入req.body,这种我们才能够获取到!
如何字符串加密?
当我们提交表单后,比如密码这些敏感信息,不做个加密处理那也太不把用户私密信息当回事了,Node.js提供了一个加密模块 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.运行,输入并提交表单,查看控件台输出
成功MD5方式加密!
其中用到了createHash(algorithm)方法 ,这是利用给定的算法生成hash对象
Node.js提供的加密模块功能非常强大,Hash算法就提供了MD5、sha1、sha256等,根据需要去使用
update(data, [input_encoding])方法,可以通过指定的input_encoding和传入的data数据更新hash对象,input_encoding为可选参数,没有传入则作为buffer处理 (input_encoding可为'utf-8'、'ascii'等)
digest([encoding])方法,计算数据的hash摘要值,encoding是可选参数,不传则返回buffer (encoding可为 'hex'、'base64'等);当调用digest方法后hash对象将不可用;
如何使用session?
Internet通讯协议分为stateful和stateless两类,对Web开发有一定了解的应该知道,http是stateless协议,客户端发送请求到服务端建立一个连接,请求得得到响应后连接即中断,服务器端不会记录状态,因此服务器端想
要确定是哪个客户端提交过来的请求,那就必须要借助一些东西去完成,就是session和cookies,现在我们先说说session,以及在nodejs下使用session !
session存在于服务器端,需要cookies的协助才能完成;服务器端和客户端通过session id来建立联系(具体session和cookies怎么协作的,可以自已去补充点相关知识,这里只简单提一下,不展开了,要不然这篇文章就更杂了^_^!)
express中可以用中间件来使用session,express-session( https://github.com/expressjs/session ) 可以存在内存中,也可以存在mongodb、redis等中...
更多中间件:https://github.com/senchalabs/connect#middleware
下面我们通过示例看看怎么使用session (内存方式)
示例设计思路:使用两个页面,一个登录,两个页都判断是否有这个session,如果有,显示已登录,没有则显示一个登录按钮,点此按钮,记录session
1.首先通过npm安装这个中间件,打开package.json文件,在dependencies节点下添加一个键值对 "express-session" : "latest"
"dependencies": { ..., "express-session" : "latest" }
lateset:最新的
2. cd到项目根目录下,执行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'); ... //这里传入了一个密钥加session id app.use(cookieParser('Wilson'));
//使用靠就这个中间件 app.use(session({ secret: 'wilson'})); ...
这些options就不解释了,通过上面中间件的链接,自已看一下
4.我这里使用usesession和usecookies作示例,修改js和ejs如下
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <% include nav %> <% if(locals.islogin){ %> 用户已登录 <% } else { %> <form method="post"> <input type="submit" value="登录"> </form> <% } %> </body> </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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;
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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.运行并查看
第一次运行时,查看两个页,效果如下:
6.点击登录按钮后,再查看这两个页
7.关闭浏览器,再打开查看这两个页,如第5步截图效果
session的使用成功!
官方示例:https://github.com/visionmedia/express/blob/master/examples/session/index.js
如何使用cookies?
如果是登录,那常见就是“记录密码”或“自动登录”功能,这个一般用 cookies来完成
cookies存在客户端,安全性较低,一般要存入加密后的信息;建议要设置使用过期时间或不使用时删除掉
express也同样可以用中间件来使用:https://github.com/expressjs/cookie-parser
老套路,通过一个示例了解一下
示例设计思路:在上面session示例的基础上,在usecookies部分登录同时记录cookies,来自动登录
1.在上面session示例的基础上修改一下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; res.cookie('islogin', 'sucess', { maxAge: 60000 }); res.render('usecookies', { title: '使用cookies示例' }); }); module.exports = router;
2.运行访问 http://localhost:8000/usecookies,点击登录按钮登录成功并记录cookies
maxAge为过期时长,毫秒为单位,我设置一分钟
3.关闭浏览器,再次访问http://localhost:8000/usecookies ,页面显示已登录
4.再次关闭浏览器,过一分钟再访问http://localhost:8000/usecookies,页面不再是已登录,而是显示登录按钮,表示cookies过期,不会自动登录
cookies的使用到此也成功!
官方示例:https://github.com/visionmedia/express/blob/master/examples/cookies/app.js
如何清除session和cookies?
清除非常简单,就不用示例说明了,有兴趣自已定义个路由规则,试试
//清除cookies res.clearCookie('islogin'); //清除session req.session.destroy();
写在之后
最近比较忙,更新距上了篇时间较长了,本篇东西讲的比较杂,讲到的也比较有限,主要是为了后来会写的一个示例打基础;
本篇内容讲到的一些知识点,其实都可以单独拿一整篇去讲,本篇基本原则是为了看了之后能使用;
要想弄清楚原理或者更多的相关知识,自已可以花点时间去了解,或者找点资料去丰富一下,当然也可以留言,在我觉得我没乱说的情况下我会尽量解答^_^!