Warning: file_get_contents(/data/phpspider/zhask/data//catemap/6/mongodb/13.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js 使用Express/Node和MongoDB响应POST请求_Node.js_Mongodb_Reactjs_Express_Crud - Fatal编程技术网

Node.js 使用Express/Node和MongoDB响应POST请求

Node.js 使用Express/Node和MongoDB响应POST请求,node.js,mongodb,reactjs,express,crud,Node.js,Mongodb,Reactjs,Express,Crud,我正在编写一个程序,使用React作为前端,后端使用Express/Node API,然后在MongoDB数据库中执行CRUD操作。现在,我正在使用本机JS fetch()API在前端执行GET/POST操作。GET请求工作正常,但我的POST请求似乎不起作用。在我的前端,我有一个表单和一个表单提交处理程序,如下所示: handleSubmit(){ let databody = { "name": this.state.nameIn, "quote":

我正在编写一个程序,使用React作为前端,后端使用Express/Node API,然后在MongoDB数据库中执行CRUD操作。现在,我正在使用本机JS fetch()API在前端执行GET/POST操作。GET请求工作正常,但我的POST请求似乎不起作用。在我的前端,我有一个表单和一个表单提交处理程序,如下所示:

handleSubmit(){
    let databody = {
        "name": this.state.nameIn,
        "quote": this.state.quoteIn
    }

    return fetch('http://localhost:5002/stored', {
        method: 'POST',
        body: JSON.stringify(databody),
        headers: {
            'Content-Type': 'application/json'
        },
    })
    .then(res => res.json())
    .then(data => console.log(data)); 
}


render(){
    return (
        <div>
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name
                    <input type="text" name="name" value={this.nameIn} onChange={this.handleNameChange}/>
                </label>
                <label>
                    quote
                    <input type="text" name="quote" value={this.quoteIn} onChange={this.handleQuoteChange}/>
                </label>
                <input type="submit" value="Add to DB" />
            </form> 
        </div>
    );
}

但是,当表单提交时,请求在Express API上显示为空体。console.log显示req.body只是一个{}我想知道我做错了什么?

使用
body解析器

在express代码中添加:

global.bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({
  extended: true,
  limit: '50mb',
  parameterLimit: 100000
}))
app.use(bodyParser.json({
  limit: '50mb',
  parameterLimit: 100000
}))


app.post('/stored', (req, res) => {
    console.log(req.body);
    db.collection('quotes').insertOne(req.body, (err, data) => {
        if(err) return console.log(err);
        res.send(('saved to db: ' + data));
    })
});
在你的简历中:

handleSubmit:function(e){
   e.preventDefault();
    let databody = {
        "name": this.state.nameIn,
        "quote": this.state.quoteIn
    }

    fetch('http://localhost:5002/stored', {
            method: 'POST',
            body: JSON.stringify(databody),
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => console.log(data));
}

如果您使用express 4.16或更高版本,则只需使用,它将尝试解析请求正文的JSON并将其保存到req.body,但前提是标题“Content Type:application/JSON”随请求一起发送:

const app = express();
app.use(express.json()); // Parses request body if type is json. Saves to req.body.

请检查开发控制台的网络选项卡。那些物体出现在你的身体里了吗?
const app = express();
app.use(express.json()); // Parses request body if type is json. Saves to req.body.