react模擬后端接口及提交方式 json-server

前后端並行開發的痛點

• 前端需要等待后端開發完接口以后 再根據接口來完成前端的業務邏輯

解決方法

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

json-server

• 獲取一個模擬的功能齊全的api接口 不需要敲代碼 小於30s即可搞定

json-server使用

• 全局安裝json-server命令行工具
  • npm install -g json-server
• 准備一個json文件
  • 存儲數據
  • 生成接口
• 啟動
  • json-server ./db.json
  • json-server --watch db.json --port 3031

接口說明

• 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
   }