如何将 mongoDB 连接到 React webpack

Question

我有一个使用 React 和 Webpack 创建的 Web 应用程序来处理 babel 和 SASS。我在导航栏上设置了反应路由器，并且可以很好地导航。我刚刚添加了一个联系表单页面，我在其中使用 React 组件处理数据，我现在想将此数据发送到 mongoDB。过去，我制作了一个带有车把/猫鼬的快递应用程序，以便在 mongoDB 上抓取和保存数据。我的问题是……

如何在不弄乱 Webpack 开发服务器配置和我的 React 路由的情况下将 express 连接到我的 React 应用程序？我需要 express 连接到 mongoDB 吗？我只是想将我的联系表单数据发送到 mongoDB 并稍后检索。

下面为我的项目列出了我的 package.json 和 webpack.config.js 文件。

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/App.js'
  ],
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
       inline:true,
       contentBase: './public',
       port: 3333
     },
  module: {
    loaders: [{ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      },
        {
              test: /\.scss$/,
              loader: 'style!css!sass'
            }]
  }
};

package.json ....

{
  "name": "newaccount",
  "version": "1.0.0",
  "description": "a form submission for new accounts",
  "main": "App.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "---",
  "license": "ISC",
  "dependencies": {
    "express": "^4.14.0",
    "moongoose": "0.0.5",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-hot-loader": "^1.3.1",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "html-webpack-plugin": "^2.24.1",
    "node-sass": "^3.13.0",
    "sass": "^0.5.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

Answer 1

您可以将数据从您的 Web 应用程序发送到您的 Web 服务器（我假设它与您的 mongoDB 通信）的一种方法是通过 Web API 调用。展望未来，我将假设您已使用 express 在您的 Web 服务器上的路由 /api/data 下设置一个简单的 POST 请求。

假设您在实现中没有使用 Flux 或 Redux 之类的东西，您可以像这样向您的 Web API 调用 POST 请求：

var React = require('react');
var fetch = require('whatwg-fetch');

var MyComp = React.createClass({
    getInitialState: function() {
        return {
            dataToSend: { id: 0, data: ["foo", "bar"] },
            status: null,
            response: null
        };
    },

    handleSendData: function (e) {
        // Set status to 'posting...' and kick off the post
        this.setState({ status: 'Posting...' }, this.postData);
    },

    postData: function() {
        fetch('/api/data', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.state.dataToSend)
        }).then(function(response) {
            return response.json()
        }).then(function(json) {
            this.setState({ response: json, status: 'Done.' });
        }).catch(function(ex) {
            this.setState({ status: 'error!' });
            console.log('parsing failed', ex)
        });
    },

    render: function() {
        return (
            <div>
                <button onClick={this.handleSendData}>Send Data</button>
                <div>{this.state.status}</div>
                <div>{this.state.response}</div>
            </div>
    }
});

module.exports = MyComp;

在上面的代码中，我通过单击按钮调用请求，然后处理来自服务器的任何响应以更新组件的状态。该示例使用whatwg-fetch 模块提供的fetch 功能，但如果您愿意，可以使用其他功能，例如通过jQuery 调用AJAX。