JSON Server:30 秒內不用寫程式建立完整的偽裝的 REST API

專案介紹

無論是開發 Web 前端或是 Mobile App ,當應用程式的資料需要後端支援,這時候通常會定義 REST API 來取得後端的資料,但是前端/App 開發人員總不能等後端開發人員將 REST API 都實現完成才開始寫程式,現在有了這個開源工具 – JSON Server,可以很快的為前端/App開發人員提供 “mock data” ,這樣前後端的開發人員就可以同步開發了

安裝 JSON Server

首先你必須先安裝好 nodejs ,然後使用 npm 安裝

npm install -g json-server

建立一個 db.json 裡面設定你要測試的假資料

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

啟動 JSON Server

json-server --watch db.json

現在打開瀏覽器連到 http://localhost:3000posts/1,你就會得到

{ "id": 1, "title": "json-server", "author": "typicode" }

在做請求時,最好知道:

  • 如果你發出POST,PUT,PATCH或DELETE請求,更改將使用 lowdb 自動安全地保存到db.json。
  • 你的請求 body JSON應該是封閉的物件,就像 GET 輸出一樣。 (例如{“name”:“Foobar”})
  • Id值不可變。 PUT 或 PATCH 請求 body 中的任何 id 值修改都將被忽略。 只有在 POST 請求中設置的值才會被遵守,但僅限於尚未採用的值。
  • POST,PUT 或 PATCH 請求應包含 Content-Type:application / json標頭,以在請求的 body 中使用JSON。 否則它將導致 200 OK 但不對資料進行更改。

更多的功能

JSON-Server 還有支援

  • 自定義 Routes 
  • Filter  – 可使用 . 訪問深層屬性,例如  GET /comments?author.name=typicode
  • 排序:GET /posts?_sort=views&_order=asc
  • 分頁:GET  /posts?_page=7
  • 切割:添加 _start 和 _end 或 _limit(回應中包含 X-Total-Count 標頭)GET /posts?start=20&_end=30,與 Array.slice 完全一樣(即_start是包含的,_end是排除的)
  • 操作元:_gte ( 大於 ),_lte( 小於 ) _ne ( 不等於 ) _like ( 支援 RegExp ) , 用法例如 GET /posts?id_ne=1 ,更多操作元範例可查看專案網頁
  • 全文檢索:例如 GET  /posts?q=internet
  • 關聯:要包含子資源,請添加_embed,例如 GET /posts/1?_embed=comments,包含上層的資源使用 _expand ,例如 GET /comments/1?_expend=post
  • 資料庫:GET /db
  • 當作靜態網頁伺服器
  • 支援 CORS 和 JSONP
  • 可載入遠端的 JSON : json-server http://example.com/file.json
  • 使用 Javascript 產生隨機的資料 : 例如產生 1000 筆的 JSON 物件來做測試
  • 支援 HTTPS : 使用 hotel
  • 可加入  middlewares ( 作法跟 nodejs 一樣 )
  • 將 JSON-Server 當作 nodejs 的模組使用:如果需要添加身份驗證,驗證或任何行為,可以將 JSON-Server 作為模組與其它 Express middleware 結合使用。

如果你的工作是網頁前端開發,或是手機 App 開發人員,必須要跟後端開發人員合作,JSON-Server 可以說是一個可以同步開發的必備工具,App/前端跟後端整合不用等 REST API 都開發好,只要定義好 REST API 的 JSON 物件結構,就可以同步開發了

專案網址

相關線上課程

找相關課程?試看看 Soft & Share 網站搜尋引擎

✍ 搜尋結果太多?可參考 Soft & Share 搜尋引擎使用技巧


網站最新內容

幫我們個小忙!

使用 e-mail 追蹤 Soft & Share

Comments are closed.

Powered by WordPress.com.

Up ↑

%d 位部落客按了讚: