文 / 西打藍 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。而現在終於成功了，這種開心真的難以言語，希望大家都能成功哦，有任何疑問歡迎跟我說。
閱讀量次
聯絡與合作
訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com