Question

我已经玩React好几天了，虽然我喜欢它的前端方面，但是我有相当长的时间让mongodb后端工作，我仍然无法将我的表单数据发布到mongodb上。我已经阅读了很多教程，我需要一些帮助，为什么我不能只是将请求发送到mongo。

以下是我试图遵循的教程：

我之前（两次）How to post data to mongodb from a contact form

发布了我的问题

我没有得到答案，但以下评论对我有所帮助。这是评论。

而不是使用form方法，使用ajax，比如fetch，并向你的快速路由发送POST请求

围绕答案的普遍共识，以及我之前提出的问题的评论指引我走向youtube视频教程。这就是我一直在尝试做的事情，但由于一些错误，我无法让它工作。（我将在下面列出）。这些教程也没有太多帮助，因为它们实现起来太不同了。

关于实际代码，这是我的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) {

     #########PROBLEM#########
     .....how am I suppose to use .fetch to an express route
           and post to mongo here?...................
     ##########################
  }

  handleTouchTap = () => {
    this.setState({ open: true });
  }

  handleRequestClose = () => {
    this.setState({ open: false });
  }

  render() {
    return(
      <div>
        <Paper className="Form" zDepth={2}>
          <Formsy.Form onSubmit={this.handleSubmit} >
            <FormsyText
              required
              name="name"
              floatingLabelText="Enter your name"
            />
            <FormsyText required name="email"
              floatingLabelText="Enter your email address"
            />
            <FormsyText
              required
              name="message"
              floatingLabelText="What can I do for you?"
            />
            <RaisedButton onTouchTap={this.handleTouchTap}
               type="submit"
               label="Submit your message"
               primary={true}
            />
            <Snackbar
              open={this.state.open}
              message="Thank your for submitting your message. I'll get back to you as soon as I can!"
              autoHideDuration={2000}
              onRequestClose={this.handleRequestClose}
            />
          </Formsy.Form>
        </Paper>
      </div>
    );

这是我的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": 'Daniel Rubio',
      "message": 'message for you',
      "email": 'abcd@gmail.com'
    }, function(err, result) {
    assert.equal(err, null);
    console.log("Inserted a document into the contact submissions collection.");
    callback();
  });
};

MongoClient.connect(url, function(err, db) {
  assert.equal(null, err);
  insertDocument(db, function() {
    db.close();
  });
});

我的问题是我如何让我的mongo.js文件与我的contact.js文件对话？

在mongo.js我放在文件的顶部：

var express = require('express')
var app = express()

......code......

export { app };

然后在contact.js导入app以使用fetch ajax方法时，我在服务器启动时遇到此错误：

Error in ./~/require_optional/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/require_optional
 @ ./~/require_optional/index.js 2:7-20

Error in ./~/send/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/send
 @ ./~/send/index.js 24:9-22

Error in ./~/resolve-from/index.js
Module not found: Error: Cannot resolve module 'module' in /Users/drubio/Desktop/react_personal_website/node_modules/resolve-from
 @ ./~/resolve-from/index.js 3:13-30

Error in ./~/mime/mime.js
Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/mime
 @ ./~/mime/mime.js 2:9-22

Error in ./~/destroy/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/destroy
 @ ./~/destroy/index.js 14:17-30

如果我无法将快速路由导入我的contact.js文件，我该如何向mongo发送帖子请求？我真的不想再从头开始，如果我能得到一个具体的例子或资源到github repo实现这一点我会非常感激。到目前为止我尝试的所有东西都不起作用。

如果我不应该这样做并发出$.ajax请求，那么如何在$.ajax调用中指定参数以插入我的mongo数据库？

为什么我无法将数据发布到mongodb？

0 个答案: