web-dev-qa-db-fra.com

Envoi de données à la base de données dans l'application Web React.js

Je crée une application Web et je suis curieux de savoir comment envoyer des données à la base de données MySQL. J'ai une fonction qui est invoquée lorsque l'utilisateur appuie sur le bouton, je veux que cette fonction envoie en quelque sorte des données au serveur MySQL. Quelqu'un sait-il comment aborder ce problème? J'ai essayé le module npm MySQL mais il semble que la connexion ne fonctionne pas car elle est côté client. Y a-t-il une autre façon de procéder? J'ai besoin d'une idée pour me lancer.

Cordialement

javascriptmysqlauthenticationreactjs
10
Jakub Pro

Vous aurez besoin d'un serveur qui gère les demandes de votre React application et met à jour la base de données en conséquence. Une façon serait de utilisez NodeJS, Express et node-mysql comme serveur:

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!');
});

Ensuite, vous pouvez utiliser fetch dans un composant React pour faire un POST demande au serveur, un peu comme ceci:

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>
    );
  }
}

Gardez à l'esprit que ce n'est qu'une des façons infinies d'y parvenir.

20
Fabian Schultz

Cela dépend de la façon dont votre application est organisée, je suppose que vous avez un serveur qui fournit votre React code d'application. Je vous conseille d'envoyer les informations nécessaires à votre serveur (s'il y en a) ) à l'aide d'un module basé sur vos préférences:

Si vous cherchez un module/plugin faisant tout le travail du client à la base de données je n'en connais pas et je n'en suis pas sûr car il est généralement conseillé d'utiliser un proxy (un serveur pour rediriger mais aussi pour formater ou bloquer les requêtes entre votre client et la base de données).

Ensuite, dans votre serveur, vous formatez les informations nécessaires (le cas échéant) pour être utilisables par votre base de données MySQL, puis contactez votre base de données MySQL avec le module de votre choix, le premier module le plus populaire semble être: https: //www.npmjs.com/package/mysql , mais si vous en connaissez un autre ou si vous avez d'autres préférences, continuez. (Par exemple, avec MongoDB, nous pouvons utiliser Mongoose pour faciliter les demandes)

1
mgouault