json-server實現數據增刪改查以及路由自定義配置

前言

爽！！！再也不用等到后端開發同事接口寫好了之后再去對接接口了。只需要借助json-server這個神器可以完美模擬業務。

第一步

項目根目錄下創建db.json

{
"users": {
  "code": 200,
  "message": "操作成功",
  "data": [
    { "id": 1, "name": "張三", "age": 22, "sex": 0 }
  ]
}
}

第二步

創建route.json來做路由的自定義(可以根據業務需求來自定義接口url)

{
  "/api/common/users": "/users"
}

以上是我舉例的路由，可以訪問http://127.0.0.1:port/api/common/users進行接口訪問

第三步

創建json-server.json配置文件，可以對啟動端口。。。等進行自定義設置

{
  "port": 8000,              
  "watch": true,             
  "static": "./public",
  "read-only": false,        
  "no-cors": false,          
  "no-gzip": false,          
  "routes": "route.json"     
}

第四步

在package.json文件中加入npm快速啟動json-server命令，這樣就不用每次都輸入一長串命令了。

"scripts": {
    "mock": "json-server --c json-server.json db.json"
  },

效果產出圖

postman

瀏覽器

結語

是不是很爽，哈哈哈！
除此之外，我們前端在學習vue或者其他框架寫demo的時候，就可以自定義一些數據，模擬出真實的效果，等后端同事接口寫好了就可以進行無縫切換