在 React.js Web 应用程序中将数据发送到数据库答案

【问题标题】：Sending data to Database in React.js web application在 React.js Web 应用程序中将数据发送到数据库
【发布时间】：2017-05-11 00:01:27
【问题描述】：

我正在创建一个 Web 应用程序，我很好奇如何将数据发送到其中的 MySQL 数据库。我有一个在用户按下按钮时调用的函数，我希望这个函数以某种方式将数据发送到 MySQL 服务器。有谁知道如何解决这个问题？我尝试了 npm MySQL 模块，但似乎连接不起作用，因为它是客户端。还有其他方法吗？我需要一个想法让我开始。

问候

【问题讨论】：

您需要向将处理 MySQL 查询的后端服务器发出请求
后端服务器使用了哪些技术来处理这个问题？
你有很多选择：例如，如果你也想使用 JS 作为后端，你可以使用 NodeJS + Sequelize
React 是一个 UI 库。您需要一种服务器端语言来处理对数据库的 HTTP 请求。

标签： javascript mysql authentication reactjs

【解决方案1】：

您将需要一个服务器来处理来自您的 React 应用程序的请求并相应地更新数据库。 一种方法是使用 NodeJS、Express 和 node-mysql 作为服务器：

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

// Set up connection to database.
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'me',
  password: 'secret',
  database: 'my_db',
});

// Connect to database.
// connection.connect();

// Listen to POST requests to /users.
app.post('/users', function(req, res) {
  // Get sent data.
  var user = req.body;
  // Do a MySQL query.
  var query = connection.query('INSERT INTO users SET ?', user, function(err, result) {
    // Neat!
  });
  res.end('Success');
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!');
});

然后您可以在 React 组件中使用 fetch 向服务器发出 POST 请求，有点像这样：

class Example extends React.Component {
  constructor() {
    super();
    this.state = { user: {} };
    this.onSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(e) {
    e.preventDefault();
    var self = this;
    // On submit of the form, send a POST request with the data to the server.
    fetch('/users', { 
        method: 'POST',
        data: {
          name: self.refs.name,
          job: self.refs.job
        }
      })
      .then(function(response) {
        return response.json()
      }).then(function(body) {
        console.log(body);
      });
  }
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" placeholder="Name" ref="name"/>
        <input type="text" placeholder="Job" ref="job"/>
        <input type="submit" />
      </form>
    );
  }
}

请记住，这只是实现这一目标的无限方法之一。

【讨论】：

【解决方案2】：

这取决于你的应用程序是如何组织的，我猜你有一个服务器来提供你的 React 应用程序代码。我建议您使用基于您的偏好的模块将必要的信息发送到您的服务器（如果有的话）：

fetch 内置 XHR api (https://developer.mozilla.org/en/docs/Web/API/Fetch_API)
request 基于回调的 npm 模块 (https://www.npmjs.com/package/request)
axios 基于 promise 的 npm 模块 (https://www.npmjs.com/package/axios)

如果您正在寻找一个模块/插件来完成从客户端到数据库的所有工作，我不知道并且不确定是否存在，因为通常建议使用代理（服务器重定向但也可以格式化或阻止客户端和数据库之间的请求）。

然后，在您的服务器中格式化必要的信息（如果有）以供 MySQL 数据库使用，然后使用您选择的模块联系您的 MySQL 数据库，第一个最受欢迎的模块似乎是： https://www.npmjs.com/package/mysql，但如果您知道另一个或有其他偏好，请继续。（例如对于 MongoDB，我们可以使用 Mongoose 来简化请求）

【讨论】：