Bagaimana untuk membina aplikasi pangkalan data yang boleh dipercayai dengan React dan MySQL

Cara membina aplikasi pangkalan data yang boleh dipercayai menggunakan React dan MySQL

Dalam era digital dan pintar hari ini, aplikasi pangkalan data telah menjadi komponen utama dalam pelbagai bidang. Membina aplikasi pangkalan data yang boleh dipercayai memerlukan pemilihan susunan teknologi yang sesuai dan bekerjasama secara berkesan antara bahagian hadapan dan belakang. Artikel ini akan memperkenalkan cara membina aplikasi pangkalan data yang boleh dipercayai menggunakan React dan MySQL, dan menyediakan beberapa contoh kod khusus.

1. Pemilihan Teknologi
Apabila membina aplikasi pangkalan data, adalah penting untuk memilih teknologi yang sesuai dengan keperluan pembangun dan projek. React ialah perpustakaan JavaScript popular yang digunakan secara meluas untuk membina antara muka pengguna. Pembahagian komponennya, DOM maya dan ciri lain membolehkan pembangun membina antara muka yang sangat interaktif dengan cepat. MySQL ialah sistem pengurusan pangkalan data hubungan matang dengan kestabilan dan kebolehpercayaan yang tinggi.

2. Penyediaan projek

1. Pasang React: Jalankan arahan berikut dalam direktori akar projek untuk memasang React:

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

2. Pasang MySQL: Bergantung pada sistem pengendalian, pemasangan MySQL akan berbeza-beza. Anda boleh memasang dan mengkonfigurasinya mengikut dokumentasi rasmi (https://dev.mysql.com/doc/).

3. Sambungan pangkalan data
Dalam projek React, kami boleh menggunakan perpustakaan pihak ketiga untuk menyambung ke pangkalan data MySQL. Pustaka yang biasa digunakan ialah mysql, yang boleh dipasang melalui arahan berikut: 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

Dalam direktori akar projek React, kita boleh mencipta db.js baharu fail untuk konfigurasi Sambungan pangkalan data:

rrreee
Dalam kod di atas, kami menggunakan kaedah createConnection untuk mencipta sambungan pangkalan data dan menilai status sambungan dalam fungsi panggil balik connect .

🎜4 Data pertanyaan🎜Dalam folder src projek React, kami boleh mencipta fail UserList.js baharu untuk memaparkan senarai pengguna: 🎜rrreee🎜Dalam kod di atas , kami menggunakan dua React Hooks useState dan useEffect untuk mengurus keadaan dan menghantar permintaan tak segerak. Dalam fungsi panggil balik useEffect, kami melaksanakan pertanyaan pangkalan data melalui kaedah query dan menetapkan keputusan pertanyaan kepada keadaan users. 🎜🎜5 Sisipkan data🎜Masih dalam fail UserList.js, kami boleh menambah fungsi baharu untuk mengendalikan operasi sisipan pengguna: 🎜rrreee🎜Dalam kod di atas, kami menggunakan prompt untuk memunculkan kotak gesaan yang meminta pengguna memasukkan nama. Kemudian, kami menggunakan pernyataan <code>INSERT INTO untuk memasukkan data pengguna ke dalam pangkalan data dan mengemas kini status users melalui kaedah setUsers. 🎜🎜6. Ringkasan🎜Dengan menggabungkan React dan MySQL, kami boleh membina aplikasi pangkalan data yang boleh dipercayai. Artikel ini memperkenalkan cara untuk menyediakan persekitaran, menyambung ke pangkalan data, data pertanyaan, memasukkan data dan operasi lain dan menyediakan contoh kod yang sepadan. Saya harap artikel ini dapat membantu pembaca menggunakan React dan MySQL dalam projek sebenar untuk membina aplikasi pangkalan data yang boleh dipercayai. 🎜

Atas ialah kandungan terperinci Bagaimana untuk membina aplikasi pangkalan data yang boleh dipercayai dengan React dan MySQL. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!