概述

相对于其他同类的框架的实现，mock.js超出了我的意料。

基于 数据模板 生成模拟数据。

基于 HTML模板 生成模拟数据。

拦截并模拟 ajax 请求。

是的，mock.js只做上述的几件事，但做的足够出色。

简单来说，Mock数据就是借助一些后端来产生假数据返回给前端，让前端的业务流程可以跑下去。目前市面上也有很多工具专门做mock数据的，其实mockjs就是其中最有名的一款，DOClever同样对其进行了支持。

解决的问题

开发时，后端还没完成数据输出，前端只好写静态模拟数据。

数据太长了，将数据写在js文件里，完成后挨个改url。

某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。

想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。

特殊的格式，例如IP,随机数，图片，地址，需要去收集。

超烂的破网速…

…

如何使用DOClever的Mock数据

比如，我们创建如下接口，我们看下我们实际result数据，如下图

我们把data下面的tid加个mock规则@num(1,100)，如下图：

然后我们点击右上角的预览按钮，可以看到tid数字变为随机数字72了，如下图

基础

下面罗列了DOClever自身的一些mock规则：

@date 针对String类型，生成当前日期

@num(min,max) 针对Number类型，生成min到max范围之间的数字，比如@num(1,100)

@in(val1,val2,...) 针对String，Number类型，生成括号内的某一个值，比如@in(get,post,put,delete)

@img(width,height) 针对String类型，生成一个图片地址,如果填写@img，那么图片默认就是600x400

@null 针对String，Number，Boolean，Mixed类型，生成null值

@arr 针对Mixed类型，生成一个数组，比如@arr([123,45])

@obj 针对Mixed类型，生成一个对象,比如@obj({"name":"aa"})

@count(min,max) 针对Array类型，确定生成数组的大小,比如@count(1,10)

@code 针对String，Number，Boolean，Mixed类型，会执行自定义的代码并返回结果,比如@code(body["aa"])这个就会返回body参数里key为aa的值，有以下几个内置对象：param,query,header,body,global（global里面还有以下几个成员：name,baseurl,path,method)

如果不是以@字符开头的话 就直接生成你输入的那个值,当类型不匹配的时候会尝试去做类型转换

@mj 针对String，Number，Boolean，Mixed类型，提供对mockjs的支持，有两种写法，一种是@mj(DPD),例如@mj(@email),表示生成一个随机的email，还有一种是@mj({@DTD:@DPD}),例如：@mj({"3","a"})，表示生成"aaa"，具体的语法规则可以参考mockjs的官网