web-dev-qa-db-ja.com

React.js Webアプリケーションのデータベースにデータを送信する

私はWebアプリケーションを作成していますが、その中のMySQLデータベースにデータを送信する方法に興味があります。ユーザーがボタンを押したときに呼び出される関数があります。この関数が何らかの方法でMySQLサーバーにデータを送信するようにします。誰もこの問題に対処する方法を知っていますか？ npm MySQLモジュールを試しましたが、クライアント側であるため接続が機能しないようです。他の方法はありますか？始めるにはアイデアが必要です。

よろしく

javascriptmysqlauthenticationreactjs
10
Jakub Pro

Reactアプリからのリクエストを処理し、それに応じてデータベースを更新するサーバーが必要になります。1つの方法は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!');
});

次に、canReactコンポーネント内で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>
    );
  }
}

これは、これを達成するための無限の方法の1つにすぎないことに注意してください。

20
Fabian Schultz

それはあなたのアプリケーションがどのように編成されているかによりますが、あなたはReactアプリケーションコードを提供するサーバーを持っていると推測します。 ）設定に基づいてモジュールを使用する：

クライアントからデータベースへのすべての作業を行うモジュール/プラグインを探している場合、通常はプロキシ（サーバーをリダイレクトするだけでなく、リクエストをフォーマットまたはブロックすることをお勧めします）クライアントとデータベース）。

次に、サーバーで、MySQLデータベースで使用できるように必要な情報（ある場合）をフォーマットし、選択したモジュールでMySQLデータベースに連絡すると、最初の最も人気のあるモジュールは次のようになります： https://www.npmjs.com/package/mysql が、別のものを知っているか、他の設定が続いている場合。 （たとえば、MongoDBを使用すると、Mongooseを使用してリクエストを簡単にできます）

1
mgouault