react app中mongodb的简单连接

IT技术 javascript node.js mongodb reactjs
2021-05-07 09:43:02

我使用“create-react-app”创建了简单的react应用程序。这个应用程序包含表单、验证和引导程序。没有什么花哨的东西就像魅力一样。

我还注册了 mongo 以获得一个免费集群，以便我可以将一些数据发送到。所以我有这个网址：

mongodb+srv://matt:passwprd@cluster0-jlasm.mongodb.net/test

现在，我想要做的就是将 JSON 数据从表单发送到 mongo，但我不知道如何。

当我按照教程安装 MongoDB、mongoose 或任何软件包并为未来的 CRUD 操作添加基本设置时：

var MongoClient = require('mongodb').MongoClient
  , assert = require('assert');

// Connection URL
var url = 'mongodb+srv://mattOsuch:brainhub123@cluster0-jlasm.mongodb.net/test';

// Use connect method to connect to the server
MongoClient.connect(url, function(err, db) {
  assert.equal(null, err);
  console.log("Connected successfully to server");

  db.close();
});

整个应用程序崩溃：

./node_modules/mongodb-core/lib/uri_parser.js
Module not found: Can't resolve 'dns' in 'C:\Users\Mateusz\Desktop\brainhub\node_modules\mongodb-core\lib'

我曾经在 PHP 中使用 jQuery 或 mysql_query 发送数据，但我无法克服这个问题。换句话说，我想实现此视频中介绍的功能：https : //www.youtube.com/watch?v= Jsqz5op4fH8 正如我所说，简单的数据更新。

我怀疑 react-scripts 服务器侦听器与 mongo 存在某种冲突，但我不确定。

请帮助我，因为我正在失去神经。

4个回答

您正在使用 node.js 所以启动服务器应用程序尝试使用快速路由这里是教程的链接https://zellwk.com/blog/crud-express-mongodb或https://codeburst.io/hitchhikers-guide-to -back-end-development-with-examples-3f97c70e0073或尝试进行谷歌搜索（node.js mongodb 和 express）。

然后当从服务器返回请求时发送所需的数据，然后使用您的react客户端处理收到的数据

要在 javascript 中连接到 MongoDb，您必须使用 node.js 服务器。因此，不可能将您的 React 应用程序直接连接到您的 MongoDb 集群。

更多信息，请访问MongoDb官方文档

希望它有效！

handleSubmit(){
let databody = {
    "name": this.state.name,
     // Remaining form Data
}

return fetch('mongodb+srv://mattOsuch:brainhub123@cluster0-jlasm.mongodb.net/test', {
    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}>
               // Form Fields
            <input type="submit" value="Save" />
        </form> 
    </div>
);
 }

  1. 首先，您需要在前端创建一个 React.js，然后在后端 Web 应用程序上创建 node.js。

  2. 然后，您需要将您的 mongodb 集合连接到您的 Node.js 服务器。

  3. 然后你可以将你的表单数据发送到你的 node.js 服务器，你的 node.js 服务器会将你的表单数据发送到你的 mongodb 集合。

如果您不了解 NodeJS，那么制作一个完整的 React-NodeJS-MongoDB Web 应用程序可能会有点挑战。因此，您可能首先从 EJS-NodeJS-MongoDB Web 应用程序开始。但无论如何，这里有您的问题的链接：https : //www.youtube.com/watch ? v = 3isCTSUdXaQ & t = 2248s https://www.youtube.com/watch?v=Oa0pMn0tvU4&t=1316s

其它你可能感兴趣的问题
上一篇React Helmet 可以将 javascript 对象注入 <HEAD> 标签吗？ 下一篇npm 仅链接 dist 文件夹