tags: iThome 鐵人賽 30天

一個前端專案在資料呈現上少不了的當然就是API了，API能做甚麼呢？大致上就是取得、新增、修改、刪除資料庫內的資料啦！

當然我們的專案也不意外需要API來輔助我們資料的呈現與儲存，所以今天就來快速的帶過建置API的過程吧！

不過通常資料的儲存還會另外有資料庫來存放，然後再由API連結到資料庫去做資料的處理，但這次專案為了快速簡單讓大家都可以使用，不搞得太複雜，所以單純以JSON檔案的方式儲存在API的資料夾內，那接下來就繼續開始吧。

Express API

與前端一樣，先建立一個資料夾來放置專案

之後在資料架內VSCode，在CMD內下指令安裝express：

npm install express --save

之後在專案內建立index.js，並複製下列程式碼來執行最初版的express api：

const express = require('express')
const app = express()
const port = 5000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

為了可以在router內取得到body的資訊，所以在router前新增下列程式碼：

app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded

RESTful API

通常API每個Router都會加上/api來跟前端有所區分以免造成衝突，而RESTful API是什麼呢？

簡單來說，RESTful API是一個架構，而裡面定義了Method如何應用，GET是取得、POST是新增、PUT是修改、DELETE是刪除，下面舉簡單的範例：

再來就是以上面的範例來實作我們需要的API：

// 取得全部影片標記列表
app.get('/api/Notes', (req, res) => {
    const data = JSON.parse(fs.readFileSync('./json/video.json', 'utf8'))
    res.json(data)
})

// 新增影片
app.post('/api/Note', (req, res) => {
    const { v, title } = req.body
    let data = JSON.parse(fs.readFileSync('./json/video.json', 'utf8'))
    if (!(data.find(d => d.v === v))) {
        data[data.length] = { v, title }
    }
    fs.writeFile('./json/video.json', JSON.stringify(data), function (err) {
        if (err)
            console.log(err);
        else
            console.log('Write operation complete.');
    });
    res.json(data)
})

// 取得影片內的標記
app.get('/api/Note/:v', (req, res) => {
    const { v } = req.params

    const data = JSON.parse(fs.readFileSync('./json/mark.json', 'utf8'))
    res.json(data[v])
})

// 新增影片內的標記
app.post('/api/Note/:v', (req, res) => {
    const { v } = req.params
    const { sec, content } = req.body

    let data = JSON.parse(fs.readFileSync('./json/mark.json', 'utf8'))
    if (data[v]) {
        data[v][data[v].length] = { sec, content, bDel: false }
    }
    fs.writeFile('./json/mark.json', JSON.stringify(data), function (err) {
        if (err)
            console.log(err);
        else
            console.log('Write operation complete.');
    });
    res.json(data)
})

// 修改影片內的標記
app.put('/api/Note/:v', (req, res) => {
    const { v } = req.params
    const { id, sec, content } = req.body

    let data = JSON.parse(fs.readFileSync('./json/mark.json', 'utf8'))
    if (data[v]) {
        data[v][id] = { sec, content, bDel: false }
    }
    fs.writeFile('./json/mark.json', JSON.stringify(data), function (err) {
        if (err)
            console.log(err);
        else
            console.log('Write operation complete.');
    });
    res.json(data)
})

// 刪除影片內的標記
app.delete('/api/Note/:v', (req, res) => {
    const { v } = req.params
    const { id, sec, content } = req.body

    let data = JSON.parse(fs.readFileSync('./json/mark.json', 'utf8'))
    if (data[v]) {
        data[v][id] = { ...data[v][id], bDel: true }
    }
    fs.writeFile('./json/mark.json', JSON.stringify(data), function (err) {
        if (err)
            console.log(err);
        else
            console.log('Write operation complete.');
    });
    res.json(data)
})

檔案儲存的話會分為兩個檔案，一個是首頁的列表，第二個是儲存每個影片內的所有標記，分別儲存在./json/video.json與./json/mark.json。

./json/video.json範例：

[
  {
    "v": "Ga22mpTDS6A",
    "title": "東京版《Joe是要對決》日幣30000元的奢華壽喜燒對決日幣600元的平價壽喜燒！Ep127@徐海莉 Hailey@流川莉蘿 Rilo ch."
  },
  {
    "v": "SxQgIJ3rQ3c",
    "title": "NEAL對決秋天的王者李宰赫！Royal Roader再度誕生！個人賽決賽SET 2《2022 跑跑卡丁車聯賽 S2》"
  }
]

./json/mark.json範例：

{
  "Ga22mpTDS6A": [
    {
      "sec": 1,
      "content": "# 標題",
      "bDel": false
    }
  ]
}

後記

寫完了API也就差不多快完工了，剩下就是與前端的連接而已，而之後的連接也會依序配合Redux Saga來教學，剩下5天就看看能不能如期完工吧！ (加油！

附上專案：

• 2022-iThomeIronman
• 2022-iThomeIronman-API

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)