使用Mock.js进行独立于后端的前端开发

Mockjs能做什么？

• 基于 数据模板 生成模拟数据。
• 基于 HTML模板 生成模拟数据。
• 拦截并模拟 ajax 请求。

能解决的问题

• 开发时，前后端进度不同步，后端还没完成数据输出，前端只好写静态模拟数据。
• 数据太长了，将数据写在js文件里，完成后挨个改url。
• 某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。
• 想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。
• 特殊的格式，例如IP,随机数，图片，地址，需要去收集。
• 超烂的破网速…

现在只要前后端沟通好数据格式没前段就可以自己模拟数据，还可以结合faker.js生成测试数据。

• 安装

npm install mockjs/yarn add mockjs
//不是mock哦

• 使用

import Mock from 'mockjs';
Mock.mock(需要拦截的url,自定义的返回参数)
Mock.mock('https://www.baidu.com', {
'name'	   :'@name',
'age|1-100': 100,
'color'	   : Mock.Random.color()
});

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

rurl

可选。

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如/\/domain\/list\.json/、'/domian/list.json'。

rtype

可选。

表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

template

可选。

表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

function(options)

可选。

表示用于生成响应数据的函数。

options

指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。

Mock.Random常用工具类，生成随机数据

• Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org" 也可以写成@email()
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

方法

Mock.Random 提供的完整方法（占位符）如下：

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

• 属性名 和 生成规则 之间用 | 分隔。
• 生成规则 是可选的。

• 生成规则 有 7 种格式：

  1. 'name|min-max': value
  2. 'name|count': value
  3. 'name|min-max.dmin-dmax': value
  4. 'name|min-max.dcount': value
  5. 'name|count.dmin-dmax': value
  6. 'name|count.dcount': value
  7. 'name|+step': value

• 生成规则 的 含义 需要依赖 属性值 才能确定。

• 属性值 中可以含有 @占位符。
• 属性值 还指定了最终值的初始值和类型。

生成规则和示例：

1. 属性值是字符串 String

1. 'name|min-max': 'value' 通过重复 'value' 生成一个字符串，重复次数大于等于 min，小于等于 max。
2. 'name|count': 'value' 通过重复 'value' 生成一个字符串，重复次数等于 count。

2. 属性值是数字 Number

1. 'name|+1': 100 属性值自动加 1，初始值为 100
2. 'name|1-100': 100 生成一个大于等于 1、小于等于 100 的整数，属性值 100 只用来确定类型。

3. 'name|1-100.1-10': 100 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。

       {
       'number1|1-100.1-10': 1,
       'number2|123.1-10': 1,
       'number3|123.3': 1,
       'number4|123.10': 1.123
       }
       // =>
       {
       "number1": 12.92,
       "number2": 123.51,
       "number3": 123.777,
       "number4": 123.1231091814
       }
   

3. 属性值是布尔型 Boolean

1. 'name|1': value 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。
2. 'name|min-max': value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

4. 属性值是对象 Object

1. 'name|min-max': {} 从属性值 {} 中随机选取 min 到 max 个属性。
2. 'name|count': {} 从属性值 {} 中随机选取 count 个属性。

5. 属性值是数组 Array

1. 'name|1': [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值。
2. 'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 min，小于等于 max。
3. 'name|count': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数为 count。

6. 属性值是数组 Function

'name': function(){} 执行函数 function(){}，取其返回值作为最终的属性值，上下文为 'name' 所在的对象。

mock官网：http://mockjs.com/examples.html