So erstellen Sie zuverlässige Datenbankanwendungen mit React und MySQL

So erstellen Sie zuverlässige Datenbankanwendungen mit React und MySQL

Im heutigen digitalen und intelligenten Zeitalter sind Datenbankanwendungen zu einer Schlüsselkomponente in verschiedenen Bereichen geworden. Der Aufbau einer zuverlässigen Datenbankanwendung erfordert die Auswahl eines geeigneten Technologie-Stacks und eine effektive Zusammenarbeit zwischen Front- und Back-End. In diesem Artikel wird erläutert, wie Sie mit React und MySQL eine zuverlässige Datenbankanwendung erstellen, und es werden einige spezifische Codebeispiele bereitgestellt.

1. Technologieauswahl
Beim Erstellen einer Datenbankanwendung ist es entscheidend, eine Technologie auszuwählen, die den Anforderungen von Entwicklern und Projekten entspricht. React ist eine beliebte JavaScript-Bibliothek, die häufig zum Erstellen von Benutzeroberflächen verwendet wird. Seine Komponentisierung, das virtuelle DOM und andere Funktionen ermöglichen es Entwicklern, schnell hochgradig interaktive Schnittstellen zu erstellen. MySQL ist ein ausgereiftes relationales Datenbankverwaltungssystem mit hoher Stabilität und Zuverlässigkeit.

2. Projektvorbereitung

1. React installieren: Führen Sie den folgenden Befehl im Stammverzeichnis des Projekts aus, um React zu installieren:

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

2. MySQL installieren: Je nach Betriebssystem variiert die Installation von MySQL. Sie können es gemäß der offiziellen Dokumentation (https://dev.mysql.com/doc/) installieren und konfigurieren.

3. Datenbankverbindung
Im React-Projekt können wir Bibliotheken von Drittanbietern verwenden, um eine Verbindung zur MySQL-Datenbank herzustellen. Eine häufig verwendete Bibliothek ist mysql, die über den folgenden Befehl installiert werden kann: 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

Im Stammverzeichnis des React-Projekts können wir eine neue db.js erstellen Datei für die Datenbankverbindungskonfiguration:

rrreee
Im obigen Code verwenden wir die Methode createConnection, um eine Datenbankverbindung zu erstellen und beurteilen den Verbindungsstatus in der Rückruffunktion connect .

🎜4. Daten abfragen🎜Im Ordner src des React-Projekts können wir eine neue Datei UserList.js erstellen, um die Benutzerliste anzuzeigen: 🎜rrreee🎜Im Im obigen Code haben wir zwei React Hooks useState und useEffect verwendet, um den Status zu verwalten und asynchrone Anfragen zu senden. In der Rückruffunktion von useEffect führen wir die Datenbankabfrage über die Methode query aus und setzen die Abfrageergebnisse auf den Status users. 🎜🎜5. Daten einfügen🎜Noch in der Datei UserList.js können wir eine Funktion hinzufügen, um den Einfügevorgang des Benutzers zu verarbeiten: 🎜rrreee🎜Im obigen Code verwenden wir prompt code>-Methode, um ein Eingabeaufforderungsfeld anzuzeigen, in dem der Benutzer aufgefordert wird, einen Namen einzugeben. Anschließend verwenden wir die Anweisung <code>INSERT INTO, um Benutzerdaten in die Datenbank einzufügen und den Status von users über die Methode setUsers zu aktualisieren. 🎜🎜6. Zusammenfassung🎜Durch die Kombination von React und MySQL können wir eine zuverlässige Datenbankanwendung erstellen. In diesem Artikel wird erläutert, wie Sie die Umgebung einrichten, eine Verbindung zur Datenbank herstellen, Daten abfragen, Daten einfügen und andere Vorgänge ausführen und entsprechende Codebeispiele bereitstellen. Ich hoffe, dass dieser Artikel den Lesern helfen kann, React und MySQL in tatsächlichen Projekten anzuwenden, um zuverlässige Datenbankanwendungen zu erstellen. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie zuverlässige Datenbankanwendungen mit React und MySQL. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!