2017-07-31 20:23:22 +08:00
<!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" / >
< meta name = "format-detection" content = "telephone=no,email=no" / >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge, chrome=1" >
< meta name = "description" content = "description of your site" >
< meta name = "author" content = "author of the site" >
< title > YApi Mock功能< / title >
< link rel = "stylesheet" href = "source/main.css" / >
< / head >
< body >
< div class = "ydoc" >
< header class = "ydoc-header" >
< div class = "ydoc-header-area" >
< a href = "http://ued.qunar.com/ymfe/" class = "navbar-brand" > YMFE< / a >
< button class = "ydocIcon navbar-toggle" >  < / button >
< nav class = "ydoc-nav" >
< ul class = "navbar-left" >
< li class = "" >
< a href = "index.html" > 首页< / a >
< / li >
< li class = "" >
< a href = "interface.html" > 接口管理< / a >
< / li >
< li class = "active" >
< a href = "mock.html" > Mock功能< / a >
< / li >
< li class = "" >
< a href = "api.html" > < / a >
< / li >
< / ul >
< / nav >
< / div >
< / header >
<!-- <header style="height:20px"></header> -->
<!-- Docs page layout -->
< div class = "ydoc-banner-bg" >
< div class = "ydoc-banner " >
< div class = "ydoc-banner-area" >
< h1 > YApi< / h1 >
< p class = "desc " > 高效、易用、功能强大、的api管理平台, 旨在为开发、产品、测试人员提供更优雅的接口管理服务。< / p >
< / div >
< / div >
< div class = "ydoc-container" >
2017-07-31 21:11:07 +08:00
< div class = "ydoc-container-content" >
< div class = "content-left staticsidenav" role = "complementary" >
< nav class = "docs-sidebar hidden-print hidden-xs hidden-sm" >
< ul class = "nav docs-sidenav" >
< / ul >
< / nav >
< / div >
2017-07-31 20:23:22 +08:00
2017-07-31 21:11:07 +08:00
< div class = "content-right right markdown-body use-sidebar" role = "main" >
< div class = "docs-section" >
< div >
< h3 class = "subject" id = "Mock功能" > Mock功能 < a class = "hashlink" href = "#Mock功能" > #< / a > < / h3 > < p style = 'text-indent:2em;line-height:1.8em' > yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则(< a href = "#mock" > 点击到Mock规则< / a > ) 生成Mock接口, 这些接口会自动生成模拟数据, 支持复杂的生成逻辑, 创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的, 正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作,这对于团队开发是很有好处的。< / p >
2017-07-31 20:23:22 +08:00
< h4 class = "subject" id = "1_Mock步骤" > 1 Mock步骤 < a class = "hashlink" href = "#1_Mock步骤" > #< / a > < / h4 > < h5 class = "subject" id = "1.1_创建接口" > 1.1 创建接口 < a class = "hashlink" href = "#1.1_创建接口" > #< / a > < / h5 > < p > 通过点击页面上的" +添加接口" (若是接口已存在则跳到 1.2 ) < / p >
< p > < img src = "http://note.youdao.com/yws/api/personal/file/WEB613bd4f29db038f2b41c03dcfceda2b6?method=download&shareKey=29bfc2b855f6f26ce0079baf567e54cc" width = "800" style = "margin:0px auto;display:block;" alt = "图片名称" align = center / > < / p >
< p > 输入协议、URL、接口名、请求头、请求参数、Mock规则( < a href = "#mock" > 点击到Mock规则< / a > )等信息,然后点击右上角的" Mock" 按钮。< / p >
< p > < img src = "http://upload-images.jianshu.io/upload_images/842107-78c0ea839619d068.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style = "margin:0px auto;display:block;" alt = "图片名称" align = center / > < / p >
< h5 class = "subject" id = "1.2_开始Mock" > 1.2 开始Mock < a class = "hashlink" href = "#1.2_开始Mock" > #< / a > < / h5 > < p > 当点击" Mock" 按钮之后, 就会在页面下方生成一个mock结果并产生一个API接口。< / p >
< p > < img src = "http://note.youdao.com/yws/api/personal/file/WEBf9b154cb88d21daa8206e8c4a3d76042?method=download&shareKey=1999f6c2cf197b5b6d775c312e34073d" width = "800" style = "margin:0px auto;display:block;" alt = "图片名称" align = center / > < / p >
< p > 将请求的信息填写完善如: 请求方法( post、get等) 、URL、请求头、请求的数据等。然后就点击" 发送" ,然后在" 返回结果" 出可以看到接口返回的数据。< / p >
< p > < img src = "http://upload-images.jianshu.io/upload_images/842107-2ee7171d707e91ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style = "margin:0px auto;display:block;" alt = "图片名称" align = center / > < / p >
< h4 class = "subject" id = "3_成员管理" > 3 成员管理 < a class = "hashlink" href = "#3_成员管理" > #< / a > < / h4 > < p > 你也可以通过点击" 管理成员" 来添加和删除项目的成员,便于团队管理。< / p >
< p > < img src = "http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&shareKey=218b9326659208ec564b9fff3ea8c6c3" width = "800" style = "margin:0px auto;display:block;" alt = "图片名称" align = center / > < / p >
< p > < span id = "mock" > < / span > < / p >
< h4 class = "subject" id = "2.1_Mock语法规范" > 2.1 Mock语法规范 < a class = "hashlink" href = "#2.1_Mock语法规范" > #< / a > < / h4 > < blockquote >
< p > 参考自:< a href = "http://mockjs.com/" > Mock.js 官网< / a > < / p >
< / blockquote >
< p > Mock.js 的语法规范包括两部分:< / p >
< p > < a href = "#DTD" > 1. 数据模板定义规范( Data Template Definition, DTD) < / a > < / p >
< p > < a href = "#DPD" > 2. 数据占位符定义规范( Data Placeholder Definition, DPD) < / a > < / p >
< p > < span id = "DTD" > < / span > < / p >
< h4 class = "subject" id = "数据模板定义规范( Data_Template_Definition, DTD) " > 数据模板定义规范( Data Template Definition, DTD) < a class = "hashlink" href = "#数据模板定义规范( Data_Template_Definition, DTD) " > #< / a > < / h4 > < p > 数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:< / p >
< pre > < code > // 属性名 name (与生成规则之间用 "|< span class = "token string" > " 隔开)
// 生成规则 rule( 生成规则有7种详见下面的生成规则)
// 属性值 value( 可以含有 "< / span > @占位符" 同时也指定了最终值的初始值和类型)
'name|rule'< span class = "token operator" > :< / span > value
生成规则:
'name|min-max'< span class = "token operator" > :< / span > value
'name|count'< span class = "token operator" > :< / span > value
'name|min-max.dmin-dmax'< span class = "token operator" > :< / span > value
'name|min-max.dcount'< span class = "token operator" > :< / span > value
'name|count.dmin-dmax'< span class = "token operator" > :< / span > value
'name|count.dcount'< span class = "token operator" > :< / span > value
'name|+step'< span class = "token operator" > :< / span > value
< / code > < / pre > < p > 生成规则示例:< / p >
< h5 class = "subject" id = "1._属性值是字符串_String" > 1. 属性值是字符串 String < a class = "hashlink" href = "#1._属性值是字符串_String" > #< / a > < / h5 > < pre > < code > < span class = "token number" > 1< / span > . 'name|min-max'< span class = "token operator" > :< / span > string
通过重复 string 生成一个字符串,重复次数大于等于 min, 小于等于 max。
< span class = "token number" > 2< / span > . 'name|count'< span class = "token operator" > :< / span > string
通过重复 string 生成一个字符串,重复次数等于 count。
< / code > < / pre > < h5 class = "subject" id = "2._属性值是数字_Number" > 2. 属性值是数字 Number < a class = "hashlink" href = "#2._属性值是数字_Number" > #< / a > < / h5 > < pre > < code > < span class = "token number" > 1< / span > . 'name|+< span class = "token number" > 1< / span > '< span class = "token operator" > :< / span > number
属性值自动加 < span class = "token number" > 1< / span > ,初始值为 number。
< span class = "token number" > 2< / span > . 'name|min-max'< span class = "token operator" > :< / span > number
生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型。
< span class = "token number" > 3< / span > . 'name|min-max.dmin-dmax'< span class = "token operator" > :< / span > number
生成一个浮点数,整数部分大于等于 min、小于等于 max, 小数部分保留 dmin 到 dmax 位。
例如:
Mock.mock(< span class = "token punctuation" > {< / span >
'number1|< span class = "token number" > 1< / span > -< span class = "token number" > 100.1< / span > -< span class = "token number" > 10< / span > '< span class = "token operator" > :< / span > < span class = "token number" > 1< / span > < span class = "token punctuation" > ,< / span >
'number2|< span class = "token number" > 123.1< / span > -< span class = "token number" > 10< / span > '< span class = "token operator" > :< / span > < span class = "token number" > 1< / span > < span class = "token punctuation" > ,< / span >
'number3|< span class = "token number" > 123.3< / span > '< span class = "token operator" > :< / span > < span class = "token number" > 1< / span > < span class = "token punctuation" > ,< / span >
'number4|< span class = "token number" > 123.10< / span > '< span class = "token operator" > :< / span > < span class = "token number" > 1.123< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > )< / span >
// =>
< span class = "token punctuation" > {< / span >
< span class = "token property" > "number1"< / span > < span class = "token operator" > :< / span > < span class = "token number" > 12.92< / span > < span class = "token punctuation" > ,< / span >
< span class = "token property" > "number2"< / span > < span class = "token operator" > :< / span > < span class = "token number" > 123.51< / span > < span class = "token punctuation" > ,< / span >
< span class = "token property" > "number3"< / span > < span class = "token operator" > :< / span > < span class = "token number" > 123.777< / span > < span class = "token punctuation" > ,< / span >
< span class = "token property" > "number4"< / span > < span class = "token operator" > :< / span > < span class = "token number" > 123.1231091814< / span >
< span class = "token punctuation" > }< / span >
< / code > < / pre > < h5 class = "subject" id = "3._属性值是布尔型_Boolean" > 3. 属性值是布尔型 Boolean < a class = "hashlink" href = "#3._属性值是布尔型_Boolean" > #< / a > < / h5 > < pre > < code > < span class = "token number" > 1< / span > . 'name|< span class = "token number" > 1< / span > '< span class = "token operator" > :< / span > boolean
随机生成一个布尔值,值为 < span class = "token boolean" > true< / span > 的概率是 < span class = "token number" > 1< / span > /< span class = "token number" > 2< / span > ,值为 < span class = "token boolean" > false< / span > 的概率同样是 < span class = "token number" > 1< / span > /< span class = "token number" > 2< / span > 。
< span class = "token number" > 2< / span > . 'name|min-max'< span class = "token operator" > :< / span > value
随机生成一个布尔值,值为 value 的概率是 min / (min + max< span class = "token punctuation" > )< / span > ,值为 !value 的概率是 max / (min + max< span class = "token punctuation" > )< / span > 。
< / code > < / pre > < h5 class = "subject" id = "4._属性值是对象_Object" > 4. 属性值是对象 Object < a class = "hashlink" href = "#4._属性值是对象_Object" > #< / a > < / h5 > < pre > < code > < span class = "token number" > 1< / span > . 'name|count'< span class = "token operator" > :< / span > object
从属性值 object 中随机选取 count 个属性。
< span class = "token number" > 2< / span > . 'name|min-max'< span class = "token operator" > :< / span > object
从属性值 object 中随机选取 min 到 max 个属性。
< / code > < / pre > < h5 class = "subject" id = "5._属性值是数组_Array" > 5. 属性值是数组 Array < a class = "hashlink" href = "#5._属性值是数组_Array" > #< / a > < / h5 > < pre > < code > < span class = "token number" > 1< / span > . 'name|< span class = "token number" > 1< / span > '< span class = "token operator" > :< / span > array
从属性值 array 中随机选取 < span class = "token number" > 1< / span > 个元素,作为最终值。
< span class = "token number" > 2< / span > . 'name|+< span class = "token number" > 1< / span > '< span class = "token operator" > :< / span > array
从属性值 array 中顺序选取 < span class = "token number" > 1< / span > 个元素,作为最终值。
< span class = "token number" > 3< / span > . 'name|min-max'< span class = "token operator" > :< / span > array
通过重复属性值 array 生成一个新数组,重复次数大于等于 min, 小于等于 max。
< span class = "token number" > 4< / span > . 'name|count'< span class = "token operator" > :< / span > array
通过重复属性值 array 生成一个新数组,重复次数为 count。
< / code > < / pre > < h5 class = "subject" id = "6._属性值是函数_Function" > 6. 属性值是函数 Function < a class = "hashlink" href = "#6._属性值是函数_Function" > #< / a > < / h5 > < pre > < code > < span class = "token number" > 1< / span > . 'name'< span class = "token operator" > :< / span > function
执行函数 function, 取其返回值作为最终的属性值, 函数的上下文为属性 'name' 所在的对象。
< / code > < / pre > < h5 class = "subject" id = "7.属性值是正则表达式_RegExp" > 7.属性值是正则表达式 RegExp < a class = "hashlink" href = "#7.属性值是正则表达式_RegExp" > #< / a > < / h5 > < pre > < code > < span class = "token number" > 1< / span > . 'name'< span class = "token operator" > :< / span > regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
例如:
Mock.mock(< span class = "token punctuation" > {< / span >
'regexp1'< span class = "token operator" > :< / span > /< span class = "token punctuation" > [< / span > a-z< span class = "token punctuation" > ]< / span > < span class = "token punctuation" > [< / span > A-Z< span class = "token punctuation" > ]< / span > < span class = "token punctuation" > [< / span > < span class = "token number" > 0< / span > -< span class = "token number" > 9< / span > < span class = "token punctuation" > ]< / span > /< span class = "token punctuation" > ,< / span >
'regexp2'< span class = "token operator" > :< / span > /\w\W\s\S\d\D/< span class = "token punctuation" > ,< / span >
'regexp3'< span class = "token operator" > :< / span > /\d< span class = "token punctuation" > {< / span > < span class = "token number" > 5< / span > < span class = "token punctuation" > ,< / span > < span class = "token number" > 10< / span > < span class = "token punctuation" > }< / span > /
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > )< / span >
// =>
< span class = "token punctuation" > {< / span >
< span class = "token property" > "regexp1"< / span > < span class = "token operator" > :< / span > < span class = "token string" > "pJ7"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token property" > "regexp2"< / span > < span class = "token operator" > :< / span > < span class = "token string" > "F)\fp1G"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token property" > "regexp3"< / span > < span class = "token operator" > :< / span > < span class = "token string" > "561659409"< / span >
< span class = "token punctuation" > }< / span >
< / code > < / pre > < p > < span id = "DPD" > < / span > < / p >
< h4 class = "subject" id = "数据占位符定义规范( Data_Placeholder_Definition, DPD) " > 数据占位符定义规范( Data Placeholder Definition, DPD) < a class = "hashlink" href = "#数据占位符定义规范( Data_Placeholder_Definition, DPD) " > #< / a > < / h4 > < p > 占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。< / p >
< p > 占位符 的格式为:< / p >
< pre > < code > @占位符
@占位符(参数 < span class = "token punctuation" > [< / span > < span class = "token punctuation" > ,< / span > 参数< span class = "token punctuation" > ]< / span > < span class = "token punctuation" > )< / span >
说明:
< span class = "token number" > 1< / span > . 用 @ 来标识其后的字符串是 占位符。
< span class = "token number" > 2< / span > . 占位符 引用的是 Mock.Random 中的方法。
< span class = "token number" > 3< / span > . 通过 Mock.Random.extend(< span class = "token punctuation" > )< / span > 来扩展自定义占位符。
< span class = "token number" > 4< / span > . 占位符 也可以引用 数据模板 中的属性。
< span class = "token number" > 5< / span > . 占位符 会优先引用 数据模板 中的属性。
< span class = "token number" > 6< / span > . 占位符 支持 相对路径 和 绝对路径。
Mock.mock(< span class = "token punctuation" > {< / span >
name< span class = "token operator" > :< / span > < span class = "token punctuation" > {< / span >
first< span class = "token operator" > :< / span > '@FIRST'< span class = "token punctuation" > ,< / span >
middle< span class = "token operator" > :< / span > '@FIRST'< span class = "token punctuation" > ,< / span >
last< span class = "token operator" > :< / span > '@LAST'< span class = "token punctuation" > ,< / span >
full< span class = "token operator" > :< / span > '@first @middle @last'
< span class = "token punctuation" > }< / span >
< span class = "token punctuation" > }< / span > < span class = "token punctuation" > )< / span >
// 上面的示例可以得到如下结果:
< span class = "token punctuation" > {< / span >
< span class = "token property" > "name"< / span > < span class = "token operator" > :< / span > < span class = "token punctuation" > {< / span >
< span class = "token property" > "first"< / span > < span class = "token operator" > :< / span > < span class = "token string" > "Charles"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token property" > "middle"< / span > < span class = "token operator" > :< / span > < span class = "token string" > "Brenda"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token property" > "last"< / span > < span class = "token operator" > :< / span > < span class = "token string" > "Lopez"< / span > < span class = "token punctuation" > ,< / span >
< span class = "token property" > "full"< / span > < span class = "token operator" > :< / span > < span class = "token string" > "Charles Brenda Lopez"< / span >
< span class = "token punctuation" > }< / span >
< span class = "token punctuation" > }< / span >
< / code > < / pre > < h2 class = "subject" id = "未来计划推出功能" > 未来计划推出功能 < a class = "hashlink" href = "#未来计划推出功能" > #< / a > < / h2 > < ol >
< li > 可视化JSON编辑器, 可定义JSON_Schema和mockjs< / li > < li > 支持HTTP和RPC协议< / li > < li > 自动化测试< / li > < li > 多人协作< / li > < / ol >
2017-07-31 21:11:07 +08:00
< / div >
< / div >
< / div >
2017-07-31 20:23:22 +08:00
< / div >
2017-07-31 21:11:07 +08:00
2017-07-31 20:23:22 +08:00
< / div >
< / div >
< footer class = "footer" >
< div class = "copyright" >
© 2016 < a href = "http://ued.qunar.com/ymfe/" > YMFE< / a > Team. Build by < a href = "http://ued.qunar.com/ydoc/" > ydoc< / a > .
< / div >
< / footer >
< / div >
2017-07-31 21:11:07 +08:00
< div class = "open-panel" > < / div >
< div class = "mask" > < / div >
2017-07-31 20:23:22 +08:00
< script src = "source/main.js" > < / script >
< script src = "source/app.js" > < / script >
< script >
var lineHeight = 17.4;
var EXAMPLE_MAX_HEIGHT;
function fold() {
// 折叠code
$('.markdown-body pre').css({
"line-height": lineHeight + "px"
});
$('.markdown-body pre').map(function(i, item) {
var $item = $(item);
var foldnumber = $item.data('foldnumber');
EXAMPLE_MAX_HEIGHT = lineHeight * (foldnumber || 6);
if ($item.height() > EXAMPLE_MAX_HEIGHT) {
$item.css({
"padding-bottom": 30
});
$item.find('code').height(EXAMPLE_MAX_HEIGHT);
$item.append('< span class = "extend" > 展开更多……< / span > ');
};
});
$('.ydoc-example').delegate('.extend', 'click', function() {
var $this = $(this);
$this.removeClass('extend').addClass('fold');
$this.html('折叠代码');
$this.parent().children('.js-code').height('auto');
$this.parent().height('auto');
});
$('.ydoc-example').delegate('.fold', 'click', function() {
var $this = $(this);
var foldnumber = $this.parent().data('foldnumber');
EXAMPLE_MAX_HEIGHT = lineHeight * (foldnumber || 6);
$this.removeClass('fold').addClass('extend');
$this.parent().height(EXAMPLE_MAX_HEIGHT); // pre
$this.parent().children('.js-code').height(EXAMPLE_MAX_HEIGHT); // code
$this.html("展开更多……");
});
}
$(document).ready(fold);
< / script >
< / body >
< / html >