React.jsでMongoDB文書を挿入

Question

Reactコンポーネントから直接MongoDBコレクションに文書を挿入する方法があるのだろうかと思っていました。

私の現在の個人的なプロジェクト（訓練目的のため）は少しチャットのWebアプリケーションです。

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で実行中のアプリを取得する方法を知って反応し、MongoDBの私：私のユーザーが部屋に新しいメッセージを投稿したい場合ので、例えば、入力コンポーネントは次のようになります。 mongoシェルでドキュメントを挿入し、ルートローディングでそれらを照会することしかできません。さらに、私のルートにはreact-routerだけを使用したいので、私はこの質問を持っています。

Answer 1

だから、リアクションはフロントエンドフレームワークなので、db.collection.insert()のようなバックエンドのものにアクセスすることはできません。第3世代では、フロントエンドコードとバックエンドコードの分離があります。彼らはHTTPリクエスト（GET、POST、PUT、DELETE）を介してお互いに話をします。

ちょうど明確にするためにサイドノート。あなたはまだルーティングと反応ルータのための明示が必要です。彼らは "ルーティング"の異なるタイプを行います。 Expressは、主にAPIのルーティング、フロントエンドが行うすべてのデータ呼び出しを処理します。 React-routerは、あなたのフロントエンドのページ変更を、Bowser内で処理します。これにより、ユーザーが移動するたびにページがリロードされなくなります。

だから少しのコードに入ることができます。

バックエンドでは、あなたのアプリが話すためにエクスプレスエンドポイントが必要です。この例では、node.jsバックエンドで一般的に使用されているツールであるため、mongooseパッケージでの使用方法を示します。

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 "/メッセージ" でPOSTリクエストを処理します。リクエスト（req）本文のデータから新しいメッセージを作成します。それをデータベースに保存します。保存が成功すると、保存されたばかりの文書が返送されます。マングースで

我々はそのようなのような私たちのデータモデルのそれぞれのスキーマを作成：フロントエンドに今

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; 

を/私たちは保存するためにバックエンドに私たちのメッセージデータを送信するために必要なものの方が反応します。 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> 
    ); 
    } 
}); 

そして、それはそれを行う必要があります！

バックエンドの例では、このレポをチェックアウトするためにセットアップしました。それは非常に基本的ですが、参考のためにマングースを使ったバックエンドの良い例になります。

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

はまた、ここで私は教育用に作成されたいくつかの側面のコンテンツのビットは、それは良いの参照かもしれリアクトです。

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

Answer 2

私はあなたがデータベース自体がクライアント上に存在しないので、データを投稿するAPIが必要な場合がありますので、あなたは、サーバー上のデータベースが必要になります推測しています。 データを送信するのにSuperagentを使用し、スキーマと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. すべての最高!!!