需要建議：如何正確連接React到MongoDB

我一直在投入一些時間來學習React，MongoDB和其他JS web應用相關工具。對於我創建的一個小項目，我正在使用此存儲庫創建我的玩具應用程序Create React App with no build。隨着我在應用程序中的進展，我在事後瞭解了很多與React相關的工具和材料。需要建議：如何正確連接React到MongoDB

我困住的部分是我試圖將聯繫表單的數據提交到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

來源

2016-11-21 Dan Rubio

您是否試圖將'MongoClient'（服務器代碼）與您的React應用程序（客戶端代碼）綁定？ –

@ Ashley'CptLemming'Wilson謝謝你的回覆。我不知道任何其他方式。在Flask中，您可以使用SQL ALchemy將插入數據調用到數據庫中，然後部署到Heroku。我基本上只是試圖對React和Mongo做同樣的事情。捆綁服務器代碼和客戶端代碼不是實現它的方式嗎？ –

您必須創建端點（服務器端）纔可以Node可以是其他類似php的，並且您將接受請求並將數據插入到數據庫中。您的React應用程序將對服務器進行ajax調用，並且服務器將數據發送到數據庫

如果要使用express來執行此操作，可以使用一條路線創建簡單的快速應用程序，以便從客戶端獲取數據，將發送到MongoDB。您不必使用Mongoose，您可以使用MongoDB驅動程序或外部數據將數據簡單地發送到MongoDB。

來源

2016-11-21 18:55:10

感謝您的答案。讓我看看你的意見。我想了解如何做到這一點，以及我發現的是這兩個鏈接https://www.youtube.com/watch?v=ZKwrOXl5TDI和https://www.fullstackreact.com/articles/using-create-反應應用內上帶有一個服務器/。他們是否是正確的方式來做到這一點。我真的想做YouTube視頻方法，但它看起來不兼容，整個堆棧反應鏈接表示我需要在另一個端口上託管另一臺服務器。這是通常完成的嗎？ –

YouTube視頻中的解釋我確切地告訴了你我想實現起來非常簡單（與服務器應用程序交談的客戶端應用程序與數據庫交談） –

謝謝@Ariel我將使用它作爲我的權威指南。 –

需要建議：如何正確連接React到MongoDB

回答

相關問題