美文网首页
fastMock 的使用方法

fastMock 的使用方法

作者: JennyWeb | 来源:发表于2021-05-10 15:31 被阅读0次

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

    相关文章

      网友评论

          本文标题:fastMock 的使用方法

          本文链接:https://www.haomeiwen.com/subject/svpdgktx.html