上手玩一下 json-server（一）了解篇

json-server 是什么？
我把这个词抛给一个后端好友时，他没用过查了下回复说：哦，原来是个mock 工具。
mock这词本意是 模拟、糊弄 的意思。mock server工具，通俗来说，就是模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。

顾名思义，json-server就是个存储json数据的server~

先献祭上json-server的github ： github地址 。

1 下载安装

使用npm全局安装json-server：

npm install -g json-server

可以通过查看版本号，来测试是否安装成功：

json-server -v

2 创建json数据——db.json

既然是造数据，就需要创建一个json数据。
在任意一个文件夹下（此处假设我创建了一个myserver文件夹），进入到该文件夹里面，执行代码：

json-server --watch db.json

执行json-server --watch db.json后

原本空空如也的文件夹里，就会多出一个db.json文件。
同时，根据执行代码结果的提示，我们可以访问 http://localhost:3000 （启动json-server后，点击才有效）,看到如下页面：

JSON Server

可以分别点击 /posts /comment /profile /db链接，看看页面跳转后，观察地址栏变化和页面内容，你看到了什么？
没错，就是各自的json数据。

db.json - posts

db.json

再比对myserver/db.json文件的数据，就可以发现： /db就是整个的db.json数据包，而/posts /comment /profile 分别是db.json里面的子对象。

所以说，json-server把db.json 根节点的每一个key，当作了一个router。我们可以根据这个规则来编写测试数据。

---

json-server 默认是 3000 端口，我们也可以自己指定端口，指令如下：

json-server --watch db.json --port 3004

嗯，如果你很懒，觉得启动服务的这段代码有点长，还可以考虑db.json同级文件夹（也就是myserver文件夹）新建一个package.json，把配置信息写在里头：

{
    "scripts": {
        "mock": "json-server db.json --port 3004"
    }
}

之后启动服务，只需要执行如下指令就可以了：

npm run mock

3 操作数据

我们先自己倒腾下 db.json 数据，比如现在是个水果商城，放点 用户信息 和 水果价格 信息：

{
  "fruits": [
    {
      "id": 1,
      "name": "apple",
      "price": "33"
    },
    {
      "id": 2,
      "name": "orange",
      "price": "8.88"
    }
  ],
   "users": [
    {
      "name": {
        "username":"admin",
        "nickname":"dachui"
      },
      "pwd": "123456"
    }
  ]
}

要注意，数据格式符合JSON格式（尤其注意最后一个键值对后面不要有逗号）。如果数据格式有误，命令窗口会报错，可以根据错误提示进行修整。
接下来我们就可以GET, POST, PUT, PATCH or DELETE 方法来对数据进行操作。

（1）GET

首先，我们先来看GET操作。（以下会根据官方文档对所有GET操作做详细说明。）
浏览器地址访问就可以看做GET操作，所以不用写任何代码，我们就可以先来测试下 url -GET 操作。
常规获取：

http://localhost:3004/fruits

可以得到所有水果数据（对象数组）：

[
  {
    "id": 1,
    "name": "apple",
    "price": "33"
  },
  {
    "id": 2,
    "name": "orange",
    "price": "8.88"
  }
]

过滤获取 Filter：

http://localhost:3004/fruits/1

可以得到指定id为1的水果（对象）：

{
  "id": 1,
  "name": "apple",
  "price": "33"
}

---

当然，指定id为1的获取指令还可以用如下指令，但要注意，此时返回的数据是一个数组。

http://localhost:3004/fruits?id=1

[
  {
    "id": 1,
    "name": "apple",
    "price": "33"
  }
]

以此类推，我们也可以通过水果名称，或者是价格来获取数据：

http://localhost:3004/fruits?name=orange

[
  {
    "id": 2,
    "name": "orange",
    "price": "8.88"
  }
]

也可以指定多个条件，用&符号连接：

http://localhost:3004/fruits?name=orange&price=8.88

[
  {
    "id": 2,
    "name": "orange",
    "price": "8.88"
  }
]

你甚至还可以使用对象取属性值 obj.key 的方式：

http://localhost:3004/users?name.nickname=dachui

[
  {
    "name": {
      "username": "admin",
      "nickname": "dachui"
    },
    "pwd": "123456"
  }
]

以上看着是不是特别眼熟，不就是HTTP中GET请求方式嘛~
嗯，更好玩的还在后面

分页 Paginate
为了能演示分页效果，我们在db.json文件里的fruits里面多添加了几种水果。

{
  "fruits": [
    {
      "id": 1,
      "name": "apple1",
      "price": "33"
    },
    {
      "id": 2,
      "name": "apple2",
      "price": "2"
    },
    {
      "id": 3,
      "name": "apple3",
      "price": "3"
    },
    {
      "id": 4,
      "name": "apple4",
      "price": "4"
    },
    {
      "id": 5,
      "name": "apple5",
      "price": "5"
    },
    {
      "id": 6,
      "name": "orange",
      "price": "8.88"
    }
  ],
   "users": [
    {
      "name": {
        "username":"admin",
        "nickname":"dachui"
      },
      "pwd": "123456"
    }
  ]
}

编辑过db.json（db.json数据有变动），都要关闭服务重新启动。（注意：不要用 CTRL + C 来停止服务，因为这种方式会导致 node.js 依旧霸占着3004端口，导致下一次启动失败。简单粗暴关闭窗口即可！ —— 个人window系统，其他系统可能没有这样的烦恼。）

分页采用 _page 来设置页码， _limit 来控制每页显示条数。如果没有指定 _limit ，默认每页显示10条。

http://localhost:3004/fruits?_page=2&_limit=2

[
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  }
]

排序 Sort
排序采用 _sort 来指定要排序的字段， _order 来指定排序是正排序还是逆排序（asc | desc ，默认是asc）。

http://localhost:3004/fruits?_sort=id&_order=desc

[
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 1,
    "name": "apple1",
    "price": "33"
  }
]

也可以指定多个字段排序，一般是按照id进行排序后，相同id的再跟进name排序（此块没有具体造数据格式，猜测如此）：

http://localhost:3004/fruits?_sort=id,name&_order=desc,asc

取局部数据 Slice
slice的方式，和 Array.slice() 方法类似。采用 _start 来指定开始位置， _end 来指定结束位置、或者是用_limit来指定从开始位置起往后取几个数据。

http://localhost:3004/fruits?_start=2&_end=4

[
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  }
]

http://localhost:3004/fruits?_start=2&_limit=4

[
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

取符合某个范围 Operators
（1）采用 _gte _lte 来设置一个取值范围（range）:

http://localhost:3004/fruits?id_gte=4&id_lte=6

[
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

（2）采用_ne来设置不包含某个值：

http://localhost:3004/fruits?id_ne=1

[
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

（3）采用_like来设置匹配某个字符串（或正则表达式）：

http://localhost:3004/fruits?name_like=apple

[
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  }
]

全文搜索 Full-text search
采用 q 来设置搜索内容:

http://localhost:3004/fruits?q=oran

[
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

关联关系 Relationships
（1）采用 _embed 来设置（创建或包含）一个子资源。

http://localhost:3004/users?_embed=personInfo

[
  {
    "name": {
      "username": "admin",
      "nickname": "dachui"
    },
    "pwd": "123456",
    "personInfo": []
  }
]

（2）采用 _expand 来设置是否包含某个父资源。（测试数据的局限性，我没太懂这条指令的意思了，之后在试试看。）

http://localhost:3004/fruits?_expand=users

[
  {
    "id": 1,
    "name": "apple1",
    "price": "33"
  },
  {
    "id": 2,
    "name": "apple2",
    "price": "2"
  },
  {
    "id": 3,
    "name": "apple3",
    "price": "3"
  },
  {
    "id": 4,
    "name": "apple4",
    "price": "4"
  },
  {
    "id": 5,
    "name": "apple5",
    "price": "5"
  },
  {
    "id": 6,
    "name": "orange",
    "price": "8.88"
  }
]

（3）获取嵌套资源（测试数据局限性，这条指令是虚拟的。）

http://localhost:3004/fruit/1/shops

---

以上主要介绍GET的功能，通过浏览器请求数据。
下一篇 上手玩一下json-server（二）操作数据篇——POST/PATCH/DELETE，我们将用ajax方式来获取/修改数据。