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

Question

我花了一些时间学习React,MongoDB和其他JS web app相关工具.对于我创建的一个小项目,我使用此存储库来创建我的玩具应用程序Create React App,没有构建.随着我的应用程序的进展,我事后已经学到了很多与React相关的工具和材料.

我坚持的部分是我正在尝试将联系表单的数据提交到MongoDB,但到目前为止我还没有成功将我的应用程序与MongoDB联系起来.

这是我的MongoDB代码.我已经将MongoDB指南中的代码复制并粘贴到我的Web应用程序中的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

Answer 1

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

如果你想用 express 来做到这一点，你可以创建一个简单的 express 应用程序，其中一个路由将从客户端获取数据并将其发送到 MongoDB。您不必使用 Mongoose 您可以使用 MongoDB 驱动程序或外部简单地将数据发送到 MongoDB。