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的时候，就可以自定义一些数据，模拟出真实的效果，等后端同事接口写好了就可以进行无缝切换