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

╰+哭是因爲堅強的太久メ 2023-02-28 05:43 319阅读 0赞

### 写在前面 ###

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

### 环境要求 ###

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

### 操作步骤 ###

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

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

npm install body-parser --save-dev

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

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、在后台接口代码中去获取前端传递的参数，如下：

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来访问，如下：

$.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、最后可以看到结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70][]

### 总结 ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70]: /images/20230209/9ee14e4d6fb04a0899129da1136e22fa.png