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的使用