在前后端开发过程中,通常会通过 web api 进行沟通,Rest 风格和 JSON结构是常用的,例如前端要获取文章列表,需要通过 GET /post 来取得数据,返回的数据例如


{

  "posts": [

    { "id": 1, "title": "test", "author": "me" }, 

    ......

  ]

}


后端来定义路由和返回JSON数据


开发中,后端实现API的速度可能不能满足前端开发的速度,前端为了不必等待后端,可以自己来模拟这个API,按照规定好的数据结构来返回模拟数据


json-server 就是用来实现这个需求的,不用自己写任何代码,把自己需要的模拟数据写入一个JSON文件,json-server 可以加载这个文件,并对外提供REST风格的访问方式,下面通过示例看具体的使用方式


先通过 npm 安装 json-server


npm install -g json-server


然后自定义一个JSON文件 db.json,内容为


{

  "posts": [{

    "id": 1,

    "title": "测试 json-server",

    "author": "dys"

  }]

}


启动 json-server,指定加载 db.json,在命令行执行


json-server db.json


启动后的提示信息


  \{^_^}/ hi!


  Loading db.json

  Done


  Resources

  http://localhost:3000/posts

  http://localhost:3000/comments


  Home

  http://localhost:3000


在浏览器中访问 http://localhost:3000/posts,会输出 posts 数组,如


[

  {

    "id": 1,

    "title": "测试 json-server",

    "author": "dys"

  }

]


还可以访问某一条信息,如http://localhost:3000/posts/1,只返回一条数据


{

  "id": 1,

  "title": "测试 json-server",

  "author": "dys"

}


这是使用 GET 方式的访问,下面体验一下 POST请求


我使用了 Firefox 下的一个 HTTP 插件,向http://localhost:3000/posts 发送了 POST 请求,提交的数据为


{

    "id": 2,

    "title": "测试 post",

    "author": "dys"

}


快速模拟 Rest API_java


再次使用浏览器访问 http://localhost:3000/posts,可以看到刚刚 POST 的数据


[

  {

    "id": 1,

    "title": "测试 json-server",

    "author": "dys"

  },

  {

    "id": 2,

    "title": "测试 post",

    "author": "dys"

  }

]


以上是 json-server 的基本用法,他还有很多更强大的功能,可以到官网查看更多内容


项目官网 https://github.com/typicode/json-server