mock数据可能是工作中常见的一些必要手段, 手写mock有些麻烦,介绍fastmock网址https://www.fastmock.site/的使用方法哦~首先需要登录注册创建项目, 其次再去写接口的一些信息如请求方式等等啦
mock数据可以去mock官网查看更多方法如 图片、名字、地址、身份证号等等
下面介绍接口怎么mock数据:
需要注意:数据是JSON类型的,所以记住用双引号
一、简单的数据
{
"list|10":[
{
"id":0,
"text":"@name",
"price":998,
"imgs":"@image('200x200')"
}
]
}
产生了10条数据如下:{
"list": [
{
"id": 0,
"text": "Ronald Lopez",
"price": 998,
"imgs": "http://dummyimage.com/200x200"
},
{
"id": 0,
"text": "Maria Thomas",
"price": 998,
"imgs": "http://dummyimage.com/200x200"
},
{
"id": 0,
"text": "Angela Walker",
"price": 998,
"imgs": "http://dummyimage.com/200x200"
},
{
"id": 0,
"text": "George Jackson",
"price": 998,
"imgs": "http://dummyimage.com/200x200"
},
{
"id": 0,
"text": "Richard Lopez",
"price": 998,
"imgs": "http://dummyimage.com/200x200"
},
{
"id": 0,
"text": "Brenda Harris",
"price": 998,
"imgs": "http://dummyimage.com/200x200"
},
{
"id": 0,
"text": "Mark Garcia",
"price": 998,
"imgs": "http://dummyimage.com/200x200"
},
{
"id": 0,
"text": "Betty Perez",
"price": 998,
"imgs": "http://dummyimage.com/200x200"
},
{
"id": 0,
"text": "Jose Lewis",
"price": 998,
"imgs": "http://dummyimage.com/200x200"
},
{
"id": 0,
"text": "Cynthia Anderson",
"price": 998,
"imgs": "http://dummyimage.com/200x200"
}
]
}
有些时候需要我们mock真是的post/get提交的data, 按照下列方式mock:
{
"data": function({
_req,
Mock
}) {
let {
pageIndex,
pageSize
}=_req.query;
if(pageSize == 10){
return Mock.mock({
"list|10":[
{
"id|+1":0,
name:'@name',
img_src:"@image(200X230)"
}
],
"total":"24"
})
}
}
}
此时 要想请求到此数据 需要传递请求data: {pageIndex:xx, pageSize:10} 才可以返回mock的数据哦 ~
因需求不一样, 大家掌握了mock的技能后能够举一反三是最好的, 点赞哦~