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

Posted 2023-03-07

【中文标题】在反应应用程序中与 mongodb 的简单连接

【英文标题】：Simple connection to mongodb in react app

【发布时间】：2018-09-15 17:15:04

【问题描述】：

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

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

mongodb+srv://matt:[e-mail]/test

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

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

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

// Connection URL
var url = 'mongodb+srv://mattOsuch:[e-mail]/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 应用程序完全不同，但这是正确的方法。

【参考方案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:[e-mail]/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