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
npx create-react-app my-app cd my-app npm start
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>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
方法更新users
rrreee
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
.
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!