如何以 JSON Server 模擬 Query String API ?

讓 JSON Server 的應用更全面

雖然我們都盡量希望 API 以 URI 的方式表示，但實務上仍有一些 API 使用老式的 query string，我們該如何使用 JSON Server 模擬這類的 API 呢 ?

Version

JSON Server 0.12.0

User Story

qs000

Server 端並沒有提供類似 http://localhost/posts/1 使用 URI 的 API，而是提供 http://localhost:3000/api/posts?id=1 使用 query string 的 API

Task

希望能夠使用 JSON Server 模擬出 query string 風格的 API，讓前端與後端可以同時開發。

Implementation

新增 routes.json

routes.json

1
2
3
4
{
  "/api/posts": "/posts",
  "/api/posts?id=:id": "/posts/:id"
}

JSON Server 本身只提供 URI 風格的 API，必須靠自訂 route，將 posts?id=:id 轉成 /posts/:id， 其中 :id 為變數。

qs001

  1. 新增 routes.json
  2. 新增 "/api/posts?id=:id": "/posts/:id"，將 query string 對應到 URI，其中 :id 為變數

啟動 JSON Sever

1
~/MyProject $json-server ./json/db.json --routes ./json/routes.json

啟動 JSON Server，除了 db.json 外，另外加上 --routes 參數與 routes.json。

qs002

使用 Postman 測試

qs000

Conclusion

  • 只要透過簡單的 route 設定，JSON Server 也能模擬出 query string 風格的 API

Sample Code

完整的範例可以在 GitHub 上找到

2018-01-22
▲