0%

【NodeJS】基于Express框架创建的Node后台获取前端传过来的参数

此文章是这个系列的第四篇文章,我们给大家介绍下如何在Node的后台项目中获取前端页面传过来的值。

写在前面

NodeJS后台主要是用来实现后台数据库的增删改查,那么数据库的增删改查是需要依赖我们前端传过来的数据值,也就是说,我们要在数据库中插入一个值,插入的这个过程是NodeJS后台代码来做,具体要插入的值则是我们前端通过ajax或者axios传过去的值,所以就有一个问题:在NodeJS后台我们要接受前端传过来的值。所以这一篇文章应运而生。

环境要求

  • 安装了NodeJS环境(可以使用npm包管理工具)
  • 初始化了一个NodeJS后台项目demo

操作步骤

1、在后台接口中,我们一般是使用req.body来获取前端通过ajax或者axios传递过来的参数的,但是有时候我们通过req.body去获取的时候发现参数为空,所以我们就要找一种解决方法,在这里推荐使用body-parser插件来解决。

2、首先在后台项目根目录下运行命令行工具,然后安装这个插件,如下:

1
npm install body-parser --save-dev

3、然后在index.js文件中添加如下两行配置代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var express = require('express');
var app = express();
var bodyParser = require('body-parser'); //首先要引入这个插件

var home = require('./routers/home');
var geocode = require('./routers/geocode');

//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

app.use(bodyParser.urlencoded({ //配置这两行代码
extended: true
}));
app.use(bodyParser.json()); //配置这两行代码

app.use('/', home);
app.use('/geocode', geocode);

app.listen(3001);

4、在后台接口代码中去获取前端传递的参数,如下:

1
2
3
4
5
6
7
8
9
10
11
var express = require('express');
var router = express.Router();

router.post('/forward', function(req, res) {
res.send({
state: 'success',
data: req.body.queryStr //获取前端传递的参数
});
});

module.exports = router;

5、在前端通过ajax来访问,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
url: 'http://localhost:3001/geocode/forward',
type: 'Post',
data: {
queryStr: '成都'
},
dataType: 'json',
success: function(result) {
console.log(result);
},
error: function(err) {
console.log('请求出错',err);
}
})

6、最后可以看到结果如下:

img

总结

这篇文章介绍了一个POST类型的后台NodeJS接口如何接收前端传过来的参数问题,对于GET类型的后台接口,我们后续讨论,因为博主暂时并没涉及到GET类型的后台接口需求。