需要的建议:如何正确地将React连接到MongoDB [英] Advice Needed: How to properly connect React to MongoDB

问题描述

我一直在花一些时间来学习React，MongoDB和其他与JS Web应用程序相关的工具.对于我创建的一个小项目，我正在使用此存储库来创建我的玩具应用程序创建没有构建.在我开发应用程序的过程中，事后我学到了很多与React相关的工具和材料.

I have been investing some time learning React, MongoDB, and other JS web app related tools. For a small project that I created, I am using this repository to create my toy app Create React App with no build. As I've progressed through my app I've learned a lot of React related tools and materials after the fact.

我遇到的困难是我试图将联系表单的数据提交到MongoDB中，但到目前为止，我无法将我的应用程序与MongoDB挂钩.

The part that I am stuck on is I am trying to submit a contact form's data into MongoDB but so far I'm unsuccessful in hooking up my app with MongoDB.

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

Here is my code for MongoDB. I've pretty much copy and pasted the code from the MongoDB guides onto my web app into a src/modules/mongo.js file

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

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

The above code is straightforward, it basically inserts one document into a collection.

这是我在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，否则会出现以下类型的错误:

Now so far, I've been able to work through the MongoDB guides, I've created my database, can access the console, and can insert data through the console. What I haven't figured out is how to wire my app to mongodb so when I click a submit button it will insert the document in the right database. Coming from Rails and using a little bit of Flask, I can usually call a .create method which connects to my database or do some sort of SQL Alchemy operation which opens and closes the database. I've tried this approach by attempting to combine the two files together but when I do that, I can't even run npm start otherwise I get these types of errors:

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是什么，但是从我的收集中我我的小型应用程序真的不需要它(我认为).我可以在正确的方向上使用一点微调.谢谢.

So my question is how can I simply connect my app to open the mongodb database and write to it? I've been reading a lot of tutorials but then I get rabbit holed and confused further talking about Express, Mongoose, Flux and on and on. From a high level overview it seems like I don't even need Express or Mongoose, I simply just want to insert my data without a schema and to be honest I don't really get what Flux is but from what I gather, I don't really need it for my small app (I think). I could use a little nudge in the right direction on this one. Thanks.

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

推荐答案

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

You have to create endpoint (server side) can be Node can be something else like php, and there you will accept request and insert the data to your database. Your React app will make ajax call to the server and the server will put the data to the database

如果要使用Express做到这一点，您可以使用一条路由创建简单的Express应用，该路由将从客户端获取数据并将其发送到MongoDB.您不必使用Mongoose，您可以使用MongoDB驱动程序或外部驱动程序，只需将数据发送到MongoDB.

If you want to do that with express you can create simple express app with one route that will get the data from the client and will send that to MongoDB. you dont have to use Mongoose you can use MongoDB driver or outer to simply send the data to MongoDB.

这篇关于需要的建议:如何正确地将React连接到MongoDB的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！