Comment créer des applications de base de données fiables avec React et MySQL

Comment créer des applications de bases de données fiables à l'aide de React et MySQL

À l'ère numérique et intelligente d'aujourd'hui, les applications de bases de données sont devenues un élément clé dans divers domaines. Construire une application de base de données fiable nécessite de choisir une pile technologique appropriée et de collaborer efficacement entre le front-end et le back-end. Cet article expliquera comment créer une application de base de données fiable à l'aide de React et MySQL, et fournira quelques exemples de code spécifiques.

1. Sélection de la technologie
Lors de la création d'une application de base de données, il est crucial de choisir une technologie qui répond aux besoins des développeurs et des projets. React est une bibliothèque JavaScript populaire largement utilisée pour créer des interfaces utilisateur. Sa composition en composants, son DOM virtuel et d'autres fonctionnalités permettent aux développeurs de créer rapidement des interfaces hautement interactives. MySQL est un système de gestion de bases de données relationnelles mature avec une stabilité et une fiabilité élevées.

2. Préparation du projet

1. Installer React : Exécutez la commande suivante dans le répertoire racine du projet pour installer React :

npx create-react-app my-app
cd my-app
npm start

2. Installer MySQL : Selon le système d'exploitation, l'installation de MySQL variera. Vous pouvez l'installer et le configurer selon la documentation officielle (https://dev.mysql.com/doc/).

3. Connexion à la base de données
Dans le projet React, nous pouvons utiliser des bibliothèques tierces pour nous connecter à la base de données MySQL. Une bibliothèque couramment utilisée est mysql, qui peut être installée via la commande suivante : mysql，可以通过以下命令安装：

npm install mysql

在React项目的根目录下，我们可以新建一个db.js文件，用于数据库连接的配置：

const mysql = require('mysql');

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

connection.connect((err) => {
  if (err) {
    console.error('Error connecting to database: ', err);
  } else {
    console.log('Connected to database successfully');
  }
});

module.exports = connection;

上述代码中，我们使用了createConnection方法来创建数据库连接，并在connect回调函数中进行连接状态的判断。

四、查询数据
在React项目的src文件夹下，我们可以新建一个UserList.js文件用于展示用户列表：

import React, { useState, useEffect } from 'react';
import db from './db';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    db.query('SELECT * FROM users', (err, results) => {
      if (err) {
        console.error('Error executing query: ', err);
      } else {
        setUsers(results);
      }
    });
  }, []);

  return (
    <div>
      <h1 id="User-List">User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

上述代码中，我们使用了useState和useEffect两个React Hook来管理状态和发送异步请求。在useEffect的回调函数中，我们通过query方法执行数据库查询，并将查询结果设置到users状态中。

五、插入数据
还是在UserList.js文件中，我们可以新增一个函数来处理用户的插入操作：

function insertUser() {
  const name = prompt('Please enter a name');

  if (name) {
    db.query('INSERT INTO users (name) VALUES (?)', [name], (err, results) => {
      if (err) {
        console.error('Error executing query: ', err);
      } else {
        alert('User inserted successfully');
        setUsers([...users, { id: results.insertId, name }]);
      }
    });
  }
}

在上述代码中，我们使用了prompt方法来弹出一个提示框，要求用户输入一个名称。然后，我们使用INSERT INTO语句将用户数据插入到数据库中，并通过setUsers方法更新usersrrreee

Dans le répertoire racine du projet React, nous pouvons créer un nouveau db.js fichier pour la configuration de la connexion à la base de données :

rrreee
Dans le code ci-dessus, nous utilisons la méthode createConnection pour créer une connexion à la base de données et jugeons l'état de la connexion dans la fonction de rappel connect .

🎜4. Requête de données🎜Dans le dossier src du projet React, nous pouvons créer un nouveau fichier UserList.js pour afficher la liste des utilisateurs : 🎜rrreee🎜Dans le au-dessus du code, nous avons utilisé deux React Hooks useState et useEffect pour gérer l'état et envoyer des requêtes asynchrones. Dans la fonction de rappel de useEffect, nous exécutons la requête de base de données via la méthode query et définissons les résultats de la requête sur l'état users. 🎜🎜5. Insérer des données🎜Toujours dans le fichier UserList.js, nous pouvons ajouter une nouvelle fonction pour gérer l'opération d'insertion de l'utilisateur : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons prompt pour faire apparaître une boîte de dialogue demandant à l'utilisateur de saisir un nom. Ensuite, nous utilisons l'instruction <code>INSERT INTO pour insérer les données utilisateur dans la base de données et mettre à jour le statut des users via la méthode setUsers. 🎜🎜6. Résumé🎜En combinant React et MySQL, nous pouvons créer une application de base de données fiable. Cet article explique comment configurer l'environnement, se connecter à la base de données, interroger des données, insérer des données et d'autres opérations, et fournit des exemples de code correspondants. J'espère que cet article pourra aider les lecteurs à appliquer React et MySQL dans des projets réels pour créer des applications de base de données fiables. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!