联调前的 数据制造 Mock

前后端分离开发项目中，前端往往很别动，很多交互需要用数据来操作，等后端完成接口的编写并保证联调顺利的情况下再去写交互，显然是很耽误时间的。这时就需要前端自己来模拟真实的数据。交互的特殊性不高，我们还可以在代码中直接写个data，如果交互的特殊性较多，就需要多条数据来完成了。
Mock就是一款用于前端模拟数据的工具，具体的使用方法Mock官网介绍的很详细。

模拟数据

Mock.mock(template)
Mock.mock(rurl,function(options))
Mock.mock(rurl,rtype,template)
Mock.mock(rurl,rtype,function(options))

• template表示数据模板，可以是{‘data|1-10’:[{}]}也可以是’@email’ (下面有一些常用的数据占位符 )
• rurl表示要拦截的地址，可以使普通的url如http://c.cn，也可以是url正则表达式/.json/
• rtype表示需要拦截的 Ajax 请求类型。例如 get、post、put、delete等
• funtion(options)表示用于生成响应数据的函数

代码：

输出：

常用数据占位符

//数据占位符使用
{
  "integer": "@integer(10, 30)",  //随机生成一个10～30之间的正整数
  "float": "@float(60, 100, 2, 2)",  //随机生成浮点数，参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数
  "boolean": "@boolean",       //随机生成boolean
  "string|1-2": "@string",     //随机生成字符串
  "name":"@cname",             //随机生成名字
 
  "date": "@date(yyyy-MM-dd)", //按照格式随机生成时间
  "datetime": "@datetime",     //随机生成时间
  "now": "@now",               //当前时间
 
  "id": "@id",                 //随机生成一个 18 位身份证
  "guid": "@guid",             //随机生成一个 GUID
  "url": "@url",               //随机生成url字符串
  "email": "@email",           //随机生成邮箱
  "image": "@image(200x200)",  //随机生成一个大小为200x200的图片链接
  "title": "@title",           //随机生成一句标题，其中每个单词的首字母大写
  "upper": "@upper(@title)",   //把生随机成的标题全部转为大写
  "cparagraph": "@cparagraph", //随机生成一段中文文本
  "csentence": "@csentence",   //随机生成一段中文文本
  "range": "@range(2, 10)" ,   //返回一个内容从2开始到9的整型数组
 
  "region": "@region",         //随机生成地区 华中
  "province": "@province",     //随机生成省会 省
  "city": "@city",             //随机生成城市 市
  "county": "@county",         //随机生成一个（中国）县
}

其他
vue中的运用VUE项目中使用MOCK，总结的不错呢。