还在为后端提供接口慢而发愁？试试这个，自己动手丰衣足食

介绍

本期给大家介绍一个可以随机模拟数据的库——mock.js，它是一个模拟数据生成器，帮助前端开发和原型与后端进程分离，减少一些开发时联调测试成本。它支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等数据的模拟。而且不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

看就是这么简单，我们实现可以与后端协定好接口格式和字段，然后可以在前端开发中拦截ajax请求把模拟数据直接传过去，也可以通过在线平台或搭建中端做接口模拟。后面，等后端完成接口开发，就可以直接替换接口就行了，非常提高效率。

他的API有非常丰富，我们今天先来学习一下他常用的API有哪些，看懂后绝大部分数据就直接用了。

正文

1.指定数量

A.固定数量

'name|num': any

Mock.mock({

    "star|3": "★",

    "num|3": 1,

    "arr|3": [{"level":1}],

    "obj|3":{"a":1,"b":2,"c":3,"d":4,"e":5},

    "bool|3":false

})

例如，输入固定值3则：

• 
  
• star：连续返回3个★
  
• num：固定返回数值3
  
• arr：返回数组内3个对象，如果不够固定值则从第一个值开始重复下去直到填满
  
• obj：随机选择3个对象里的属性返回出来，如果不够固定值则有多少返回多少
  
• bool：随机true和false
  

B. 生成随机数量

'name|min-max': any

Mock.mock({

    "star|1-5": "★",

    "num|1-5": 1,

    "arr|1-5": [{"level":1}],

    "obj|1-5":{"a":1,"b":2,"c":3,"d":4,"e":5},

    "bool|1-5":false

})

例如，star随机生成1到5个★，如图其后皆为随机1到5个

2.数值自加

适用场景：ID值等唯一值在列表中的模拟。

'name|+number': number|array

Mock.mock({

  "id|+1": 1,

  "code|+1": ["a","b","c","d","e"]

})

例如，在模拟下列数据，中将每隔一个数据，id值都会在上一个值得基础上自加5。

3.随机颜色

mock内置随机颜色的函数 —— @color | @hsl | @rgba | @rgb | @hex

Mock.mock({

  "status": 1,

  "msg": "success",

  "data": {

    "list|10": [{

      "id|+1": 1,

      "color": "@color"

    }]

  }

})

4.生成图片

mock内置了生成随机图片的函数 —— @image

Random.image( size?, background?, foreground?, format?, text? )

• 
  
• size：尺寸，如100x100
  
• background：背景色，如#FFFFFF
  
• foreground：前景色，也就是图片中文字颜色，如#333333
  
• format：图片类型，如png
  
• text：图片中文字
  

Mock.mock({

  "status": 1,

  "msg": "success",

  "data": {

    "list|10": [{

      "id|+1": 1,

      "icon": "@image(240x160, @color, #FFFFFF, png, icon)"

    }]

  }

})

5.内置常用函数

mock出了随机颜色和图片之外，还内置了很内置函数，接下来我们介绍几个使用最频繁的几个：

Mock.mock({

  "status": 1,

  "msg": "success",

  "data": {

    "list|5": [{

      "id": "@id",

      "name": "@cname",

      "title":"@ctitle(3,10)",

      "date":"@datetime",

      "email":"@email",

      "des": "@cparagraph(1,3)",

      "province":"@province",

      "city":"@city(true)",

      "address":"@county(true)",

      "link": "@url"

    }]

  }

})

• 
  
• @id：随机生成唯一值
  
• @cname：随机生成中文名字
  
• @ctitle(min?,max?)：随机生成中文标题
  
• @date("yyyy-MM-dd HH:mm:ss")：随机生成时间
  
• @email：随机生成邮箱地址
  
• @cparagraph(min?,max?)：随机生成中文段落
  
• @province：随机生成省
  
• @city(boolean?)：随机生成市，默认为false，不传则只显示市，不显示省，传入true，则省市全显示
  
• @county(boolean?)：随机生成区，默认为false，不传则只显示区，不显示省市，传入true，则省市区全显示
  
• @url：随机生成链接
  

结语

相信看完以上五条规则，你已经完全可以自由模拟想要的数据了，此时，我们可以通过用node搭建一个中端做个测试地址去处理要模拟的数据。或者用fastmock，这类线上平台去实现，他们同样支持mock API。总之，不管那种方案，都会对团队开发的效率有极大的提升。