使用JSON Server进行模拟后端接口
第三方服务接口:leanCloud
首先在桌面打开终端
npm install -g json-server(不能再项目中安装)
然后新建一个文件夹(不能是json-server),比如:backServer
进入backServer文件夹打开终端
npm init --yes
npm i json-server --save
然后修改package.json的内容
在script中加入
"json:server":"json-server --watch data.json"
然后新建一个data.json
输入
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
然后终端运行
npm run json:server(上面script中的指令)
端口运行在3000
json-server 默认是 3000 端口，我们也可以自己指定端口，指令如下：
json-server --watch data.json --port 3004
也可以新建一个package.json，把配置信息写在里头：
{
"scripts": {
"mock": "json-server data.json --port 3004"
}
}
之后启动服务，只需要执行如下指令就可以了：
npm run mock
过滤获取 Filter：
http://localhost:3004/fruits/1
可以得到指定id为1的水果（对象）：
{
"id": 1,
"name": "apple",
"price": "33"
}
接入mock.js生成批量随机数据
在文件下安装mock.js
npm install mockjs --save
mockjs官网：http://mockjs.com/生成一个data.js的文件并写入:
let Mock = require('mockjs');
let Random = Mock.Random;
module.exports = function() {
let data = { list: [] }
// Create 1000 datas
for (let i = 0; i < 1000; i++) {
data.list.push({ id: i, name: Random.cname(),link:Random.url() })
}
return data
}
然后使用命令运行data.js就可以看到数据
json-server data.js
配置自定义路由
直接在命令行配置，例如
json-server db.js -d 500 -q -r ./routes.json
也可以创建json-server.json文件进行配置
{
"watch": true,
"delay": 500,
"quiet": true,
"routes": "./routes.json"
}
然后直接运行
json-server data.js
自定义路由
自定义路由通俗的讲就是给api请求地址起了个别名，而且和后台商量好后就避免后期了修改接口地址的麻烦。在mock目录下创建router.json文件，注意每个路由文件应该以/开头。
{
"/api": "/list",
"/api/list/:id": "/list/:id",
"/api/users?name=:name":"/users?name=:name"
}
在这个json文件里key就是真实部署时要访问的api路径，对应的value就是我们开发时虚拟的api路径。 现在访问 /api/list/1和访问/list/1 都返回/list/1的内容
高级查找
Filter(过滤)
使用.操作 对象属性值，比如访问更深层次的属性
GET /list?name="xxx"
GET /list?id=1
Paginate(分页)
使用 _page 和可选的 _limit来对返回数据定制（不设置默认返回10条）。 在返回的Response Headers 中，有一个属性Link，里面会有first, prev, next and last links。 而且还有X-Total-Count
GET /list?_page=1&_limit=10
GET /list?_page=1&_limit=2
Sort(排序)
使用 _sort 和 _order （默认是ascending)_sort表示按照什么来排序_order=asc表示升序排序, _order=desc表示降序排序
GET /list?_sort=id&_order=asc
Slice(分隔)
使用 _start 和 _end 或者 _limit
GET /list?_start=2&_end=5
GET /list?_start=10&_limit=5
Operators(运算)
使用 _gte 或 _lte 选取一个范围
# 选取id在2-5之间的数据
GET /list?id_gte=2&id_lte=5
使用 _ne 排除一个值
GET /list?name_ne=游魂
使用 _like 进行模糊查找 (支持正则表达式)
GET /list?name_like=游魂
Full-text search(全文检索)
使用 q，在对象全部value中遍历查找包含指定值的数据
GET /list?name=张
Relationships(关系图谱)
获取包含下级资源的数据, 使用 _embed
GET /parents?_embed=children
获取包含上级资源的数据, 使用 _expand
GET /children?_expand=parents
如何在指定IP上启动json-server
json-server --host 192.168.1.XXX my_file.json
增加对应的数据
POST方法 传一个请求体
POST /list
body: {
name:'朱晓乐',
age: 18
}
修改对应的数据
PUT方法 路径注意 是 localhost:3000/list/3 这里指定id为3的数据
PUT /list/id
body: {
name:'朱晓乐',
age:23
}
tips: 注意事项
PUT传的值会直接覆盖之前原有的值,不会单独修改一个属性
删除对应的数据
DELETE方法 路径注意 是 /list/id 这里的id指的是在服务中的id
DELETE /list/id
