在前后端开发过程中,通常会通过 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"
}
再次使用浏览器访问 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