我一直在花一些时间学习 React、MongoDB 和其他 JS Web 应用程序相关工具。对于我创建的一个小项目,我正在使用这个存储库来创建我的玩具应用程序 Create React App with no build .随着我在应用程序上的进步,事后我学到了很多与 React 相关的工具和 Material 。
我坚持的部分是我正在尝试将联系表单的数据提交到 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
最佳答案
您必须创建端点(服务器端),可以是 Node,也可以是 php 之类的其他东西,在那里您将接受请求并将数据插入到您的数据库中。您的 React 应用程序将对服务器进行 ajax 调用,服务器会将数据放入数据库
如果您想使用 express 执行此操作,您可以创建一个简单的 express 应用程序,该应用程序具有一个路由,该路由将从客户端获取数据并将其发送到 MongoDB。您不必使用 Mongoose,您可以使用 MongoDB 驱动程序或外部来简单地将数据发送到 MongoDB。
关于javascript - 需要建议 : How to properly connect React to MongoDB,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40725411/