如何利用React和MySQL建立可靠的資料庫應用
在當今數位化智慧化的時代,資料庫應用已經成為各個領域的關鍵組成部分。建構一個可靠的資料庫應用需要選擇合適的技術棧,對前後端進行有效地協作。本文將介紹如何利用React和MySQL建立一個可靠的資料庫應用,並提供一些具體的程式碼範例。
一、技術選擇
建置資料庫應用程式時,選擇適合開發者和專案需求的技術是至關重要的。 React是一個流行的JavaScript庫,被廣泛應用於建立使用者介面。它的組件化、虛擬DOM等特性使得開發者可以快速建構互動性強的介面。 MySQL是一個成熟的關聯式資料庫管理系統,具有高度穩定性和可靠性。
二、專案準備
npx create-react-app my-app cd my-app npm start
三、資料庫連線
在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中文網其他相關文章!