mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-21 05:19:42 +08:00
279 lines
18 KiB
HTML
279 lines
18 KiB
HTML
<!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">
|
||
|
||
<div class="ydoc-container-content " id="readme">
|
||
|
||
<article class="markdown-body">
|
||
<h2 class="subject" id="Mock功能">Mock功能 <a class="hashlink" href="#Mock功能">#</a></h2> <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>
|
||
|
||
<h3 class="subject" id="1_Mock步骤">1 Mock步骤 <a class="hashlink" href="#1_Mock步骤">#</a></h3><h4 class="subject" id="1.1_创建接口">1.1 创建接口 <a class="hashlink" href="#1.1_创建接口">#</a></h4><p>通过点击页面上的"+添加接口"</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>）等信息。</p>
|
||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB680a37ba304768804b23cf2cf36ed40d?method=download&shareKey=0d750695dce3a4c7abf697fa58d24c57" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||
<p>输入Mock规则时它会在右边同步产生一个对应的结果</p>
|
||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB929dce5eed22e1b7e9a10be98ee2ab38?method=download&shareKey=5616ed1d9e09cc38f9cdbb995c892cb5" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||
<p>最后点击保存按钮，保存后将会在"Mock地址"生成一个链接。</p>
|
||
<blockquote>
|
||
<p>Mock地址的域名需要配置 host 指到我们的服务器 ip 地址</p>
|
||
</blockquote>
|
||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB525ea3dadf1f274bbe12943341ba00cb?method=download&shareKey=95dbc9cf7a7646387c55dabf64cad888" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||
<p>取到上面的链接在浏览器中请求就可以得到如下结果。</p>
|
||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB1d1f7dc7b83a8cd6f576953cf45e9719?method=download&shareKey=99b4af9baac527b969543dd0a909d2a1" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||
<p><span id = "mock"></span></p>
|
||
<h3 class="subject" id="2.1_Mock语法规范">2.1 Mock语法规范 <a class="hashlink" href="#2.1_Mock语法规范">#</a></h3><blockquote>
|
||
<p>了解更多Mock详情：<a href="https://github.com/nuysoft/Mock/wiki/Syntax-Specification">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>
|
||
<h3 class="subject" id="数据模板定义规范（Data_Template_Definition，DTD）">数据模板定义规范（Data Template Definition，DTD） <a class="hashlink" href="#数据模板定义规范（Data_Template_Definition，DTD）">#</a></h3><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>下面提供了6种生成规则以及示例包括 String、Number、Boolean、Object、Array、RegExp：</p>
|
||
<h4 class="subject" id="1._属性值是字符串_String">1. 属性值是字符串 String <a class="hashlink" href="#1._属性值是字符串_String">#</a></h4><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><h4 class="subject" id="2._属性值是数字_Number">2. 属性值是数字 Number <a class="hashlink" href="#2._属性值是数字_Number">#</a></h4><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><h4 class="subject" id="3._属性值是布尔型_Boolean">3. 属性值是布尔型 Boolean <a class="hashlink" href="#3._属性值是布尔型_Boolean">#</a></h4><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><h4 class="subject" id="4._属性值是对象_Object">4. 属性值是对象 Object <a class="hashlink" href="#4._属性值是对象_Object">#</a></h4><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><h4 class="subject" id="5._属性值是数组_Array">5. 属性值是数组 Array <a class="hashlink" href="#5._属性值是数组_Array">#</a></h4><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><h4 class="subject" id="6.属性值是正则表达式_RegExp">6.属性值是正则表达式 RegExp <a class="hashlink" href="#6.属性值是正则表达式_RegExp">#</a></h4><pre><code><span class="token number">1</span>. 'name'<span class="token operator">:</span> regexp
|
||
|
||
根据正则表达式 regexp 反向生成可以匹配它的字符串，用于生成自定义格式的字符串。
|
||
|
||
例如：
|
||
<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 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>
|
||
<h3 class="subject" id="数据占位符定义规范（Data_Placeholder_Definition，DPD）">数据占位符定义规范（Data Placeholder Definition，DPD） <a class="hashlink" href="#数据占位符定义规范（Data_Placeholder_Definition，DPD）">#</a></h3><pre><code>占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
|
||
|
||
占位符 的格式为：
|
||
|
||
@占位符
|
||
|
||
说明：
|
||
<span class="token number">1</span>. 用 @ 来标识其后的字符串是 占位符，在YApi提供的Mock输入框在输入“@”后会自动提示占位符。
|
||
|
||
例如：
|
||
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 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>
|
||
</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>
|
||
|
||
</article>
|
||
</div>
|
||
|
||
</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>
|
||
|
||
|
||
|
||
<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>
|