6
votes

Comment connecter la base de données MySQL à l'application ReactJS?

J'ai créé une application Todo avec create-react-app. Le magasin que j'utilise est basé sur le stockage local (attribut JS de la fenêtre d'objet). Maintenant, j'ai créé une base de données MySQL et je veux me connecter à cette base de données, de sorte que l'état affichera les valeurs de la base de données et sera mis à jour via des actions.

J'ai essayé de me connecter à db et de générer des valeurs via la console 'node' en utilisant db.js. Cela fonctionne.

const mysql = require('mysql');

const con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "root",
  database: 'root'
});

con.connect(function(err) {
  if (err) throw err;
  con.query("SELECT * FROM tasks", function (err, result, fields) {
    if (err) throw err;
    console.log(result);
  });
});

Est-il possible de connecter l'état de l'application à la base de données en utilisant ce script?


2 commentaires

Ne jamais demander à votre application Web de se connecter à la base de données en tant que root. Root peut faire tout ce qu'il veut, donc si votre application présente des vulnérabilités, cela laisse simplement votre base de données un livre ouvert aux pirates. Créez plutôt un compte utilisateur distinct spécifiquement pour cette application qui ne dispose que des autorisations dont elle a réellement besoin pour fonctionner correctement. N'utilisez même pas le compte root comme raccourci pendant le développement ou les tests, car vous devez également tester les autorisations de votre compte - sinon, lorsque vous serez en ligne, vous pourriez avoir des erreurs inattendues liées à la configuration du compte utilisateur.


"Est-il possible de connecter l'état de l'application" ... vous devrez expliquer plus en détail ce que vous entendez par là et quelle est votre préoccupation. Fondamentalement, vous pouvez écrire toutes les données que vous souhaitez dans la base de données, et également lire toutes les données que vous souhaitez. Les données peuvent représenter n'importe quel type d'état ou toute autre information que vous souhaitez. C'est à vous. NodeJS est l'étape intermédiaire entre votre front-end React et le serveur de base de données - il reçoit les requêtes du front-end, interroge la base de données et renvoie le résultat. C'est une configuration très standard pour une application Web.


3 Réponses :


10
votes

Vous ne pouvez pas les connecter directement.

JavaScript s'exécutant dans un navigateur Web ne peut pas parler le protocole MySQL (ni établir des connexions réseau brutes qui seraient nécessaires pour écrire une implémentation dans JS).

À la place, créez un service Web (dans le langage de programmation de votre choix, qui pourrait être JavaScript fonctionnant sur Node.js (par exemple le code que vous avez déjà + Express.js + un peu de colle) et utilisez Ajax pour communiquer avec lui.


0 commentaires

10
votes

La solution générale pour une question comme celle-ci est le cadre suivant:

  • Back-end (Node.js, Express, connexion à la base de données avec autorisation)
  • Front-end (React (, Redux pour gérer l'état))

Si vous lancez ensuite l'application React, elle doit renseigner son état en fonction des données extraites de la base de données, processus auquel vous pouvez ajouter une autorisation (faire en sorte que les données récupérables dépendent du rôle / statut de l'utilisateur).

Dans le back-end, vous pouvez définir des fonctions qui prennent en compte un certain sous-ensemble de paramètres, qui effectue des actions de base de données, auxquelles vous pouvez ajouter des règles métier pour votre application. L'application React envoie ensuite simplement des requêtes HTTP au serveur Express, qui gère tout ce qui nécessite une vérification et une autorisation avant même de toucher les données.

Si vous recherchez sur Internet une configuration d'architecture fullstack utilisant React et MySQL, vous trouverez des résultats similaires à ceux que j'ai mentionnés.


0 commentaires

2
votes

0 commentaires