学习 | mockjs入门

最近工作有用到mockjs模拟数据，实现前后端分离，今天系统的把mockjs的API都过了一遍，算是入门吧。

什么是mockjs

mockjs就是一个模拟数据，生成随机数据，拦截ajax请求。
现在开发已经是前后端分离了，前端和后端可以同时进行开发，互不影响，但是有些时候后端开发的接口慢于前端，导致前端需要等待后端的接口完成才能完成前后端对接，为了解决这个痛点，出现了模拟接口数据的方案，目前行业中主要有四种方案来模拟后端放回的数据：

  • 暴力式，直接在前端代码中写入模拟数据，但是这种缺点很明显，改变了代码的原有逻辑，嵌入式太深，耦合性搞
  • 拦截式，这就是本文主要推荐的方式，通过拦截ajax请求，然后重定向到项目中的某个js文件，从js文件中获取各种伪造的数据
  • Mock Server，就是搭建一个Mock服务器来模拟数据，根据这个服务器来生产需要的接口数据，很显然这种成本有点高，不适合任何人，特别是大型的团队，文档的编写，接口的变更，通知到每一个人，代价就比较大了
  • Mock 平台，比如市面上RAP，但是需要后端使用他，未必所有的后端都愿意使用他

Mock.js：生成随机数据，拦截 Ajax 请求，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，“转发”到本地文件，所谓转发，其实就是读取本地 mock文件，并以json或者script等格式返回给浏览器。

为什么使用mockjs

1、后端给不了数据
2、数据太长，将数据放在js文件里面，完成后挨个改url
3、还原真实数据
4、特殊格式 ip 随机数 图片 地址
5、分页显示

mockjs基本语法（require.js）

参考index.html

语法规则

1、数据模板定义规范

“name|rule”:value
‘name|min-max’: value

通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

‘name|count’: value

通过重复 string 生成一个字符串，重复次数等于 count。

‘name|min-max.dmin-dmax’: value

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

‘name|min-max.dcount’: value

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dcount 位。

‘name|count.dmin-dmax’: value

生成一个浮点数，整数部分等于count，小数部分保留 dmin 到 dmax 位。

‘name|count.dcount’: value

生成一个浮点数，整数部分等于count，小数部分保留 dcount 位。

‘name|+1’: value

属性值自动加 1，初始值为 value

‘name|1’: boolean

属性值自动加 1，初始值为 value

1、Mock.mock(template)

根据数据模板生成模拟数据

2、Mock.mock(rurl,template)

当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

3、Mock.mock( rurl, function( options ) )

当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

4、Mock.mock( rurl, rtype, template )

当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

  1. rurl 可选

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

  2. rtype 可选

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

  1. template 可选

表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、’@EMAIL’
原文链接：https://blog.csdn.net/hbiao68/article/details/104022147

5、Mock.mock( rurl, rtype, function( options ) )

当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。

6、Mock.setup( settings )

配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。

7、占位符 Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据

8、自定义占位符 Mock.Random.extend({func});

用于自定义占位符

9、Mock.valid()

校验真实数据 data 是否与数据模板 template 匹配。