作为前端开发人员,当后端还没有写好接口,但是我们又不想写静态的数据的话,可以使用模拟数据。
1、json-server和mock.js简介
json-server:利用json-server,可以自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。只需要提供一个json文件,或者写几行简单的js脚本就可以模拟出RESTful API的接口。还可以设置表连接。
更详细的json-server:json-server - npmhttps://www.npmjs.com/package/json-server
mock.js:利用mock.js可以生成随机数、拦截AJAX请求、模拟后端数据等。
更详细的可以访问mock.js官网:Mock.jshttp://mockjs.com/
2、 json-server的使用步骤
第一步:准备一个json文件,如db.json
{
"rights": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"children": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
第二步:下载json-server库
在json文件目录中打开powershell
npm install -g json-server // 检查是否安装成功 $ json-server -v
第三步:启动服务(记得加watch实时监听,就不需要每回数据变化了都重启服务)
// --watch:开启实时监听 也可以指定端口号
.\db.json:指定要启动哪个json文件 --port:指定端口号
json-server --watch .\db.json --port 8000
// 执行后的就产生了如图的接口,就可以向restful API一样使用。而且不存在跨域问题。
3、json-server实现增删改查,实现表连接
3.1 查询
// 请求id为1的文章
axios.get('http://localhost:8000/posts/1',{
console.log(res.data)
})
3.2 增
// 添加新的一篇文章(id会自己实现自增)
axios.post('http://localhost:8000/posts',{
title:'新增的文章的title'
author:"新文章的作者"
})
3.3 更新
替换式的更新:
// 替换式的更新,执行后对象中只有id和title了
axios.put('http://localhost:8000/posts/1',{
title:'修改了对象中的title'
})
补丁式的更新:
// 补丁式的更新,执行后对象中title的内容被修改了,其它的内容都不变
axios.patch('http://localhost:8000/posts/1',{
title:'修改了对象中的title'
})
3.4 删除指定数据
// 删除第一篇文章
axios.delete('http://localhost:8000/posts/1')
3.5 表关联(_embed)
// _embed:向下检索。在posts接口中,会先以posts接口中的文章为基础,向下根据postId找到每一篇文章的评论
// 请求文章的同时,将每一篇文章的对应评论变成属性comments[]一起取出来
axios.delete('http://localhost:8000/posts/?_embed=comments').then(res => {
console.log(res.data)
})
3.6 表连接(_expand)
// _expand:向上检索。在comments接口中,会先以comments接口中的评论为基础,根据postId向上找到每一个评论对应的文章
// 请求评论的同时,将每一个评论的对应的文章变成属性post[]一起取出来
axios.delete('http://localhost:8000/comments/?_expand=post').then(res => {
console.log(res.data)
})
4、mock.js的使用案例(在react脚手架项目中)
第一步:安装
# 安装 npm install mockjs
第二步:创建mock文件
// src/mock/index.js
import Mock from 'mockjs'
// 模拟get请求的接口
Mock.mock('/api/getMyList', {
list: [
{
title: "我是my中的数据1"
},
{
title: "我是my中的数据2"
},
{
title: "我是my中的数据3"
}
]
})
Mock.mock('/api/getRefeList', {
list: [
{
title: "我是推荐中的数据111111"
},
{
title: "我是推荐中的数据222222"
},
{
title: "我是推荐中的数据333333"
}
]
})
第三步:将mock文件与项目建立关联,或者只关联需要用到mock数据的组件
// APP.js 将mock和文件相关联
import './mock'
// 此时,就可以通过请求接口请求到mock数据了
第四步:请求该接口的数据
// 在需要mock数据的组件里请求数据
import axios from 'axios'
axios.get('/api/getMyList').then(res => {
console.log(res.data.list)
})
不同环境下的使用步骤: