如何利用React和MySQL建構可靠的資料庫應用

如何利用React和MySQL建立可靠的資料庫應用

在當今數位化智慧化的時代，資料庫應用已經成為各個領域的關鍵組成部分。建構一個可靠的資料庫應用需要選擇合適的技術棧，對前後端進行有效地協作。本文將介紹如何利用React和MySQL建立一個可靠的資料庫應用，並提供一些具體的程式碼範例。

一、技術選擇
建置資料庫應用程式時，選擇適合開發者和專案需求的技術是至關重要的。 React是一個流行的JavaScript庫，被廣泛應用於建立使用者介面。它的組件化、虛擬DOM等特性使得開發者可以快速建構互動性強的介面。 MySQL是一個成熟的關聯式資料庫管理系統，具有高度穩定性和可靠性。

二、專案準備

1. 安裝React：在專案的根目錄下執行以下命令來安裝React：

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

2. 安裝MySQL ：根據作業系統的不同，安裝MySQL會有所差異。可以根據官方文件（https://dev.mysql.com/doc/）來進行安裝和配置。

三、資料庫連線
在React專案中，我們可以使用第三方函式庫來連接MySQL資料庫。一個常用的函式庫是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狀態。

六、總結
透過React和MySQL的結合，我們可以建構一個可靠的資料庫應用。本文介紹如何建置環境、連接資料庫、查詢資料、插入資料等操作，並提供了對應的程式碼範例。希望本文可以幫助讀者在實際專案中應用React和MySQL來建立可靠的資料庫應用。

以上是如何利用React和MySQL建構可靠的資料庫應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！