前端虚拟接口Mock.js项目实践

前言

最近在实践个人项目F-Rent时大量使用了模拟数据，包括随机返回接口数据、img等...

带着需求寻找到Mock.js时让我眼前一亮，Mock.js可以拦截并模拟ajax请求 但是项目是线上所以带着需求又寻找到了线上接口服务easy-Mock支持Mock.js语法，搭配使用简直棒棒的！

关于本地模拟数据的配置和安装我就不做介绍了，网上有很多案例。

我下面会直接用我已经mock好的数据进行解剖详解

语法

{
  "success": true,
  "data": {
    "list|5-20": [{
      "id|100-10000": 10000,
      "name": "@cname",
      "type": "求租",
      "label|1": ["独卫", "男室友", "女室友", "晒房", "反馈", "闲聊", "闲置", "交友", "独卫", ],
      "labeltype|1": ["singwei", "manchum", "girlchum", "sumroom", "feedback", "gossip", "lieidle", "makefriends", "singwei", ],
      "title": "@csentence(5)",
      "source": "@csentence",
      "icon": "https://unsplash.it/244/132/?random&id=",
      "url|1-3": [{
        "name|+1": ["https://unsplash.it/244/132/?random&id=", "https://unsplash.it/244/132/?random&type=", "https://unsplash.it/244/132/?random&data="]
      }],
      "urlid|1-100": 100,
      "date": "@datetime",
      "see|100-10000": 10000,
      "fabulous|100-10000": 10000,
      "comment|100-10000": 10000,
    }]
  }
}

我们可以先到Mock.js查看语法，此Mock.js语法的json数据是F-Rent首页的综合数据，最后输出的数据为：

简单解剖

首先list|5-20指的是再五到二十中随机生成N条list数据,这样就可以实现首页批量生成N条数据！

id|100-10000:10000指的是从100到10000中随机取一个数字输出

label|1:["独卫", "男室友", "女室友", "晒房", "反馈"]最后可以输出从字符串中随机取一个数据来输出

url|1-3最后输出的数据为从name中随机取1-3条数据输出，我们可以看到数据的格式为：

@cname、@csentence、@datatime这些就不做介绍了，具体可以看 Mock.js语法

Mock数据

由于内容过多，我会发布到F-Rent项目仓库中提供大家参考，有什么问题可以留言或者在F-Rent项目仓库中提Issues