Express.js สำหรับทำ JSON API Backend

สวัสดีครับ ในวันนี้ผมจะมาแนะนำการใช้ Express.js Framework ในการทำ JSON API Backend Server เพื่อ Serve ข้อมูลจาก MySQL กัน เรียกได้ว่า บทความนี้ครบจบตั้งแต่เชื่อมต่อฐานข้อมูล MySQL ไปจนถึงการ Routing และ Serve ข้อมูล เพื่อนๆ สามารถนำความรู้ที่ได้จากบทความนี้ ไปประยุกต์ใช้ในการทำ RESTful API ได้อีกที

ติดตั้ง Express.js

Express.js เป็น Framework ที่ต้องอาศัย Node.js ดังนั้น จึงจะดาวน์โหลดและติดตั้ง โดยใช้ Node Packet Manager (NPM)

ก่อนแรกเราจะทำการ init npm ลงไปใน Folder ที่เราทำงานอยู่ โดยใช้คำสั่ง

npm init

เมื่อ Init เสร็จ เราจึงจะสามารถ ติดตั้ง packets ต่างๆ รวมถึง express และ mysql ลงไปได้ โดยจะติดตั้งโดยใช้คำสั่ง

npm i express mysql2 cors

Module "cors" ก็คือ Cross-origin resource sharing เป็นตัวควบคุมการเช่นทรัพยากร เช่น อนุญาติให้ต้นทางบางโดเมนสามารถใช้ API ได้ เป็นต้น

การ Routing และการ Serve ข้อมูล

app.get('/api/getPersons') คือการ Routing สำหรับเวลาลูกข่ายส่งคำขอแบบ GET มาที่ /api/getPersons โดยจะมี callback สองตัวได้แก่ req และ res ซึ่งความหมายของสองตัวนี้ แบบเข้าใจง่ายๆ คือ Req จะเก็บข้อมูลคำขอทั้งหมด ส่วน Res เป็นตัวแปรที่ใช้สำหรับตอบกลับไปยังลูกข่าย ใน code ข้างล่างนี้ ผมใช้ res.json หมายถึง ให้ตอบกลับเป็นแบบ JSON เป็นต้น

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())

const port = 3000

app.get('/api/getPersons', (req, res) => {
    res.json([
        {
            name: "James",
            age: 27
        }
    ])
})

app.listen(port, () => {
    console.log(`Backend start at port: ${port}.`)
})

ทีนี้เราจะมาดึงข้อมูลจาก MySQL กัน ก่อนแรกให้ import mysql เข้ามาก่อน และตั้งค่า mysql.createPool ให้เรียบร้อย จากนั้นเราจะใช้ตัวแปร db ในการอ้างอิงไปหาฐานข้อมูล MySQL

ผมได้สร้างตาราง persons ไว้ในฐานข้อมูล test เราจะใช้ฟังก์ชั่น db.query("SELECT * FROM persons") เพื่อดึงข้อมูลจากในตาราง persons ออกมา โดยจะมี callback สองตัว นั่นก็คือ err ซึ่งเก็บ Error (ข้อผิดพลาด) ของการติดต่อกับ MySQL (ถ้ามี) และ persons คือตัวแปรที่เก็บข้อมูลจากฐานข้อมูลเอาไว้ และส่งกลับไปยังลูกข่ายด้วย ฟังก์ชั่น res.json(persons) อีกทีหนึ่ง

const express = require('express')
const app = express()
const cors = require('cors')
const mysql = require('mysql2')

app.use(cors())

const port = 3000

var db = mysql.createPool({
    connectionLimit: 10,
    host: "localhost",
    user: "root",
    password: "",
    database: "test"
})

db.getConnection((err, connection) => {
    if (err) throw err;
    if (connection) connection.release()
    return
})

app.get('/api/getPersons', (req, res) => {
    db.query("SELECT * FROM persons", (err, persons) => {
        if(err) throw err;
        res.json(persons)
    })
})

app.listen(port, () => {
    console.log(`Backend start at port: ${port}.`)
})

นอกจาก Method GET แล้ว เรายังสามารถใช้ Method อื่นๆ อย่าง POST, PUT และ DELETE ได้ แต่หลักๆ เพียงแค่ GET และ POST ก็สามารถทำงานได้แล้ว

ทีนี้เราจะสร้าง Routing ที่รับคำขอจาก Method แบบ POST บ้าง โค้ดด้านล่างนี้ก็จะเป็นการที่เรารับคำขอแบบ POST ซึ่งต้องอาศัย Module ที่ชื่อ "body-parser" ในการเข้าถึงตัวแปรต่างๆ ใน Body

npm i body-parser

โดยผมจะใช้ประโยชน์ในการสร้างจุดสำหรับเพิ่มข้อมูลลงไปในฐานข้อมูล

const express = require('express')
const app = express()
const cors = require('cors')
const mysql = require('mysql2')
const bodyParser = require('body-parser')

app.use(cors())
app.use(bodyParser.json())

const port = 3000

var db = mysql.createPool({
    connectionLimit: 10,
    host: "localhost",
    user: "root",
    password: "",
    database: "test"
})

db.getConnection((err, connection) => {
    if (err) throw err;
    if (connection) connection.release()
    return
})

app.get('/api/getPersons', (req, res) => {
    db.query("SELECT * FROM persons", (err,persons) => {
        if(err) throw err;
        res.json(persons)
    })
})

app.post('/api/addPerson', (req, res) => {
    let name = req.body.name
    let age = req.body.age
    db.query("INSERT INTO persons(name,age) VALUES(?,?)", [name,age], (err) => {
        if(err) throw err;
        res.json("Data has been added to database!")
    })
})

app.listen(port, () => {
    console.log(`Backend start at port: ${port}.`)
})

เมื่อเราส่งข้อมูล JSON ด้านล่างนี้ ไปที่ /api/addPerson ข้อมูลก็จะถูกเพิ่มเข้าไปในฐานข้อมูล

{
    "name": "James",
    "age": 15
}

เพียงเท่านี้ Express.js Backend server ของเราก็สามารถดึงข้อมูลจาก MySQL แล้ว Serve เป็น JSON ให้กับลูกข่ายได้แล้ว ง่ายมาก!

อ้างอิง:
expressjs.com