1，json-server介绍
一个在前端本地运行，可以存储json数据的server。
通俗来说，就是模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。
顾名思义，json-server就是个存储json数据的server~。
json-server网址：json-server - npm
2，下载安装
使用npm全局安装json-server：
npm install -g json-server
可以通过查看版本号，来测试是否安装成功：
json-server -v
3，创建模拟json数据
test.json
既然是造数据，就需要创建一个json数据。
{ "fruits": [ { "id": 1, "name": "苹果", "price": 1.28 }, { "id": 2, "name": "橘子", "price": 3.88 }, { "id": 3, "name": "西瓜", "price": 1.98 } ], "users": [ { "name": { "username":"admin", "nickname":"zhangsan" }, "pwd": "123456" } ] }
要注意，数据格式符合JSON格式（尤其注意最后一个键值对后面不要有逗号）。如果数据格式有误，命令窗口会报错，可以根据错误提示进行修整。
4，启动 json-server
json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。
在任意一个文件夹下（此处假设我创建了一个myserver文件夹），进入到该文件夹里面，执行代码：
例如以下命令，把db.json文件托管成一个 web 服务。
json-server --watch db.json
5，修改端口号
json-server 默认是 3000 端口，我们也可以自己指定端口，指令如下：
json-server --watch db.json --port 3004
如果觉得启动服务的这段代码有点长，还可以考虑db.json同级文件夹（也就是myserver文件夹）新建一个package.json，把配置信息写在里头：
//JavaScript { "scripts": { "mock": "json-server db.json --port 3004" } }
之后启动服务，只需要执行如下指令就可以了：
npm run mock
6，json-server 的相关启动参数
- 语法：json-server [options]
- 选项列表
- source可以是json文件或者js文件。实例：
$ json-server --watch -c ./jsonserver.json $ json-server --watch app.js $ json-server db.json json-server --watch -port 8888 db.json
7，操作数据
通过3中创建的 db.json 数据，进行举例说明如何使用GET, POST, PUT, PATCH or DELETE 方法来对数据进行操作。
获取数据
首先，我们先来看GET操作。
浏览器地址访问就可以看做GET操作，所以不用写任何代码，我们就可以先来测试下 url -GET 操作。
- 常规获取
http://localhost:3004/fruits
可以得到所有水果数据（对象数组）
[ { "id": 1, "name": "苹果", "price": 1.28 }, { "id": 2, "name": "橘子", "price": 3.88 }, { "id": 3, "name": "西瓜", "price": 1.98 } ]
- 过滤获取 Filter
根据id获取数据
http://localhost:3004/fruits/1 • 1
可以得到指定id为1的水果（对象）：
{ "id": 1, "name": "苹果", "price": 1.28 }
当然，指定id为1的获取指令还可以用如下指令，但要注意，此时返回的数据是一个数组。
http://localhost:3004/fruits?id=1 • 1
[ { "id": 1, "name": "苹果", "price": 1.28 } ]
以此类推，我们也可以通过水果名称，或者是价格来获取数据：
http://localhost:3004/fruits?name=橘子
[ { "id": 2, "name": "橘子", "price": 3.88 } ]
也可以指定多个条件，用&符号连接：
http://localhost:3004/fruits?name=橘子&price=3.88
[ { "id": 2, "name": "橘子", "price": 3.88 } ]
你甚至还可以使用对象取属性值 obj.key 的方式：
http://localhost:3004/users?name.nickname=zhangsan
[ { "name": { "username": "admin", "nickname": "zhangsan" }, "pwd": "123456" } ]
以上看着是不是特别眼熟，不就是HTTP中GET请求方式嘛~ 嗯，更好玩的还在后面。
- 分页 Paginate
为了能演示分页效果，我们在db.json文件里的fruits里面多添加了几种水果。
{ "fruits": [ { "id": 1, "name": "糖心富士苹果", "price": 2.38 }, { "id": 2, "name": "橘子", "price": 3.88 }, { "id": 3, "name": "宁夏西瓜", "price": 1.98 }, { "id": 4, "name": "麒麟西瓜", "price": 3.98 }, { "id": 5, "name": "红蛇果", "price": 2.5 }, { "id": 6, "name": "黑皮西瓜", "price": 0.98 }, { "id": 7, "name": "红心火龙果", "price": 2.69 }, { "id": 8, "name": "国产火龙果", "price": 1.69 }, { "id": 9, "name": "海南荔枝", "price": 9.9 }, { "id": 10, "name": "陕西冬枣", "price": 5.39 }, { "id": 11, "name": "软籽石榴", "price": 2.39 }, { "id": 12, "name": "蜜橘", "price": 1.99 }, { "id": 13, "name": "海南香蕉", "price": 1.45 } ], "users": [ { "name": { "username":"admin", "nickname":"zhangsan" }, "pwd": "123456" } ] }
编辑过db.json（db.json数据有变动），都要关闭服务重新启动。（注意：不要用 CTRL + C 来停止服务，因为这种方式会导致 node.js 依旧霸占着3004端口，导致下一次启动失败。简单粗暴关闭窗口即可！ —— 个人window系统，其他系统可能没有这样的烦恼。）
分页采用 _page 来设置页码， _limit 来控制每页显示条数。如果没有指定 _limit ，默认每页显示10条。
http://localhost:3004/fruits?_page=2&_limit=5
[ { "id": 6, "name": "黑皮西瓜", "price": 0.98 }, { "id": 7, "name": "红心火龙果", "price": 2.69 }, { "id": 8, "name": "国产火龙果", "price": 1.69 }, { "id": 9, "name": "海南荔枝", "price": 9.9 }, { "id": 10, "name": "陕西冬枣", "price": 5.39 } ]
- 排序 Sort
排序采用 _sort 来指定要排序的字段， _order 来指定排序是正排序还是逆排序（asc | desc ，默认是asc）。
http://localhost:3004/fruits?_sort=price&_order=desc
[ { "id": 9, "name": "海南荔枝", "price": 9.9 }, { "id": 10, "name": "陕西冬枣", "price": 5.39 }, { "id": 4, "name": "麒麟西瓜", "price": 3.98 }, { "id": 2, "name": "橘子", "price": 3.88 }, { "id": 7, "name": "红心火龙果", "price": 2.69 }, { "id": 5, "name": "红蛇果", "price": 2.5 }, { "id": 11, "name": "软籽石榴", "price": 2.39 }, { "id": 1, "name": "糖心富士苹果", "price": 2.38 }, { "id": 12, "name": "蜜橘", "price": 1.99 }, { "id": 3, "name": "宁夏西瓜", "price": 1.98 }, { "id": 8, "name": "国产火龙果", "price": 1.69 }, { "id": 13, "name": "海南香蕉", "price": 1.45 }, { "id": 6, "name": "黑皮西瓜", "price": 0.98 } ] • 67
也可以指定多个字段排序，一般是按照price进行排序后，相同price的再根据id排序：
http://localhost:3004/fruits?_sort=price,id&_order=desc,asc
- 取局部数据 Slice
slice的方式，和 Array.slice() 方法类似。采用 _start 来指定开始位置， _end 来指定结束位置、或者是用_limit来指定从开始位置起往后取几个数据。
http://localhost:3004/fruits?_start=2&_end=4
[ { "id": 3, "name": "宁夏西瓜", "price": 1.98 }, { "id": 4, "name": "麒麟西瓜", "price": 3.98 } ]
http://localhost:3004/fruits?_start=2&_limit=4
[ { "id": 3, "name": "宁夏西瓜", "price": 1.98 }, { "id": 4, "name": "麒麟西瓜", "price": 3.98 }, { "id": 5, "name": "红蛇果", "price": 2.5 }, { "id": 6, "name": "黑皮西瓜", "price": 0.98 } ]
- 取符合某个范围 Operators
- 采用 _gte _lte 来设置一个取值范围（range）:
http://localhost:3004/fruits?id_gte=4&id_lte=6
[ { "id": 4, "name": "麒麟西瓜", "price": 3.98 }, { "id": 5, "name": "红蛇果", "price": 2.5 }, { "id": 6, "name": "黑皮西瓜", "price": 0.98 } ]
- 采用_ne来设置不包含某个值：
http://localhost:3004/fruits?id_ne=1&id_ne=10
[ { "id": 2, "name": "橘子", "price": 3.88 }, { "id": 3, "name": "宁夏西瓜", "price": 1.98 }, { "id": 4, "name": "麒麟西瓜", "price": 3.98 }, { "id": 5, "name": "红蛇果", "price": 2.5 }, { "id": 6, "name": "黑皮西瓜", "price": 0.98 }, { "id": 7, "name": "红心火龙果", "price": 2.69 }, { "id": 8, "name": "国产火龙果", "price": 1.69 }, { "id": 9, "name": "海南荔枝", "price": 9.9 }, { "id": 11, "name": "软籽石榴", "price": 2.39 }, { "id": 12, "name": "蜜橘", "price": 1.99 }, { "id": 13, "name": "海南香蕉", "price": 1.45 } ]
- 采用_like来设置匹配某个字符串（或正则表达式）：
http://localhost:3004/fruits?name_like=果
[ { "id": 1, "name": "糖心富士苹果", "price": 2.38 }, { "id": 5, "name": "红蛇果", "price": 2.5 }, { "id": 7, "name": "红心火龙果", "price": 2.69 }, { "id": 8, "name": "国产火龙果", "price": 1.69 } ]
- 全文搜索 Full-text search
采用 q 来设置搜索内容:
http://localhost:3004/fruits?q=3
[ { "id": 1, "name": "糖心富士苹果", "price": 2.38 }, { "id": 2, "name": "橘子", "price": 3.88 }, { "id": 3, "name": "宁夏西瓜", "price": 1.98 }, { "id": 4, "name": "麒麟西瓜", "price": 3.98 }, { "id": 10, "name": "陕西冬枣", "price": 5.39 }, { "id": 11, "name": "软籽石榴", "price": 2.39 }, { "id": 13, "name": "海南香蕉", "price": 1.45 } ]
除了获取数据，我们当然还希望能向操作sql一样能更改数据、删除数据了。
所以这里，我们采用大部分人熟悉的 ajax 方法，来操作下响应的数据。
