常常在開發應用時,前端工程師 都必須要先等待 後端工程師 提供 API 才可以進行一些介面上的開發,這件事情通常是很沒有效益的

我們追求的是 前端 跟 後端 的開發能同時進行,不必你等我等你,那該怎麼辦呢?

很簡單,只要 前端 這邊可以先拿到 API 就行了,如果後端沒有給,那我們可以自己進行模擬

前端自行建置自己的 REST API 來作介面上的開發,這邊將介紹一套 前端的開發工具 json-server


快速建置 REST API 的 Server

安裝套件:

npm install -g json-server

啟動 JSON server:

json-server --watch db.json

沒錯! 就這麼就單,接著你只要使用瀏覽器,打開 http://localhost:3000/

就可以看到下面畫面嘍~~


接著就可以使用 HTTP 提供的 方法:

GETPOSTPUTPATCHDELETEOPTIONS

來進行 API 的操作


再來你可以打開 db.json 的檔案,你可以查看到對應 Resources 的 json 資料

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

這些資料都是 JSON Server 自己產生的,如果想自己指定自己的 json 格式,只要使用 JSON Server 重新 watch 當前的 json 檔案就可以了,相當的方便

另外請不要將 JSON Server 作為 正式的應用直接上線,他只是方便前端模擬後端的 API 來協助開發而已,並沒有做權限控管,與安全性相關的維護


參考資料:

JSON Server github

Summary
[REST API] 使用 JSON 建置一個 Fake REST API 的服務
Article Name
[REST API] 使用 JSON 建置一個 Fake REST API 的服務
Description
常常在開發應用時,前端工程師 都必須要先等待 後端工程師 提供 API 才可以進行一些介面上的開發,這件事情通常是很沒有效益的我們追求的是 前端 跟 後端 的開發能同時進行,不必你等我等你,那該怎麼辦呢?很簡單,只要 前端 這邊可以先拿到 API 就行了,如果後端沒有給,那我們可以自己進行模擬前端自行建置自己的 REST API 來作介面上的開發,這邊將介紹一套 前端的開發工具 `json-server`
Author

Facebook 功能: