前後端並行開發的痛點

• 前端需要等待後端開發完介面以後 再根據介面來完成前端的業務邏輯

解決方法

• 在本地模擬後端介面用來測試前端效果 這種做法稱之為構建前端Mock

json-server

• 獲取一個模擬的功能齊全的api介面 不需要敲程式碼 小於30s即可搞定

json-server使用

• 全域性安裝json-server命令列工具
  • npm install -g json-server
• 準備一個json檔案
  • 儲存資料
  • 生成介面
• 啟動
  • json-server ./db.json

介面說明

• GET 請求資料列表

  • localhost:3000/users

• GET 請求指定ID的資料

  • localhost:3000/users/1

• GET 請求指定欄位值的資料

  • localhost:3000/users?name=李四&age=15

• GET 資料分頁

  • localhost:3000/users?_page=1&_limit=2

• GET 資料排序

  • localhost:3000/users?_sort=age&_order=asc
  • asc 升序 desc 降序

• GET 區間查詢

  • localhost:3000/users?age_gte=30&age_lte=40

• GET 搜尋

  • localhost:3000/users?q=張三

• GET 關聯查詢

  • localhost:3000/companies/1/users

• POST 新增資料

  • localhost:3000/users
  • Headers:{ Content-Type:'application/json' }
  • body -> raw

   {
       "name": "趙六",
       "age": 50,
       "companyId": 3
   }
  

• delete 刪除資料

  • localhost:3000/users/1

• patch 更新資料

  • localhost:3000/users/3
  • Headers:{ Content-Type:'application/json' }
  • body -> raw

   {
       "age": 100
   }