fastMock 的使用方法

2021-05-10  本文已影响0人  JennyWeb

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的技能后能够举一反三是最好的, 点赞哦~

上一篇下一篇

猜你喜欢

热点阅读