React ノード MySql

このレッスンでは、フロントエンドとノード Js サーバーで React を使用して、MySql データベース (phpmyadmin、MySql Workbench など) からデータを追加、読み取り、削除する方法を学びます.

このプロジェクトでは、Axios、Express、CORS、mysql パッケージ、プリペアド ステートメントなどの使用方法も学習します.

クライアント

Axios を使用して、ポート 9000 で実行されているサーバーにリクエストを送信しています.

作成

Axios.post('http://localhost:9000/create_user', 
{
    username : username,
    password: encodedPassword
}).then(()=>{
    console.log("request Send!")
})

Axios.post(endpoint, data_object).then((err, success)=>{})

読む

Axios.get('http://localhost:9000/get_all_users')
.then((response)=>{
   setUsers(response.data)
})

Axios.get(エンドポイント).then(応答=>{})

削除

Axios.delete(`http://localhost:9000/delete_user/${id}`)
.then(()=>{
   console.log("User Deleted")
})

Axios.delete(endpoint+param).then((err, success)=>{})

サーバー

// Import Express
const express =  require('express')

/* 
Cross-origin resource sharing - 
Cross-origin resource sharing is a mechanism that allows
restricted resources on a web page to be requested from
another domain outside the domain from which the first
resource was served.
*/
const cors = require('cors')

// Create express application
const app = express()

// Use CORS
app.use(cors())

// Recognise the incoming Request Object as a JSON Object
app.use(express.json())

// Import MySql
const mysql = require('mysql')

// Connect to MySql database
const db = mysql.createConnection({
    user: "root",
    host: "localhost",
    password: "",
    database: "react-mysql"
})

// Fire app at port 9000
app.listen(9000, ()=>{
    console.log("Server Started. Jai Shree Ram!")
    db.connect(function(err) {
        if (err) throw err;
        console.log("Connected!");
    });
})

// Insert into database
app.post('/create_user', (req,res)=>{
    const username = req.body.username
    const password = req.body.password

    db.query("INSERT INTO users (username, password) VALUES (?, ?)", [username, password], (err, result)=>{
        if(err){
            console.log(err);
        }else{
            console.log("value inserted!");
        }
    })
})

// Get from database
app.get('/get_all_users',(req,res)=>{
    db.query("SELECT * FROM users", (err,result)=>{
        if(err){
            console.log(err)
        }else{
            res.send(result)
        }
    })
})

// Delete from database
app.delete("/delete_user/:id",(req,res)=>{
    const id = req.params.id

    db.query("DELETE FROM users WHERE id = ?", id, (err,result)=>{
        if(err){
            console.log(err)
        }else{
            console.log("deleted")
        }
    })
})

1.入れる
db.query("INSERT INTO table_name (col1, col2, col3, ...) VALUES (?, ?, ?, ...)", [val1, val2, val3, ...], (err, result)=>{})
注 - 値は直接渡されませんが、SQL インジェクションを防ぐために配列で個別に送信されます.

2.得る
db.query("SELECT * FROM table_name", (err,result)=>{})
3.消去
db.query("DELETE FROM table_name WHERE id = ?", id, (err,result)=>{})
注 - 値を 1 つ渡す必要がある場合は、配列の代わりに準備済みステートメントに直接送信できます.

GitHub リンク - https://github.com/yashkumat/React-Node-MySql