node.js学习(10)——express中间件—body-parser获取post、get数据

上一节-node.js学习(9)—express框架基本用法

上节我们讲解了express的基本用法以及通过前台获取node服务器返回的数据。但是,有个问题,当时我们只介绍了服务端接收到请求并返回给前台数据,并没有细说服务器怎么取到前台传过来的数据(只是简单提及了get请求通过req.query可以拿到参数,post却没有)。本节我们着重讲解服务端获取请求的参数

1542712902(1).jpg

1.post请求——req.query

//form.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:8080/user"  method='get'>
        账号:<input type="text" name="name">
        <input type="submit" value="提交">
    </form>
</body>
</html>

//server.js
const express=require('express');
var server=express();
server.listen(8080);


server.get('/user',function(req,res){
    console.log(req.query); 
})

经测试,我们可以通过req.query得到get请求的参数。

1.在express中,已经封装好获取get参数的方法,即req.query,但是post请求的参数却没有被封装,需要我们借助中间件(body-parser)来获取。

2.post请求——中间件body-parser

express框架内置body-parser中间件,不需要在单独安装,我们可以使用它来获取post参数。现在我们修改form.html的method属性为post提交,然后修改server.js

const express=require('express');
const server=express();
const bodyParser = require('body-parser');

server.listen(8080,function(){
    console.log('http://localhost:8080');
});
server.use(bodyParser.urlencoded()); //调用中间件
server.post('/user',function(req,res){
    console.log(req.body); 
})

经测试,我们已经可以通过req.body得到post请求的参数。

1.express通过use来调用中间件server.use(中间件函数)
2.通过server.use(bodyParser.urlencoded())调用中间件后,中间件的作用将会在下面所有的代码中生效,所以req会增加body参数
3.bodyParser其实还有很多参数配置,我们这里面并没有介绍,具体可以到github上面找到官方文档

3.express链式操作

在express中若访问相同地址,则会形成链式操作。什么意思?我们看例子:

//server.js
const express=require('express');
const server=express();
const bodyParser = require('body-parser');

server.listen(8080,function(){
    console.log('http://localhost:8080');
});
server.post('/user',function(req,res){
    console.log(1); 
})
server.post('/user',function(req,res){
    console.log(2); 
})

经测试上面代码,我们会发现只输出了1,并没有输出2,当我们有多条访问统一路径的语句时候,就会形成链式操作,默认只执行第一个,需要手动调用来执行下一步。现在我们修改代码如下:

const express=require('express');
const server=express();
const bodyParser = require('body-parser');

server.listen(8080,function(){
    console.log('http://localhost:8080');
});
server.post('/user',function(req,res,next){
    console.log(1); 
    next();
})
server.post('/user',function(req,res,next){
    console.log(2); 
})

我们在回调函数中增加地三个参数——next,通过调用next()来进行下一步操作,经测试结果,我们会发现输出了1和2。

1.链式操作,你可以简单理解是规定这个操作流程有一个步骤,即需要先做什么,然后做什么。依次下去形成一个“流水线”。我们可以通过next来选择是否进行下一步操作

4.自己编写中间件

在上面我们使用了body-parser中间件来获取post提交的参数,那么我们怎么写一个类似的中间件呢?接下来,我们就以body-parser为例子,看看怎么实现它。

在编写中间件前,我们先看个小例子:

const express=require('express');
const server=express();

server.listen(8080,function(){
    console.log('http://localhost:8080');
});
server.post('/user',function(req,res,next){
    req.test=1
    next()
})
server.use('/user',function(req,res,next){
    console.log(req.test); //1
})

我们两条语句都为/user(尽管一个为post一个为use),所以为链式操作。我们在第一次,给req增加一个test属性,在第二次打印这个属性,发现可以正确输出。说明链式操作中,req是可以传递的。即后面的req参数等于上一步的req参数

了解了参数传递后,我们开始正式编写body-parser中间件。之前我们在node.js学习(5)——form提交数据(post)中,曾讲过原生获取post参数的方法。实际body-parser中间件便是通过该方法来封装的。接下来看代码:

const express=require('express');
const server=express();
const querystring = require('querystring');


server.listen(8080,function(){
    console.log('http://localhost:8080');
});


server.use(function(req,res,next){//没有第一个参数,则对所有路径请求都接收
    var str = '';
    req.on('data',function(data){
        str+=data;
    });
    req.on('end',function(){
        req.body = querystring.parse(str);  //解析字符串
        next();  //因为默认接收所有路径,所以当使用时会和其他语句形成链式操作,所以需要增加next
    });
});
//现在我们测试下,增加下面代码
server.use('/user',function(req,res,next){
    console.log(req.body);
})

经测试,我们可以输出form表单提交的值。上面我们可以简单实现一个body-parser(仅仅获取post数据,实际的body-parser还有很多配置项等方法)。现在我们开始封装此中间件。
很简单,我们把上面原生的函数抽离出来放到一个提前建好的body-parser.js文件并导出。

module.exports={
    urlencoded:function(req,res,next){//没有第一个参数,则对所有路径请求都接收
        var str = '';
        req.on('data',function(data){
            str+=data;
        });
        req.on('end',function(){
            req.body = querystring.parse(str);  //解析字符串
            next();  //因为默认接收所有路径,所以当使用时会和其他语句形成链式操作,所以需要增加next
        });
    }
}

然后我们引入进去,

const express=require('express');
const server=express();
const bodyParser=require('./body-parser');

server.listen(8080,function(){
    console.log('http://localhost:8080');
});

server.use(bodyParser.urlencoded()) //使用导入过来的中间件

//现在我们测试下,增加下面代码,可以正确拿到post参数
server.use('/user',function(req,res,next){
    console.log(req.body);
})

查阅body-parser文档,发现里面还有很多方法,我们自己封装的中间件,只是实现了获取post数据的功能,如果有时间,可以再拓展。

下一节-node.js学习(11)—cookie和session的使用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343