上一节-node.js学习(9)—express框架基本用法
上节我们讲解了express的基本用法以及通过前台获取node服务器返回的数据。但是,有个问题,当时我们只介绍了服务端接收到请求并返回给前台数据,并没有细说服务器怎么取到前台传过来的数据(只是简单提及了get请求通过req.query
可以拿到参数,post却没有)。本节我们着重讲解服务端获取请求的参数
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数据的功能,如果有时间,可以再拓展。