Beratung benötigt: Wie man React korrekt mit MongoDB verbindet

Question

Ich habe etwas Zeit investiert, React, MongoDB und andere JS Web app bezogene Werkzeuge zu lernen. Für ein kleines Projekt, das ich erstellt habe, verwende ich dieses Repository, um meine Spielzeug-App Create React App with no build zu erstellen. Als ich durch meine App Fortschritte gemacht habe, habe ich eine Menge von React verwandten Tools und Materialien im Nachhinein gelernt.

Der Teil, auf dem ich feststecke, versuche ich, die Daten eines Kontaktformulars in MongoDB einzureichen, aber bis jetzt bin ich beim Verbinden meiner App mit MongoDB nicht erfolgreich.

Hier ist mein Code für MongoDB. Ich habe ziemlich viel Kopie und klebte den Code aus dem MongoDB führt auf meiner Web-App in eine src/modules/mongo.js Datei

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

Der obige Code ist einfach, es fügt grundsätzlich ein Dokument in eine Sammlung.

Hier ist meine zweite Datei in 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..... 

    } 

jetzt so weit, ich habe in der Lage gewesen, durch die MongoDB Führer zu arbeiten, ich habe meine Datenbank erstellt, die Konsole zugreifen kann, und Daten einfügen durch die Konsole. Was ich nicht herausgefunden habe, ist, wie man meine App mit mongodb verbindet, also wenn ich auf eine Absenden-Schaltfläche klicke, wird das Dokument in die richtige Datenbank eingefügt. Wenn ich von Rails komme und ein wenig Flask benutze, kann ich normalerweise eine .create Methode aufrufen, die eine Verbindung zu meiner Datenbank herstellt oder eine Art von SQL Alchemy Operation ausführt, die die Datenbank öffnet und schließt. Ich diesen Ansatz versucht haben, indem er versucht, die beiden Dateien zusammen zu kombinieren, aber wenn ich das tue, kann ich nicht einmal laufen npm start sonst ich diese Art von Fehler erhalten:

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 

Also meine Frage ist, wie kann ich einfach Verbinden Sie meine App, um die mongodb-Datenbank zu öffnen und darauf zu schreiben? Ich habe eine Menge Tutorials gelesen, aber dann bekomme ich ein Loch in den Hasen und verwirrt weiter über Express, Mongoose, Flux und weiter und weiter. Von einem Überblick auf hoher Ebene scheint es, als ob ich nicht einmal Express oder Mongoose brauche, ich möchte einfach nur meine Daten ohne ein Schema einfügen und um ehrlich zu sein, bekomme ich nicht wirklich, was Flux ist, aber von dem, was ich erhalte Ich brauche es wirklich für meine kleine App (glaube ich). Ich könnte hier einen kleinen Schubs in die richtige Richtung machen. Vielen Dank.

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

Answer 1

Sie haben Endpunkt (Server-Seite) erstellen, können Knoten sein kann, etwas anderes wie PHP, und es wird Sie Anfrage annehmen und die Daten in die Datenbank einfügen. Ihre React App wird Ajax Anruf an den Server und der Server wird die Daten in die Datenbank setzen

Wenn Sie das mit Express tun möchten, können Sie einfache Express-App mit einer Route erstellen, die die Daten vom Client und erhalten wird das an MongoDB senden. Sie müssen nicht Mongoose verwenden Sie können MongoDB-Treiber oder äußere verwenden, um einfach die Daten an MongoDB zu senden.