使用json-server模拟服务器API

在大多数开发流程中后台开发人员一般会优先输出API文档给前端开发人员
前端开发人员按照API文档先行编写业务逻辑当然此时API并不能真正调用意味着我们拿不到测试数据

而有些业务逻辑需要后台API数据的支持我们必须等到后台API开发完成后才能测试这些业务逻辑
显然这种工作效率是低下的我们不得不依赖API的开发进度
当然我们是聪明的攻城狮这不应该成为我们拿不到绩效奖金的绊脚石~~~ 即使你们公司从不发绩效奖金哈哈哈

那么我们怎么规避这种问题？试想下如果我们自己本地搭建一台JSON服务器自己生产测试数据？？？
而今天的主角json-server就能帮你达到目的

1.下载安装

sudo npm install -g json-server

为了保证我们有足够的权限我们使用了sudo

安装完成后输入 json-server 可以看到支持的命令有哪些
如下图

json-server

2.简单使用

既然制造 json 测试数据那么我们需要创建json数据
首先在你喜欢的位置创建一个文件目录
在这里面我创建了api_server目录用于存放json数据
然后进入该目录

然后我们在该目录下生成一个db.json文件内容如下：

{
  "posts": [
              {
                 "id": 1, 
                "title": "json-server", 
                "author": "typicode" 
              }
          ],
 "comments": [
              { 
                "id": 1, 
                "body": "some comment",
                 "postId": 1   
              } 
            ], 
   "profile":  { 
                  "name": "typicode" 
          }
}

在这里我们创建了简单的测试数据
接下来我们需要启动json-server 并告诉json-server监视db.json

json-server --watch db.json

如果没有出现错误终端将会出现如下提示：

watch db.jsong

我们看到json-server的Hom地址为http://localhost:3000
当然我们也可以指定端口这样我们就可以监听多个json文件

json-server --watch -port 8888 db.json

我们在浏览器中访问该地址将看到如下内容

json-server Home

可以看到在Routes选项出列举了db.json字典的所有keys
我们点击posts

posts

是不是访问到posts对应的数据了 ~~
你是不是突然间明白了？
json-server把db.json根节点的每个key 当做一个router
也就是我们的API 所有你存放编写测试数据时要注意这个规则
我们也可以访问整个db.json的数据

 http://localhost:3000/db

db.josn

3.过滤

上面请求方式未免太简单我们能否通过id访问某个posts呢？
很简单在浏览器中访问如下地址：

  http://localhost:3000/posts/1

posts/1

通过这种方式访问你必须确保posts中有个id为1的post
想要获得更高的灵活度我们还可以属性过滤
比如上面的地址可以改为如下方式

http://localhost:3000/posts?id=1

这种方式是不是很喜欢？这样我们就可以模拟接口参数了
当然也可以指定多个参数

多参数

4.分页

分页查询是非常常见的需求 json-server提供了如下关键字参数
** _start**: 起始位置从0开始
_end: 结束位置从0开始
_limit: 每页数量

为了更好的演示该功能我们需要向db.json中添加一点测试数据
如下;

{
  "posts": [
      { "id": 1, "title": "json-server", "author": "typicode" },  
     { "id": 2, "title": "我是posts2", "author": "typicode" },      
     { "id": 3, "title": "我是posts3", "author": "typicode" }, 
      { "id": 4, "title": "我是posts4", "author": "typicode" }, 
      { "id": 2, "title": "我是posts2", "author": "typicode" }, 
      { "id": 5, "title": "我是posts5", "author": "typicode" }, 
      { "id": 6, "title": "我是posts6", "author": "typicode" }, 
      { "id": 7, "title": "我是posts7", "author": "typicode" }, 
      { "id": 8, "title": "我是posts8", "author": "typicode" }, 
      { "id":9, "title": "我是posts9", "author": "typicode" }, 
    { "id":10, "title": "我是posts10", "author": "typicode" }
  ],
"comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
    "profile": { "name": "typicode" }
}

修改db.json后需要停止json-server并再次执行

json-server --watch db.json

接着在浏览器中访问如下链接（从0开始到5结束）

 http://localhost:3000/posts?_start=0&_end=5

0-5

或者使用_limit关键字获取固定数量的posts

http://localhost:3000/posts?_start=0&_limit=5

这样我们通过_start 和 _limit就可以实现分页功能
并可以添加其他查询条件比如

http://localhost:3000/posts??title=json-server&_start=0&_limit=5

我们添加了title=json-server查询添加

5.排序

排序功能我们就不在演示贴上使用例子即可

 /posts?_sort=views&_order=DESC
 /posts/1/comments?_sort=votes&_order=ASC

json-server还有很多高级的用法比如router映射设置请求方式（GET POST...）
这里就不再一一演示更多高级用法可以访问下述链接

Github
lowdb

欢迎关注个人公众号：DevTipss

DevTipss