August 9, 2019

nodejs 連接 MySQL 開 API | 使用 workbench 介面

以 express 為例


文 / Siddharam 西打藍

前言


我們這次要來開 API 給自己用,要完成這點,需要許多知識的融合,包含 SQL、後端語言以及 API 設計等,這項工作不簡單。

如果不熟悉 MySQL Workbench 如何開 schema 的話,可以先參考 這篇 來建立 table。

這次會以 nodejs 作為範例,並使用較好入門的 express 來開發 API,本文的目錄如下:

1. 透過 worknench 建立 table

2. 用 express 啟動 server 連結 MySQL

3. 撰寫 GET POST PUT DELETE 四種基本 API


透過 worknench 建立 table


首先,可以用下列 SQL 指令來建立一個產品列表的 table:


CREATE TABLE product_list (
  product_no varchar(10) NOT NULL,
  product_name varchar(100) DEFAULT NULL,
  create_date date DEFAULT NULL,
  PRIMARY KEY (product_no)
) 

INSERT INTO product_list VALUES 
    ('A01','大芭樂','2019-07-08'),('A02','蛋黃','2019-08-07'),('A03','糖果','2019-08-06'),
    ('A04','肉乾','2019-08-07'),('A05','水果','2019-08-08'),('A06','蛋糕','2019-08-08'),
    ('A07','西瓜','2019-08-08');


完成後,就能看見如下的 table。

新增 table。



用 express 啟動 server 連結 MySQL


我們需要安裝 express、MySQL、body-parser 三個套件:

npm install mysql --save
npm install express --save
npm install body-parser --save

接著,我們來啟動 server,監聽在 8080 端口。我們全部的程式碼都放在同一個 js 底下:


// server.js

var mysql = require('mysql');
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
 
//將request進來的 data 轉成 json()
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));

// 監聽於 8080 端口
app.listen(8080, function () {
    console.log('Node app is running on port 8080');
});



此時,可以運行 node server 來啟動 server,如果懶的每次修改都要重啟的話,可以 npm install nodemon --save,然後到 package.json 進行修改:


  "scripts": {
    "serve": "nodemon server.js"
  }



然後下 nodemon,之後修改程式都不需要重啟了。

再來,我們需要回到 workbench 執行一行 SQL,來建立新使用者以符合最新版本 MySQL 的規定:


// 請將 username 以及 password 換成自己的
GRANT ALL PRIVILEGES ON *.* TO 'username'@'localhost' IDENTIFIED BY 'password';



接著來連線到本地的 MySQL:(workbench 要先確認連線哦,可以參考上一篇做法)


// server.js

// db

// host、user、password 請更換成自己的
var mc = mysql.createConnection({
    host: "localhost",
    user: "username",
    password: "password",
    insecureAuth : true
});

mc.connect();



撰寫 GET POST PUT DELETE 四種基本 API


有接過 API 的前端工程師就知道,GET 代表的是讀;POST 是新增;PUT 是修改;DELETE 則是刪除。接下來,我們就來寫出這幾支 API 吧:


// server.js

// 讀取

app.get('/show', function (req, res) {
    // 是為了修復 CORS 的問題而設
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

    mc.query('SELECT * FROM 0805_schema.product_list', function (error, results, fields) {
        if (error) throw error;
        return res.send({ error: false, data: results, message: 'products list.' });
    });
});



// 新增

app.post('/add', function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

    var addtData = req.body
    console.log(req.body)


    //  ? 會讀取後面的 addData
    mc.query('INSERT INTO 0805_schema.product_list SET ?', addData, function (error, results, fields) {
        if (error) throw error;
        return res.send({ error: false, data: results, message: 'products insert.' });
    });
});



// 修改

app.put('/update', function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

    var updateData = req.body
    var updateId = req.body.product_no
    console.log(req.body)


    // ? ? 會讀取陣列裡的值
    mc.query('UPDATE 0805_schema.product_list SET ? WHERE product_no = ?', [updateData, updateId], function (error, results, fields) {
        if (error) throw error;
        return res.send({ error: false, data: results, message: 'products update.' });
    });
});



//刪除

app.delete('/remove', function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    
    var deleteId = req.body.product_no
    console.log(req.body.product_no)

    mc.query('DELETE FROM 0805_schema.product_list WHERE product_no = ?', deleteId, function (error, results, fields) {
        if (error) throw error;
        return res.send({ error: false, data: results, message: 'products delete.' });
    });
});



完成後,可以下載並打開 Postman,去測試以下完成的 API,除了 GET 以外,其他記得要帶入值:


http://localhost:8080/show //不用帶入


http://localhost:8080/add //帶入下列 json

{
    "product_no": "A09",
    "product_name": "開心果",
    "create_date": "2019-08-09"
}


http://localhost:8080/update //帶入下列 json

{
    "product_no": "A01",
    "product_name": "香腸",
    "create_date": "2019-07-08"
}


http://localhost:8080/remove //帶入下列 json

{
    "product_no": "A02"
}



終於完成了!以前在學前端時,總想自己開 API 給自己,而當時只會用 firebase 的 realtime database。而現在終於成功了,這種開心真的難以言語,希望大家都能成功哦,有任何疑問歡迎跟我說。



技術文章與合作


有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:群組

Line 群組 QR Code:

Line 官方帳號:@184railx

Line 官方帳號 QR Code:



閱讀量