Question

我想知道是否可以直接从React组件将文档插入MongoDB集合。

我目前的个人项目（用于培训目的）是一个小聊天网络应用程序。例如，当我的用户想要在房间中发布新消息时，输入组件应如下所示：

var NewMessageInput = React.createClass({
  postMessage: function(value) {
    db.collection.insert({
      content: value
    });
  },
  render: function() {
    return (
      <div>
        <input onSubmit={() => this.postMessage(value)}>Type your message here</input>
      </div>
    );
  }
});

我知道如何使用Express，React和MongoDB运行应用程序，但我只能使用mongo shell插入文档并在路由加载时查询它们。另外，我想仅使用react-router作为我的路线，这就是我有这个问题的原因。

Answer 1

我猜你需要服务器上的数据库，所以你可能需要一个API来发布数据，因为数据库本身不在客户端上。我使用Superagent发送数据，使用Mongoose创建模式和mongo数据库。

<强> messageModel.js

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

// create a schema
const messageSchema = new Schema({
  // You may need to add other fields like owner
  addedOn: String,
  message: String,
});
const Message = mongoose.model('Message', messageSchema);
module.exports = Message;

<强> server.js

import Message from './models/messageModel';

mongoose.connect('mongodb://user:pass@localhost:port/database');

app.post('/api/messages', (req, res) => {
  const doc = new Message({ message: req.body.message })
  doc.save();
});

<强> client.js

import React, { Component } from 'react';
import request from 'superagent';

class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: '',
    };
    this.handleMessageInput = this.handleMessageInput.bind(this);
  }
  handleMessageInput(e) {
    this.setState({ message: e.target.value });
  }
  handleSubmitMessage() {
    console.log('starting to submit profile');
    if (this.state.isFormFilledProfile) {
      console.log('Profile Form appears filled');
      const data = {
        message: this.state.message,
      };

      request
        .post('/api/messages')
        .send(data)
        .set('Accept', 'application/json')
        .end((err, res) => {
          if (err || !res.ok) {
            console.log('Oh no! err');
          } else {
            console.log('Success');
          }
        });
    }
  }
  render() {
    return (
      <div>
        <div>
          <form onSubmit={this.handleSubmitMessage}>
            <input
              onChange={this.handleMessageInput}
              value={this.state.message}
            />
            <button type='Submit' value='Submit'>Submit</button>
          </form>
        </div>
      </div>
    );
  }
}

export default componentName;

您可能还需要查看反应表单指南here. 一切顺利!!!

Answer 2

好的，因为React是一个前端框架，您将无法访问后端的内容，例如db.collection.insert()等方法。您将在其中分离前端代码和后端代码。他们将通过HTTP请求（GET，POST，PUT，DELETE）相互通信。

旁注只是为了澄清。你仍然需要快速路由和反应路由器。他们做不同类型的“路由”。 Express将主要处理您的API的路由，以及您的前端将对其进行的所有数据调用。 React-router处理前端的页面更改，就在bowser内部。这样可以防止每次用户四处移动时重新加载页面。

所以让我们进入一些代码。

在您的后端，您需要一个快速端点供您的应用与之交谈。在这个例子中，我将展示使用包mongoose，因为它是一个常用于node.js后端的工具。

https://www.npmjs.com/package/mongoose

var mongoose = require('mongoose');
var Message = require('../models/message');

app.post('/message', (req, res) => {
  var newMessage = new Message(req.body);
  newMessage.save((err, doc) => {
    if (err) {
      res.send(err);
    } else {
      res.send(doc);
    }
  });
});

此代码将在URL“/ message”处理发布请求。它将继续从请求（req）主体中的数据创建新消息。然后将其保存到数据库中。保存成功后，它将发回刚刚保存的文档。

在mongoose中，我们为每个数据模型创建一个模式，如：

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var MessageSchema = new Schema({
  content: {
    type: String,
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
});

var Message = mongoose.model('Message', MessageSchema);

module.exports = Message;

现在在前端/ React方面，我们需要将消息数据发送到后端进行保存。我们可以像axios这样的软件包使用来自浏览器的基于HTTP的干净请求。

https://www.npmjs.com/package/axios

var NewMessageInput = React.createClass({
  postMessage: function(value) {
    axios.post('/message', {
      content: value
    })
    .then(function (message) {
      console.log(message);
    })
  },
  render: function() {
    return (
      <div>
        <input onSubmit={() => this.postMessage(value)}>Type your message here</input>
      </div>
    );
  }
});

那应该这样做！

对于后端示例，请查看我已设置的此repo。这是非常基本的，但是将作为猫鼬后端的一个很好的例子供参考。

https://github.com/Alexg2195/simple-dev-example

这里有一些我为React教学创建的一些内容，可能是一个很好的参考。

https://github.com/Alexg2195/UT-ReactJS

使用React.js插入MongoDB文档

2 个答案: