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

2024-05-07

我正在编写一个程序,该程序使用 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>
    );
}

然后在端口 5002 上的 Express API 上,我有:

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));
    })
});

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


use body-parser

在您的快速代码中添加:

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));
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Express/Node 和 MongoDB 响应 POST 请求 的相关文章

随机推荐

  • 用于多个项目构建的多个设置 gradle 文件

    我有以下项目结构 gt Starnderd Location gt Project1 gt settings gradle gt build gradle gt Subproject11 gt build gradle gt Subproj
  • Terraform azurerm 计划 start_time 始终在新部署时重置

    我正在尝试获取资源azurerm automation schedule在特定时间部署 ex 18 00 每月发生 我正在使用以下代码 locals update time 18 00 update date formatdate YYYY
  • 即使给出了公钥,Gitosis 也需要密码

    我在 Archlinux 上尝试配置 gitosis 时遇到了一些问题 http wiki archlinux org index php Setting Up Git ACL Using gitosis http wiki archlin
  • Pandas .describe() 仅返回 int 数据帧的 4 个统计信息(计数、唯一、顶部、频率)...没有最小值、最大值等

    为什么会这样呢 我的数据看起来非常简单明了 它是一个 1 列的整数数据帧 但是 describe 只返回计数 唯一 顶部 频率 而不是最大值 最小值和其他预期输出 注意 describe 功能与其他项目 数据集中的预期相同 pandas 似
  • 无法通过 PyODBC 连接创建数据库

    我在用pyodbc in python 2 7 with MS SQL Server 2008R 这是我创建数据库的代码 SQL代码单独在SQL中工作正常 但在python中执行时崩溃 SQL command IF EXISTS SELEC
  • 在 JMETER 中循环遍历 JSON 响应 +

    我正在使用 Jmeter 进行性能测试并卡在以下点 我从 Webapi 收到 JSON 响应 如下所示 PersonInfoList Person 0 id 1 name Steve 1 Person id 2 name Mark 我需要根
  • 使用 HashSet 创建整数集

    我想创建一个表示整数集的类 使用HashSet
  • 获取 django 的本地时区

    我有一个mysqlDATETIME存储在系统时间 UTC 中的值 我需要将其转换为 django 中的本地时区 这是我目前拥有的 value in mysql timestamp 2013 02 01 22 48 45 settings p
  • 我如何在 C++ 中将数组存储到队列

    queue lt int gt qq for int i 0 i lt N i int cc 2 i i 1 qq push cc N很大但不精确 所以我想使用队列 我想存储很多数组来排队 但是 qq 存储的数组是同一个 我该怎么做 你的代
  • jQuery 悬停滑动?

    检查底部是否有修订版 好吧 问题就到这里了 我有一个li with a div在里面 我试图将鼠标悬停在li得到div向上滑动到视图中 这是 HTML li div h4 title h4 p description p div li 现在
  • Apache Kafka 与 Apache Storm

    Apache Kafka 分布式消息系统Apache Storm 实时消息处理 我们如何在实时数据管道中使用这两种技术来处理事件数据 就实时数据管道而言 在我看来 两者的工作都是相同的 我们如何在数据管道上使用这两种技术 您可以使用 Apa
  • 通过 ConfigurableApplicationContext refresh() 重新加载 Spring 应用程序上下文是否被认为是不好的做法

    我们有一个 Spring 应用程序托管在共享tomcat实例 有时我们必须重新加载 Spring 应用程序上下文 但又不想重新启动 Tomcat 服务器 因为其他应用程序也托管在那里 正在通过以下方式刷新 spring 应用程序上下文 Co
  • 理解 git log --stat 输出

    我试图理解的输出git log stat命令 第一个输出 commit 4c90aee323acc337a37040e02a0a3644f4155738 Date Fri May 1 22 46 11 2015 0400 Submittin
  • java:使用2个线程打印奇偶数

    我正在尝试交替使用 2 个不同的线程打印奇数和偶数 我能够使用等待 通知和同步块来实现它 但现在我想评估我们是否可以在不使用等待 通知和同步的情况下实现它 以下是我的代码 但它不起作用 public class OddEvenUsingAt
  • 在react ComponentDidMount中访问this.props

    我是个新手 无法做出反应 并且陷入了某个项目 问题是我有一个api url in this props从父组件接收 在这个子组件中我想使用api url使用 JSON 获取一些数据 在父组件中我有 Repositories api url
  • Java刷新第二种形式

    我有两种形式 第一个是使用jslider来确定按钮的数量 第二种形式是根据jslider值显示jbuttons 当我单击 jbutton2 时 第二个窗体显示并显示按钮 它工作得很好 但是 我想在第二个表单上创建 jbutton 而不单击第
  • ASP.NET 网站中的 webbrowser 类

    我有一个要求 需要访问一个网页并对其进行截图 为此 我必须创建一个 ASP NET 以便用户可以输入网站 URL 我试图创建一个 Web 浏览器控件 但后来意识到我无法在 ASP NET 网站中创建 Web 浏览器控件 我正在尝试做这样的事
  • printf 中的空格作为分组分隔符

    我知道如何使用逗号printf作为分组分隔符以类似格式打印值1 000 000 00 以我正在使用命令的方式打印它 System out printf 2f value 但如何使用空格作为分组分隔符来格式化值 例如1 000 000 00
  • 从扩展后台或弹出窗口发送消息到内容脚本不起作用

    我知道这个问题已经以不同的方式被反复问过 但我尝试过一遍所有的答案 希望我没有错过任何人 但没有一个对我有用 这是我的扩展程序的代码 显现 name test version 1 1 background scripts contextMe
  • 使用 Express/Node 和 MongoDB 响应 POST 请求

    我正在编写一个程序 该程序使用 React 作为前端 并使用 Express Node API 作为后端 然后在 MongoDB 数据库中执行 CRUD 操作 现在 我正在使用本机 JS fetch API 在前端执行 GET POST 操