在反应应用程序中与 mongodb 的简单连接答案

【问题标题】：Simple connection to mongodb in react app在反应应用程序中与 mongodb 的简单连接
【发布时间】：2018-09-15 17:15:04
【问题描述】：

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

我还注册了 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 有某种冲突，但我不确定。

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

【问题讨论】：

一般来说，您希望在服务器端构建此类功能（数据库 CRUD），而您的 React 应用程序在客户端运行。您所做的是不安全，因为您将数据库凭据硬编码到客户端应用程序中，任何访问者都可以查看其源代码。
好评@niels +
@NielsdeBruin，那么开发它的正确方法是什么？我至少需要一些提示，因为我的想法已经不多了。
@MateuszOsuch 这不应该在 React 中完成。您需要一个单独的服务器端应用程序/ API 来执行此操作。 React 会调用那个 API。
如果您的 React 应用程序是汽车内的仪表板，那么您是在问我如何构建引擎。构建后端有很多选择，但因为您已经在使用 Javascript您可以搜索有关如何使用 Mongoose 构建 Node.js 应用程序的教程。它可以为您呈现 React 视图，或者您需要构建一个 API。不管怎样，这与简单地编写一个 React 应用程序完全不同，但这是正确的方法。

标签： javascript node.js mongodb reactjs

【解决方案1】：

您正在使用 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）。

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

【讨论】：

【解决方案2】：

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

更多信息，请访问官方MongoDb documentation

【讨论】：

【解决方案3】：

希望它有效！

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

【讨论】：

【解决方案4】：

首先您需要在前端创建一个 React.js，然后在后端 Web 应用程序上创建一个 node.js。
然后，您需要将您的 mongodb 集合连接到您的 Node.js 服务器。
然后您可以将表单数据发送到您的 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

【讨论】：