mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2024-12-21 05:19:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

Browse Source
This commit is contained in:
zwjamnsss 2017-08-22 19:59:01 +08:00
commit cdbab9f44e
15 changed files with 118 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/containers/Project/Interface/InterfaceList/InterfaceMenu.js
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react'
import { connect } from 'react-redux';
import PropTypes from 'prop-types'
import { fetchInterfaceList, fetchInterfaceData, deleteInterfaceData, deleteInterfaceCatData, initInterface } from '../../../../reducer/modules/interface.js';
import { getProject } from '../../../../reducer/modules/project.js';
import { Menu, Input, Icon, Tag, Modal, message, Tree, Dropdown } from 'antd';
import AddInterfaceForm from './AddInterfaceForm';
import AddInterfaceCatForm from './AddInterfaceCatForm';
@ -25,7 +26,8 @@ const TreeNode = Tree.TreeNode;
fetchInterfaceData,
deleteInterfaceCatData,
deleteInterfaceData,
initInterface
initInterface,
getProject
}
)
class InterfaceMenu extends Component {
@ -41,7 +43,8 @@ class InterfaceMenu extends Component {
deleteInterfaceData: PropTypes.func,
initInterface: PropTypes.func,
history: PropTypes.object,
router: PropTypes.object
router: PropTypes.object,
getProject: PropTypes.func
}
/**
@ -120,6 +123,7 @@ class InterfaceMenu extends Component {
}
message.success('接口分类添加成功')
this.props.fetchInterfaceList(this.props.projectId)
this.props.getProject(data.project_id)
this.setState({
add_cat_modal_visible: false
});

BIN
doc/images/mock.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
doc/images/ykit.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

55
doc/mock.md
View File

@ -1,34 +1,44 @@
## Mock功能
## Mock介绍
<p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则([点击到Mock规则](#mock)）生成Mock接口，这些接口会自动生成模拟数据，支持复杂的生成逻辑，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。</p>
<p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则([点击到Mock规则](#mock)）生成Mock接口，这些接口会自动生成模拟数据，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台，那么在团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。
**mock地址解析**：yapi平台网址+mock+**您的项目id**+**接口实际请求path**
</p>
<img src="./images/mock.jpg" style="width: 50%" />
### 1 Mock步骤
#### 1.1 创建接口
### 1 如何使用Mock?
### 1.1 最简单最直接的方式
在代码直接请求yapi提供的mock地址，以jQuery为例：
通过点击页面上的"+添加接口"
````javascript
let prefix = 'http://yapi.local.qunar.com:3000/mock/2817'
$.post(prefix+'/baseapi/path', {username: 'xxx'}, function(res){
console.log(res) //返回上图预览部分的数据
})
````
<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 />
### 1.2 基于本地服务器反向代理
输入协议、URL、接口名、请求头、请求参数、Mock规则（[点击到Mock规则](#mock)）等信息。
优点:不用修改项目代码
<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 />
#### 1.2.1 基于nginx反向代理
输入Mock规则时它会在右边同步产生一个对应的结果
```` nginx
location /baseapi
{
proxy_pass http://http://yapi.local.qunar.com:3000/mock/2817/;
}
````
<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 />
最后点击保存按钮，保存后将会在"Mock地址"生成一个链接。
>Mock地址的域名需要配置 host 指到我们的服务器 ip 地址
<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 />
取到上面的链接在浏览器中请求就可以得到如下结果。
<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 />
#### 1.2.2 基于ykit Jerry代理
<img src="./images/ykit.jpg" />
<span id = "mock"></span>
### 2.1 Mock语法规范
>了解更多Mock详情：[Mock.js 官方文档](https://github.com/nuysoft/Mock/wiki/Syntax-Specification)
@ -170,10 +180,3 @@ name: {
"full": "Charles Brenda Lopez"
}
```
## 未来计划推出功能
1. 可视化JSON编辑器，可定义JSON_Schema和mockjs
2. 支持HTTP和RPC协议
3. 自动化测试
4. 多人协作

60
static/doc/api.html
View File

@ -496,7 +496,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -841,7 +841,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
@ -939,7 +939,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -1035,7 +1035,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -1123,7 +1123,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"logout success..."</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -1162,7 +1162,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token string">"ok"</span>
@ -1253,7 +1253,7 @@
<div>示例：</div>
<pre class="ydoc-example" ><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" ><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -1349,7 +1349,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"logout success..."</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -1834,7 +1834,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"ok"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
@ -2047,7 +2047,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -2142,7 +2142,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -2226,7 +2226,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -2298,7 +2298,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
@ -2376,7 +2376,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -2459,7 +2459,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -2675,7 +2675,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -2897,7 +2897,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code">
<pre class="ydoc-example" data-foldnumber=10><code>
<span class="token comment" spellcheck="true">//请求示例</span>
<span class="token punctuation">{</span>
<span class="token string">"id"</span><span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
@ -3067,7 +3067,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"ok"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -3413,7 +3413,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code">
<pre class="ydoc-example" data-foldnumber=10><code>
<span class="token comment" spellcheck="true">//请求 /interface/add</span>
<span class="token comment" spellcheck="true">//header Content-Type:application/json</span>
@ -3548,7 +3548,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">.</span><span class="token operator">/</span>api<span class="token operator">/</span><span class="token keyword">interface</span><span class="token operator">/</span><span class="token keyword">get</span><span class="token punctuation">.</span>json</code></pre>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">.</span><span class="token operator">/</span>api<span class="token operator">/</span><span class="token keyword">interface</span><span class="token operator">/</span><span class="token keyword">get</span><span class="token punctuation">.</span>json</code></pre>
</div>
@ -3613,7 +3613,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">.</span><span class="token operator">/</span>api<span class="token operator">/</span><span class="token keyword">interface</span><span class="token operator">/</span>list<span class="token punctuation">.</span>json</code></pre>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">.</span><span class="token operator">/</span>api<span class="token operator">/</span><span class="token keyword">interface</span><span class="token operator">/</span>list<span class="token punctuation">.</span>json</code></pre>
</div>
@ -3838,7 +3838,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -3911,7 +3911,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token punctuation">{</span>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token punctuation">{</span>
<span class="token string">"errcode"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"errmsg"</span><span class="token punctuation">:</span> <span class="token string">"success"</span><span class="token punctuation">,</span>
<span class="token string">"data"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
@ -3994,7 +3994,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token operator">/</span>follow<span class="token operator">/</span>list</code></pre>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token operator">/</span>follow<span class="token operator">/</span>list</code></pre>
</div>
@ -4059,7 +4059,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token operator">/</span>follow<span class="token operator">/</span>del</code></pre>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token operator">/</span>follow<span class="token operator">/</span>del</code></pre>
</div>
@ -4148,7 +4148,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token operator">/</span>follow<span class="token operator">/</span>add</code></pre>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token operator">/</span>follow<span class="token operator">/</span>add</code></pre>
</div>
@ -4901,7 +4901,7 @@
<div>示例：</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code"><span class="token operator">/</span>log<span class="token operator">/</span>list</code></pre>
<pre class="ydoc-example" data-foldnumber=10><code><span class="token operator">/</span>log<span class="token operator">/</span>list</code></pre>
</div>
@ -4956,8 +4956,8 @@
var $this = $(this);
$this.removeClass('extend').addClass('fold');
$this.html('折叠代码');
$this.parent().children('.js-code').height('auto');
$this.parent().height('auto');
$this.prev().height('auto');
$this.prev().parent().height('auto');
});
$('.ydoc-example').delegate('.fold', 'click', function() {
var $this = $(this);
@ -4965,7 +4965,7 @@
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.prev().height(EXAMPLE_MAX_HEIGHT); // code
$this.html("展开更多……");
});
}

BIN
static/doc/images/mock.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
static/doc/images/ykit.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

6
static/doc/index.html
View File

@ -175,8 +175,8 @@
var $this = $(this);
$this.removeClass('extend').addClass('fold');
$this.html('折叠代码');
$this.parent().children('.js-code').height('auto');
$this.parent().height('auto');
$this.prev().height('auto');
$this.prev().parent().height('auto');
});
$('.ydoc-example').delegate('.fold', 'click', function() {
var $this = $(this);
@ -184,7 +184,7 @@
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.prev().height(EXAMPLE_MAX_HEIGHT); // code
$this.html("展开更多……");
});
}

58
static/doc/mock.html
View File

@ -68,30 +68,32 @@
<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>通过点击页面上的&quot;+添加接口&quot;</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>最后点击保存按钮，保存后将会在&quot;Mock地址&quot;生成一个链接。</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>
<h2 class="subject" id="Mock介绍">Mock介绍 <a class="hashlink" href="#Mock介绍">#</a></h2><p> <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>
<p> <strong>mock地址解析</strong>：yapi平台网址+mock+<strong>您的项目id</strong>+<strong>接口实际请求path</strong></p>
<p> </p>
<img src="./images/mock.jpg" /></p>
<h3 class="subject" id="1 如何使用Mock?">1 如何使用Mock? <a class="hashlink" href="#1 如何使用Mock?">#</a></h3><h3 class="subject" id="1.1 最简单最直接的方式">1.1 最简单最直接的方式 <a class="hashlink" href="#1.1 最简单最直接的方式">#</a></h3><p>在代码直接请求yapi提供的mock地址，以jQuery为例：</p>
<pre><code class="lang-javascript"><span class="token keyword">let</span> prefix <span class="token operator">=</span> <span class="token string">'http://yapi.local.qunar.com:3000/mock/2817'</span>
$<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span>prefix<span class="token operator">+</span><span class="token string">'/baseapi/path'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>username<span class="token punctuation">:</span> <span class="token string">'xxx'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//返回上图预览部分的数据</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
<h3 class="subject" id="1.2 基于本地服务器反向代理">1.2 基于本地服务器反向代理 <a class="hashlink" href="#1.2 基于本地服务器反向代理">#</a></h3><p>优点:不用修改项目代码</p>
<h4 class="subject" id="1.2.1 基于nginx反向代理">1.2.1 基于nginx反向代理 <a class="hashlink" href="#1.2.1 基于nginx反向代理">#</a></h4><pre><code class="lang-nginx"><span class="token keyword">location</span> <span class="token operator">/</span>baseapi
<span class="token punctuation">{</span>
<span class="token keyword">proxy_pass</span> <span class="token keyword">http</span><span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token keyword">http</span><span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>yapi<span class="token punctuation">.</span>local<span class="token punctuation">.</span>qunar<span class="token punctuation">.</span>com<span class="token punctuation">:</span><span class="token number">3000</span><span class="token operator">/</span>mock<span class="token operator">/</span><span class="token number">2817</span><span class="token operator">/</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h4 class="subject" id="1.2.2 基于ykit Jerry代理">1.2.2 基于ykit Jerry代理 <a class="hashlink" href="#1.2.2 基于ykit Jerry代理">#</a></h4><p><img src="./images/ykit.jpg" /></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>
<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>
<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>@占位符" 同时也指定了最终值的初始值和类型）
@ -107,14 +109,14 @@
'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：</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
<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
</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。
@ -140,21 +142,21 @@ Mock.mock(<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
</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
</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
</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> 个元素，作为最终值。
@ -170,7 +172,7 @@ Mock.mock(<span class="token punctuation">{</span>
通过重复属性值 array 生成一个新数组，重复次数为 count。
</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>占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
<h3 class="subject" id="数据占位符定义规范（Data Placeholder Definition，DPD）">数据占位符定义规范（Data Placeholder Definition，DPD） <a class="hashlink" href="#数据占位符定义规范（Data Placeholder Definition，DPD）">#</a></h3><pre><code>占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符 的格式为：
@ -193,9 +195,7 @@ name<span class="token operator">:</span> <span class="token punctuation">{</spa
<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>
</code></pre>
</article>
</div>
@ -240,8 +240,8 @@ name<span class="token operator">:</span> <span class="token punctuation">{</spa
var $this = $(this);
$this.removeClass('extend').addClass('fold');
$this.html('折叠代码');
$this.parent().children('.js-code').height('auto');
$this.parent().height('auto');
$this.prev().height('auto');
$this.prev().parent().height('auto');
});
$('.ydoc-example').delegate('.fold', 'click', function() {
var $this = $(this);
@ -249,7 +249,7 @@ name<span class="token operator">:</span> <span class="token punctuation">{</spa
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.prev().height(EXAMPLE_MAX_HEIGHT); // code
$this.html("展开更多……");
});
}

16
static/doc/source/app.js
View File

@ -129,8 +129,7 @@ $(document).ready(function() {
});
$('.markdown-body pre').map(function(i, item) {
$(item).addClass('ydoc-example').append('<div class="ui-copy js-copy" data-clipboard-action="copy" data-clipboard-target=".js-code-' + i + '" data-copy-number="' + i + '">copy</div><div class="copy-tip copy-tip-' + i + '">已复制</div>');
$(item).children('code').addClass('js-code-'+i);
$(item).addClass('ydoc-example');
});
var winHeight = $(window).height() - 44,
@ -214,17 +213,4 @@ $(document).ready(function() {
return false;
}
}
// 代码复制功能
var clipboard = new Clipboard('.js-copy');
clipboard.on('success', function(e) {
var copyNumber = $(e.trigger).attr('data-copy-number');
$('.copy-tip-'+copyNumber).show();
setTimeout(function() {
$('.copy-tip-'+copyNumber).hide();
}, 1000);
e.clearSelection();
});
});

2
static/doc/source/code.css
View File

File diff suppressed because one or more lines are too long

2
static/doc/source/main.css
View File

File diff suppressed because one or more lines are too long

12
static/doc/source/main.js
View File

File diff suppressed because one or more lines are too long

12
static/doc/start.html
View File

@ -68,21 +68,21 @@
<div class="ydoc-container-content " id="readme">
<article class="markdown-body">
<h2 class="subject" id="快速开始">快速开始 <a class="hashlink" href="#快速开始">#</a></h2><h3 class="subject" id="1_创建项目分组">1 创建项目分组 <a class="hashlink" href="#1_创建项目分组">#</a></h3><h4 class="subject" id="1.1_项目分组">1.1 项目分组 <a class="hashlink" href="#1.1_项目分组">#</a></h4><p>登录之后进到项目首页，左边侧边栏显示的即分组列表。</p>
<h2 class="subject" id="快速开始">快速开始 <a class="hashlink" href="#快速开始">#</a></h2><h3 class="subject" id="1 创建项目分组">1 创建项目分组 <a class="hashlink" href="#1 创建项目分组">#</a></h3><h4 class="subject" id="1.1 项目分组">1.1 项目分组 <a class="hashlink" href="#1.1 项目分组">#</a></h4><p>登录之后进到项目首页，左边侧边栏显示的即分组列表。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/842107-d90ca4b3242fa760.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "200" style="margin-left:170px;display:block;" alt="图片名称" align=center /></p>
<p>管理员有权限添加或删除分组。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/842107-a0d4d9a98003896a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "500" style="margin-left:170px;display:block;" alt="图片名称" align=center /></p>
<blockquote>
<p>分组名称具有唯一性</p>
</blockquote>
<h4 class="subject" id="1.2_项目">1.2 项目 <a class="hashlink" href="#1.2_项目">#</a></h4><p>选中不同的分组，右边会显示该分组下的项目列表。</p>
<h4 class="subject" id="1.2 项目">1.2 项目 <a class="hashlink" href="#1.2 项目">#</a></h4><p>选中不同的分组，右边会显示该分组下的项目列表。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/842107-137bcae58b84715e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<p>创建项目需要填写项目名称，项目线上域名（添加完成后可配置项目其他环境域名），项目接口基本路径（接口路径前面相同的部分）以及项目描述。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/842107-360a50ddb746f73d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<blockquote>
<p>项目『线上域名 + 基本路径』具有唯一性</p>
</blockquote>
<h4 class="subject" id="1.3_接口">1.3 接口 <a class="hashlink" href="#1.3_接口">#</a></h4><p>点击项目名称，进入该项目接口列表。</p>
<h4 class="subject" id="1.3 接口">1.3 接口 <a class="hashlink" href="#1.3 接口">#</a></h4><p>点击项目名称，进入该项目接口列表。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/842107-e858005f714f4889.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<p>点击编辑，进入接口详情页（之后接口详情页和编辑也会分开），可以编辑接口或者请求测试真实接口。</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>
@ -132,8 +132,8 @@
var $this = $(this);
$this.removeClass('extend').addClass('fold');
$this.html('折叠代码');
$this.parent().children('.js-code').height('auto');
$this.parent().height('auto');
$this.prev().height('auto');
$this.prev().parent().height('auto');
});
$('.ydoc-example').delegate('.fold', 'click', function() {
var $this = $(this);
@ -141,7 +141,7 @@
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.prev().height(EXAMPLE_MAX_HEIGHT); // code
$this.html("展开更多……");
});
}

12
static/doc/static/server/controllers/interfaceCol.js.html vendored
View File

@ -223,9 +223,9 @@ class interfaceColController extends baseController{
async upCol(ctx){
try{
let params = ctx.request.body;
let result = await this.caseModel.up(params.col_id, {
name: params.col_name,
desc: params.col_desc,
let result = await this.colModel.up(params.col_id, {
name: params.name,
desc: params.desc,
up_time: yapi.commons.time()
})
ctx.body = yapi.commons.resReturn(result)
@ -279,7 +279,7 @@ class interfaceColController extends baseController{
async delCol(ctx){
try{
let id = ctx.request.body.colid;
let id = ctx.query.col_id;
let colData = await this.colModel.get(id);
if(!colData){
ctx.body = yapi.commons.resReturn(null, 400, "不存在的id")
@ -292,7 +292,7 @@ class interfaceColController extends baseController{
}
}
let result = await this.colModel.del(caseid);
let result = await this.colModel.del(id);
await this.caseModel.delByCol(id)
return ctx.body = yapi.commons.resReturn(result);
@ -309,7 +309,7 @@ class interfaceColController extends baseController{
async delCase(ctx){
try{
let caseid = ctx.request.body.caseid;
let caseid = ctx.query.caseid;
let caseData = await this.caseModel.get(caseid);
if(!caseData){
ctx.body = yapi.commons.resReturn(null, 400, "不存在的caseid")