需要的建议：如何正确地将 React 连接到 MongoDB

Posted 2023-03-07

【中文标题】需要的建议：如何正确地将 React 连接到 MongoDB

【英文标题】：Advice Needed: How to properly connect React to MongoDB

【发布时间】：2017-04-05 03:46:44

【问题描述】：

我一直在花一些时间学习 React、MongoDB 和其他 JS Web 应用程序相关工具。对于我创建的一个小项目，我正在使用这个存储库来创建我的玩具应用程序Create React App with no build。随着我在应用程序上的进步，事后我学到了很多与 React 相关的工具和材料。

我坚持的部分是我正在尝试将联系表单的数据提交到 MongoDB，但到目前为止，我未能成功地将我的应用程序与 MongoDB 连接起来。

这是我的 MongoDB 代码。我已经将 MongoDB 指南中的代码复制并粘贴到我的网络应用程序中，并将其粘贴到 src/modules/mongo.js 文件中

const MongoClient = require('mongodb').MongoClient;
const assert = require('assert');
const ObjectId = require('mongodb').ObjectID;
const url = 'mongodb://localhost:27017/danielrubio';

const insertFormData(db, callback) 
   db.collection('contactsubmissions').insertOne( 
      "name": name,
      "message": message,
      "email": email
    , function(err, result) 
    assert.equal(err, null);
    console.log("Inserted a document into the restaurants collection.");
    callback();
  );
;

MongoClient.connect(url, function(err, db) 
  assert.equal(null, err);
  insertDocument(db, function() 
    db.close();
  );
)

上面的代码很简单，它基本上是将一个文档插入到一个集合中。

这是我在src/modules/contact.js中的第二个文件

import React,  Component  from 'react';
import Formsy from 'formsy-react';
import  FormsyText  from 'formsy-material-ui/lib';
import Paper from 'material-ui/Paper';
import RaisedButton from 'material-ui/RaisedButton';
import Snackbar from 'material-ui/Snackbar';
import '../assets/css/style.css';

class ContactForm extends Component 
  constructor(props) 
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state =  open: false ;
  

  handleSubmit(data) 
    db.insertDocument(
       form submission info
       db.close()
    )
  

  ......more code.....

  

到目前为止，我已经能够通过 MongoDB 指南工作，我已经创建了我的数据库，可以访问控制台，并且可以通过控制台插入数据。我还没有弄清楚如何将我的应用程序连接到 mongodb，所以当我单击提交按钮时，它会将文档插入到正确的数据库中。来自 Rails 并使用一点 Flask，我通常可以调用 .create 方法连接到我的数据库或执行某种 SQL Alchemy 操作来打开和关闭数据库。我通过尝试将这两个文件组合在一起来尝试这种方法，但是当我这样做时，我什至无法运行 npm start 否则我会收到这些类型的错误：

Error in ./~/mongodb/lib/gridfs/grid_store.js
Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/mongodb/lib/gridfs
 @ ./~/mongodb/lib/gridfs/grid_store.js 42:7-20

Error in ./~/mongodb-core/lib/connection/connection.js
Module not found: Error: Cannot resolve module 'net' in /Users/drubio/Desktop/react_personal_website/node_modules/mongodb-core/lib/connection
 @ ./~/mongodb-core/lib/connection/connection.js 5:10-24

Error in ./~/mongodb-core/lib/connection/connection.js
Module not found: Error: Cannot resolve module 'tls' in /Users/drubio/Desktop/react_personal_website/node_modules/mongodb-core/lib/connection
 @ ./~/mongodb-core/lib/connection/connection.js 6:10-24

所以我的问题是如何简单地连接我的应用程序以打开 mongodb 数据库并写入它？我已经阅读了很多教程，但后来我在谈论Express、Mongoose、Flux 等等时陷入困境并感到困惑。从高级别的概述看来，我什至不需要 Express 或 Mongoose，我只是想插入没有模式的数据，老实说，我并没有真正了解 Flux 是什么，但从我收集的内容来看，我不知道我的小应用程序真的不需要它（我认为）。我可以在这个正确的方向上稍微推动一下。谢谢。

  [1]: https://github.com/facebookincubator/create-react-app

【问题讨论】：

您是否尝试将MongoClient（服务器代码）与您的 React 应用程序（客户端代码）捆绑在一起？

@Ashley'CptLemming'Wilson 感谢您的回复。我不知道还有什么办法。在 Flask 中，您可以使用 SQL ALchemy 调用将数据插入数据库，然后部署到 Heroku。我基本上只是想对 React 和 Mongo 做同样的事情。捆绑服务端代码和客户端代码不是办法吗？

【参考方案1】：

您必须创建端点（服务器端），可以是 Node，也可以是 php 之类的其他东西，在那里您将接受请求并将数据插入到您的数据库中。您的 React 应用程序将对服务器进行 ajax 调用，服务器会将数据放入数据库

如果您想使用 express 执行此操作，您可以创建一个简单的 express 应用程序，该应用程序具有一个路由，该路由将从客户端获取数据并将其发送到 MongoDB。您不必使用 Mongoose，您可以使用 MongoDB 驱动程序或外部来简单地将数据发送到 MongoDB。

【讨论】：

感谢您的回答。让我谈谈你对某事的看法。我试图了解如何做到这一点，我发现这两个链接youtube.com/watch?v=ZKwrOXl5TDI 和fullstackreact.com/articles/…。他们中的任何一个都是正确的方法吗？我真的很想做 youtube 视频方法，但它看起来不兼容，并且完整的堆栈反应链接说我需要在另一个端口上托管另一台服务器。这是它通常的做法吗？

YouTube 视频中的解释正是我告诉你的内容，我认为实现起来非常简单（客户端应用程序与服务器应用程序对话，服务器应用程序与数据库对话）

谢谢@Ariel，我会用它作为我的权威指南。