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

我一直在花一些时间来学习React,MongoDB和其他与JS

Web应用程序相关的工具。对于我创建的一个小型项目,我正在使用此存储库来创建我的玩具应用程序Create no App no

build。在我开发应用程序的过程中,事后我学到了很多与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数据库并对其进行写入?我一直在阅读了很多教程,但然后我得到兔子躲在糊涂进一步谈到ExpressMongooseFlux和和。从高层次的概述来看,我似乎甚至不需要Express或Mongoose,我只是想插入没有模式的数据,并且说实话,我并没有真正了解Flux,但是从我的收集中我我的小型应用程序真的不需要它(我认为)。我可以在正确的方向上使用一点微调。谢谢。

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

回答:

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

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

以上是 需要的建议:如何正确地将React连接到MongoDB 的全部内容, 来源链接: utcz.com/qa/424959.html

回到顶部