This commit is contained in:
喻希里 2017-09-02 21:21:56 +08:00
commit 8e1c11b8e6
16 changed files with 1002 additions and 954 deletions

View File

@ -254,8 +254,8 @@ class InterfaceMenu extends Component {
case 'DELETE': color = 'red'; break;
default: color = "yellow";
}
return <TreeNode
title={<div onMouseEnter={() => this.enterItem(item._id)} onMouseLeave={this.leaveItem} >
return <TreeNode
title={<div className="aa" onMouseEnter={() => this.enterItem(item._id)} onMouseLeave={this.leaveItem} >
<Link className="interface-item" to={"/project/" + matchParams.id + "/interface/api/" + item._id} ><Tag color={color} className="btn-http" >{item.method}</Tag>{item.title}</Link>
<Icon type='delete' className="interface-delete-icon" onClick={() => { this.showConfirm(item._id) }} style={{ display: this.state.delIcon == item._id ? 'block' : 'none' }} />
</div>}

View File

@ -63,7 +63,9 @@
width:auto !important;
}
.interface-item{
display: inline
display: inline-block;
width: 180px;
overflow: hidden;
}
.interface-item-nav{
line-height:25px;

View File

@ -1,5 +1,216 @@
## 介绍
## 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>
**mock地址解析**yapi平台网址+mock+**您的项目id**+**接口实际请求path**
## 模板语法
mockd地址 http://yapi.corp.qunar.com/mock/29/api/hackathon/login
项目id可以在项目设置里查看到
## 定义mock数据示例
```
{
"status|0-1": 0, //接口状态
"message": "请求完成", //消息提示
"data": {
"counts":"@integer", //统计数量
"totalSubjectType|4-10": [
{
"subjectName|regexp": "大数据|机器学习|工具", //主题名
"subjectType|+1": 1 //类型
}
],
"data":[
{
"name": "@name", //用户名
"email": "@email", //email
"time": "@datetime" //时间
}
]}
}
```
## yapiMock跟mockjs区别
因为yapi基于json定义mock无法使用mockjs原有的函数功能正则表达式需要基于rule书写示例如下
```
{
"name|regexp": "[a-z0-9_]+?",
"type|regexp": "json|text|xml" //枚举数据类型可这样实现
}
```
## 如何使用Mock?
### 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) //返回上图预览部分的数据
})
````
### 2 基于本地服务器反向代理
优点:不用修改项目代码
#### 2.1 基于nginx反向代理
```` nginx
location /baseapi
{
proxy_pass http://yapi.corp.qunar.com/mock/2817/baseapi; #baseapi后面没有"/"
}
````
#### 2.2 基于ykit Jerry代理
假设您本地服务器访问地址是: http://xxx.com
<img src="./images/ykit.jpg" />
## Mock语法规范
>了解更多Mock详情[Mock.js 官方文档](https://github.com/nuysoft/Mock/wiki/Syntax-Specification)
Mock.js 的语法规范包括两部分:
[1. 数据模板定义规范Data Template DefinitionDTD](#DTD)
[2. 数据占位符定义规范Data Placeholder DefinitionDPD](#DPD)
<span id = "DTD"></span>
### 数据模板定义规范Data Template DefinitionDTD
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
```
// 属性名 name (与生成规则之间用 "|" 隔开)
// 生成规则 rule生成规则有7种详见下面的生成规则
// 属性值 value可以含有 "@占位符" 同时也指定了最终值的初始值和类型)
'name|rule': value
生成规则:
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
```
下面提供了6种生成规则以及示例包括 String、Number、Boolean、Object、Array
### 1. 属性值是字符串 String
```
1. 'name|min-max': string
通过重复 string 生成一个字符串,重复次数大于等于 min小于等于 max。
2. 'name|count': string
通过重复 string 生成一个字符串,重复次数等于 count。
```
### 2. 属性值是数字 Number
```
1. 'name|+1': number
属性值自动加 1初始值为 number。
2. 'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型。
3. 'name|min-max.dmin-dmax': number
生成一个浮点数,整数部分大于等于 min、小于等于 max小数部分保留 dmin 到 dmax 位。
例如:
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
// =>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}
```
### 3. 属性值是布尔型 Boolean
```
1. 'name|1': boolean
随机生成一个布尔值,值为 true 的概率是 1/2值为 false 的概率同样是 1/2。
2. 'name|min-max': value
随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。
```
### 4. 属性值是对象 Object
```
1. 'name|count': object
从属性值 object 中随机选取 count 个属性。
2. 'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性。
```
### 5. 属性值是数组 Array
```
1. 'name|1': array
从属性值 array 中随机选取 1 个元素,作为最终值。
2. 'name|+1': array
从属性值 array 中顺序选取 1 个元素,作为最终值。
3. 'name|min-max': array
通过重复属性值 array 生成一个新数组,重复次数大于等于 min小于等于 max。
4. 'name|count': array
通过重复属性值 array 生成一个新数组,重复次数为 count。
```
<span id = "DPD"></span>
### 数据占位符定义规范Data Placeholder DefinitionDPD
```
占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。
占位符 的格式为:
@占位符
说明:
1. 用 @ 来标识其后的字符串是 占位符在YApi提供的Mock输入框在输入“@”后会自动提示占位符。
例如:
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
// 上面的示例可以得到如下结果:
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
```

View File

@ -260,6 +260,10 @@
<li >
<a href="#-interface-del">/interface/del</a>
</li>
<li >
<a href="#-interface-interUpload">/interface/interUpload</a>
</li>
</ul>
@ -2883,7 +2887,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/project.js.html#500" target="_blank">./server/controllers/project.js:500</a>
<a href="./static/server/controllers/project.js.html#503" target="_blank">./server/controllers/project.js:503</a>
</p>
@ -3031,7 +3035,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/project.js.html#583" target="_blank">./server/controllers/project.js:583</a>
<a href="./static/server/controllers/project.js.html#586" target="_blank">./server/controllers/project.js:586</a>
</p>
@ -3126,7 +3130,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/project.js.html#637" target="_blank">./server/controllers/project.js:637</a>
<a href="./static/server/controllers/project.js.html#640" target="_blank">./server/controllers/project.js:640</a>
</p>
@ -3191,7 +3195,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#21" target="_blank">./server/controllers/interface.js:21</a>
<a href="./static/server/controllers/interface.js.html#22" target="_blank">./server/controllers/interface.js:22</a>
</p>
@ -3512,7 +3516,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#167" target="_blank">./server/controllers/interface.js:167</a>
<a href="./static/server/controllers/interface.js.html#168" target="_blank">./server/controllers/interface.js:168</a>
</p>
@ -3577,7 +3581,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#192" target="_blank">./server/controllers/interface.js:192</a>
<a href="./static/server/controllers/interface.js.html#193" target="_blank">./server/controllers/interface.js:193</a>
</p>
@ -3642,7 +3646,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#254" target="_blank">./server/controllers/interface.js:254</a>
<a href="./static/server/controllers/interface.js.html#255" target="_blank">./server/controllers/interface.js:255</a>
</p>
@ -3875,7 +3879,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#423" target="_blank">./server/controllers/interface.js:423</a>
<a href="./static/server/controllers/interface.js.html#427" target="_blank">./server/controllers/interface.js:427</a>
</p>
@ -3927,6 +3931,327 @@
<span class="token punctuation">}</span></code></pre>
</div>
<div class="con-list-item">
<blockquote class="api">
<h3 id="-interface-interUpload" class="page-header subject">
/interface/interUpload
<span class="ui-badge">POST</span>
<a class="hashlink" href="#-interface-interUpload">#</a>
</h3>
</blockquote>
<p>
<small class="text-muted">描述:</small>
接口数据上传
</p>
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interface.js.html#613" target="_blank">./server/controllers/interface.js:613</a>
</p>
<p>
<small class="text-muted">参数:</small>
</p>
<div class="docs-table">
<table class="yo-table yo-table-border">
<colgroup>
<col class="c1">
<col class="c2">
<col class="c3">
<col class="c4">
</colgroup>
<thead>
<tr class="active">
<th>参数名</th>
<th>类型</th>
<th>描述</th>
<th>必选</th>
<th>支持版本</th>
</tr>
</thead>
<tr>
<td>project_id</td>
<td>Number</td>
<td>项目id不能为空</td>
<td>
<i class="yo-ico glyphicon glyphicon-ok text-success"></i>
</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>String</td>
<td>接口标题,不能为空</td>
<td>
<i class="yo-ico glyphicon glyphicon-ok text-success"></i>
</td>
<td></td>
</tr>
<tr>
<td>path</td>
<td>String</td>
<td>接口请求路径,不能为空</td>
<td>
<i class="yo-ico glyphicon glyphicon-ok text-success"></i>
</td>
<td></td>
</tr>
<tr>
<td>method</td>
<td>String</td>
<td>请求方式</td>
<td>
<i class="yo-ico glyphicon glyphicon-ok text-success"></i>
</td>
<td></td>
</tr>
<tr>
<td>req_headers</td>
<td>Array</td>
<td>请求的header信息</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_headers[].name</td>
<td>String</td>
<td>请求的header信息名</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_headers[].value</td>
<td>String</td>
<td>请求的header信息值</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_headers[].required</td>
<td>Boolean</td>
<td>是否是必须,默认为否</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_headers[].desc</td>
<td>String</td>
<td>header描述</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_body_type</td>
<td>String</td>
<td>请求参数方式,有["form", "json", "text", "xml"]四种</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_params</td>
<td>Array</td>
<td>name, desc两个参数</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_body_form</td>
<td>Mixed</td>
<td>请求参数,如果请求方式是form参数是Array数组其他格式请求参数是字符串</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_body_form[].name</td>
<td>String</td>
<td>请求参数名</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_body_form[].value</td>
<td>String</td>
<td>请求参数值可填写生成规则mock。如@email随机生成一条email</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_body_form[].type</td>
<td>String</td>
<td>请求参数类型,有["text", "file"]两种</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>req_body_other</td>
<td>String</td>
<td>非form类型的请求参数可保存到此字段</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>res_body_type</td>
<td>String</td>
<td>相应信息的数据格式,有["json", "text", "xml"]三种</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>res_body</td>
<td>String</td>
<td>响应信息可填写任意字符串如果res_body_type是json,则会调用mock功能</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>desc</td>
<td>String</td>
<td>接口描述</td>
<td>
</td>
<td></td>
</tr>
</table>
</div>
<div>示例:</div>
<pre class="ydoc-example" data-foldnumber=10><code class="js-code">
<span class="token comment" spellcheck="true">//请求 /interface/add</span>
<span class="token comment" spellcheck="true">//header Content-Type:application/json</span>
<span class="token punctuation">{</span>
<span class="token string">"title"</span><span class="token punctuation">:</span> <span class="token string">"testapi"</span><span class="token punctuation">,</span>
<span class="token string">"desc"</span><span class="token punctuation">:</span> <span class="token string">"api"</span><span class="token punctuation">,</span>
<span class="token string">"method"</span><span class="token punctuation">:</span> <span class="token string">"post"</span><span class="token punctuation">,</span>
<span class="token string">"path"</span><span class="token punctuation">:</span> <span class="token string">"/testapi"</span><span class="token punctuation">,</span>
<span class="token string">"project_id"</span><span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token string">"req_headers"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string">"key"</span><span class="token punctuation">:</span> <span class="token string">"h"</span><span class="token punctuation">,</span>
<span class="token string">"value"</span><span class="token punctuation">:</span> <span class="token string">"t"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token string">"req_params_type"</span><span class="token punctuation">:</span> <span class="token string">"form"</span><span class="token punctuation">,</span>
<span class="token string">"req_params"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string">"name"</span><span class="token punctuation">:</span> <span class="token string">"uid"</span><span class="token punctuation">,</span>
<span class="token string">"value"</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
<span class="token string">"type"</span><span class="token punctuation">:</span> <span class="token string">"text"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string">"name"</span><span class="token punctuation">:</span> <span class="token string">"gid"</span><span class="token punctuation">,</span>
<span class="token string">"value"</span><span class="token punctuation">:</span> <span class="token number">1001</span><span class="token punctuation">,</span>
<span class="token string">"type"</span><span class="token punctuation">:</span> <span class="token string">"text"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token string">"res_body_type"</span><span class="token punctuation">:</span> <span class="token string">"json"</span><span class="token punctuation">,</span>
<span class="token string">"res_body"</span><span class="token punctuation">:</span> <span class="token string">"{\"tt\": 222}"</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">//返回结果</span>
<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>
<span class="token string">"__v"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"_id"</span><span class="token punctuation">:</span> <span class="token number">422</span><span class="token punctuation">,</span>
<span class="token string">"title"</span><span class="token punctuation">:</span> <span class="token string">"testapi"</span><span class="token punctuation">,</span>
<span class="token string">"project_id"</span><span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token string">"path"</span><span class="token punctuation">:</span> <span class="token string">"/testapi"</span><span class="token punctuation">,</span>
<span class="token string">"desc"</span><span class="token punctuation">:</span> <span class="token string">"api"</span><span class="token punctuation">,</span>
<span class="token string">"method"</span><span class="token punctuation">:</span> <span class="token string">"post"</span><span class="token punctuation">,</span>
<span class="token string">"req_params_type"</span><span class="token punctuation">:</span> <span class="token string">"form"</span><span class="token punctuation">,</span>
<span class="token string">"res_body"</span><span class="token punctuation">:</span> <span class="token string">"{\"tt\": 222}"</span><span class="token punctuation">,</span>
<span class="token string">"res_body_type"</span><span class="token punctuation">:</span> <span class="token string">"json"</span><span class="token punctuation">,</span>
<span class="token string">"uid"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token string">"add_time"</span><span class="token punctuation">:</span> <span class="token number">1499658569</span><span class="token punctuation">,</span>
<span class="token string">"up_time"</span><span class="token punctuation">:</span> <span class="token number">1499658569</span><span class="token punctuation">,</span>
<span class="token string">"req_params_form"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string">"name"</span><span class="token punctuation">:</span> <span class="token string">"uid"</span><span class="token punctuation">,</span>
<span class="token string">"value"</span><span class="token punctuation">:</span> <span class="token string">"100"</span><span class="token punctuation">,</span>
<span class="token string">"_id"</span><span class="token punctuation">:</span> <span class="token string">"5962f94940a7a5767088fcc0"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string">"name"</span><span class="token punctuation">:</span> <span class="token string">"gid"</span><span class="token punctuation">,</span>
<span class="token string">"value"</span><span class="token punctuation">:</span> <span class="token string">"1001"</span><span class="token punctuation">,</span>
<span class="token string">"_id"</span><span class="token punctuation">:</span> <span class="token string">"5962f94940a7a5767088fcbf"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token string">"req_headers"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string">"value"</span><span class="token punctuation">:</span> <span class="token string">"t"</span><span class="token punctuation">,</span>
<span class="token string">"_id"</span><span class="token punctuation">:</span> <span class="token string">"5962f94940a7a5767088fcc1"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</div>
@ -4804,7 +5129,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interfaceCol.js.html#329" target="_blank">./server/controllers/interfaceCol.js:329</a>
<a href="./static/server/controllers/interfaceCol.js.html#330" target="_blank">./server/controllers/interfaceCol.js:330</a>
</p>
@ -4878,7 +5203,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interfaceCol.js.html#370" target="_blank">./server/controllers/interfaceCol.js:370</a>
<a href="./static/server/controllers/interfaceCol.js.html#371" target="_blank">./server/controllers/interfaceCol.js:371</a>
</p>
@ -4938,7 +5263,7 @@
<p>
<small class="text-muted">源码位置:</small>
<a href="./static/server/controllers/interfaceCol.js.html#412" target="_blank">./server/controllers/interfaceCol.js:412</a>
<a href="./static/server/controllers/interfaceCol.js.html#413" target="_blank">./server/controllers/interfaceCol.js:413</a>
</p>

View File

@ -30,6 +30,7 @@ import interfaceCatModel from '../models/interfaceCat.js';
import interfaceCaseModel from '../models/interfaceCase.js'
import followModel from '../models/follow.js'
import _ from 'underscore';
import url from 'url';
import baseController from './base.js';
import yapi from '../yapi.js';
import userModel from '../models/user.js';
@ -164,7 +165,6 @@ class interfaceController extends baseController {
let result = await this.Model.save(data);
let project = await this.projectModel.getBaseInfo(params.project_id);
this.catModel.get(params.catid).then((cate) => {
let username = this.getUsername();
let title = `用户 "${username}" 为分类 "${cate.name}" 添加了接口 "${data.title}"`
@ -175,15 +175,16 @@ class interfaceController extends baseController {
username: username,
typeid: params.project_id
});
let interfaceUrl = `http://${ctx.request.host}/project/${params.project_id}/interface/api/${result._id}`
this.sendNotice(params.project_id, {
title: `${username} 新增了接口 ${data.title}`,
content: `<div><h3>${username}新增了接口(${data.title})</h3>
<p>项目名:${project.name}</p>
<p>修改用户: "${username}"</p>
<p>接口名: <a href="${interfaceUrl}">${data.title}</a></p>
<p>接口路径: [${data.method}]${data.path}</p></div>`
})
//let project = await this.projectModel.getBaseInfo(params.project_id);
// let interfaceUrl = `http://${ctx.request.host}/project/${params.project_id}/interface/api/${result._id}`
// this.sendNotice(params.project_id, {
// title: `${username} 新增了接口 ${data.title}`,
// content: `<div><h3>${username}新增了接口(${data.title})</h3>
// <p>项目名:${project.name}</p>
// <p>修改用户: "${username}"</p>
// <p>接口名: <a href="${interfaceUrl}">${data.title}</a></p>
// <p>接口路径: [${data.method}]${data.path}</p></div>`
// })
});
ctx.body = yapi.commons.resReturn(result);
@ -321,7 +322,7 @@ class interfaceController extends baseController {
let id = ctx.request.body.id;
params.message = params.message || '没有改动日志';
params.message = params.message || '';
params.message = params.message.replace(/\n/g, "<br>")
if (!id) {
@ -378,6 +379,7 @@ class interfaceController extends baseController {
data.req_params = params.req_params;
} else {
data.type = 'static'
data.req_params = [];
}
if (!_.isUndefined(params.req_query)) {
@ -429,17 +431,19 @@ class interfaceController extends baseController {
});
});
}
let project = await this.projectModel.getBaseInfo(interfaceData.project_id);
let interfaceUrl = `http://${ctx.request.host}/project/${interfaceData.project_id}/interface/api/${id}`
this.sendNotice(interfaceData.project_id, {
title: `${username} 更新了接口`,
content: `<div><h3>${username}更新了接口(${data.title})</h3>
<p>项目名:${project.name} </p>
<p>修改用户: ${username}</p>
<p>接口名: <a href="${interfaceUrl}">${data.title}</a></p>
<p>接口路径: [${data.method}]${data.path}</p>
<p>详细改动日志: ${params.message}</p></div>`
})
if (params.switch_notice === true) {
let project = await this.projectModel.getBaseInfo(interfaceData.project_id);
let interfaceUrl = `http://${ctx.request.host}/project/${interfaceData.project_id}/interface/api/${id}`
this.sendNotice(interfaceData.project_id, {
title: `${username} 更新了接口`,
content: `<div><h3>${username}更新了接口(${data.title})</h3>
<p>项目名:${project.name} </p>
<p>修改用户: ${username}</p>
<p>接口名: <a href="${interfaceUrl}">${data.title}</a></p>
<p>接口路径: [${data.method}]${data.path}</p>
<p>详细改动日志: ${params.message}</p></div>`
})
}
ctx.body = yapi.commons.resReturn(result);
} catch (e) {
@ -632,6 +636,232 @@ class interfaceController extends baseController {
} catch (e) {
yapi.commons.resReturn(null, 400, e.message)
}
}
/**
* 接口数据上传
* @interface /interface/interUpload
* @method POST
* @category interface
* @foldnumber 10
* @param {Number} project_id 项目id不能为空
* @param {String} title 接口标题,不能为空
* @param {String} path 接口请求路径,不能为空
* @param {String} method 请求方式
* @param {Array} [req_headers] 请求的header信息
* @param {String} [req_headers[].name] 请求的header信息名
* @param {String} [req_headers[].value] 请求的header信息值
* @param {Boolean} [req_headers[].required] 是否是必须,默认为否
* @param {String} [req_headers[].desc] header描述
* @param {String} [req_body_type] 请求参数方式,有["form", "json", "text", "xml"]四种
* @param {Array} [req_params] name, desc两个参数
* @param {Mixed} [req_body_form] 请求参数,如果请求方式是form参数是Array数组其他格式请求参数是字符串
* @param {String} [req_body_form[].name] 请求参数名
* @param {String} [req_body_form[].value] 请求参数值可填写生成规则mock。如@email随机生成一条email
* @param {String} [req_body_form[].type] 请求参数类型,有["text", "file"]两种
* @param {String} [req_body_other] 非form类型的请求参数可保存到此字段
* @param {String} [res_body_type] 相应信息的数据格式,有["json", "text", "xml"]三种
* @param {String} [res_body] 响应信息可填写任意字符串如果res_body_type是json,则会调用mock功能
* @param {String} [desc] 接口描述
* @returns {Object}
* @example ./api/interface/add.json
*/
async interUpload(ctx) {
let interData = ctx.request.body.interData;
let project_id = ctx.request.body.project_id;
let request = interData.requests;
let data1 = [];
let catid = ctx.request.body.catid;
let auth = await this.checkAuth(project_id, 'project', 'danger');
if (!auth) {
return ctx.body = yapi.commons.resReturn(null, 400, '没有权限');
}
if (!project_id) {
return ctx.body = yapi.commons.resReturn(null, 400, '项目id不能为空');
}
if (!catid) {
return ctx.body = yapi.commons.resReturn(null, 400, '分类id不能为空');
}
const len = request.length;
let successNum = len;
if(request &&len){
for(let i = 0;i<len;i++){
try {
let path = url.parse(request[i].url.replace(/{{(\w+)}}/,'')).path;
let reg = /^(\w+):\/\/([^\/:]*)(?::(\d+))?\/([^\/\?]*)(\/.*)/;
// let path = request[i].url;
// let result = path.match(reg);
// if(result){
// path = result[4]+ result[5];
// path = path.split('?')[0].replace(/{{(\w+)}}/,'').replace(/\/$/,'');
// if(path.indexOf("/") > 0){
// path = '/'+ path;
// }
// }else{
// // path.replace(/\{\{\ [0-9a-zA-Z-_]* }\}/g,'');
// path = path.replace(/{{(\w+)}}/,'');
// if(path.indexOf("/") > 0){
// path = '/'+ path;
// }
// }
let title = request[i].name;
if(reg.test(request[i].name)){
title = path;
}
let inter = {
project_id: project_id,
title: title,
path: path,
method: request[i].method,
req_headers: '',
// req_body_type: request[i].dataMode,
req_params: '',
req_body_form: '',
req_body_other: '',
res_body_type: 'json',
res_body: '',
desc: request[i].description
};
console.log(inter.path);
// req_body_type req_body_form
if(request[i].dataMode){
// console.log(i);
if(request[i].dataMode === 'params' || request[i].dataMode==='urlencoded'){
inter.req_body_type = 'form';
inter.req_body_form = [];
const data = request[i].data;
for(let item in data){
inter.req_body_form.push({
name: data[item].key,
value: data[item].value,
type: data[item].type
});
}
}else if(request[i].dataMode === 'raw'){
inter.req_body_form = [];
// console.log(request[i].headers.inedxOf('application/json')>-1);
if(request[i].headers&&request[i].headers.indexOf('application/json')>-1){
inter.req_body_type = 'json';
}else{
inter.req_body_type = 'raw';
}
inter.req_body_other = request[i].rawModeData;
}else if(request[i].dataMode === 'binary'){
inter.req_body_type = 'file';
inter.req_body_other = request[i].rawModeData;
}
}
// req_params
if(request[i].queryParams){
inter.req_params = [];
const queryParams = request[i].queryParams;
for(let item in queryParams){
inter.req_params.push({
name: queryParams[item].key,
desc: queryParams[item].description,
required: queryParams[item].enable
});
}
}
// req_headers
if(request[i].headerData){
inter.req_headers = [];
const headerData = request[i].headerData;
for(let item in headerData){
inter.req_headers.push({
name: headerData[item].key,
value: headerData[item].value,
required: headerData[item].enable,
desc: headerData[item].description
});
}
}
if (!inter.project_id) {
// return ctx.body = yapi.commons.resReturn(null, 400, '项目id不能为空');
continue;
}
if (!inter.path) {
// return ctx.body = yapi.commons.resReturn(null, 400, '接口请求路径不能为空');
continue;
}
if (!yapi.commons.verifyPath(inter.path)) {
successNum--;
// return ctx.body = yapi.commons.resReturn(null, 400, '接口path第一位必须是/,最后一位不能为/');
continue;
}
let checkRepeat = await this.Model.checkRepeat(inter.project_id, inter.path, inter.method);
if (checkRepeat > 0) {
successNum--;
// return ctx.body = yapi.commons.resReturn(null, 401, '已存在的接口:' + inter.path + '[' + inter.method + ']');
continue;
}
let data = {
...inter,
catid: catid,
uid: this.getUid(),
add_time: yapi.commons.time(),
up_time: yapi.commons.time()
};
if ( data.req_params.length > 0) {
data.type = 'var';
data.req_params = data.req_params;
} else {
data.type = 'static';
}
// data1.push(data);
// console.log(data);
let res = await this.Model.save(data);
// return ctx.body = yapi.commons.resReturn(res);
}catch(e){
// ctx.body = yapi.commons.resReturn(e.message);
successNum--;
}
}
}
try{
if(successNum){
this.catModel.get(catid).then((cate) => {
let username = this.getUsername();
yapi.commons.saveLog({
content: `用户 "${username}" 为分类 "${cate.name}" 成功导入了 ${successNum} 个接口`,
type: 'project',
uid: this.getUid(),
username: username,
typeid: project_id
});
});
}
}catch(e){
}
return ctx.body = yapi.commons.resReturn(successNum);
}
async getCatMenu(ctx) {
let project_id = ctx.request.query.project_id;
if(!project_id){
return ctx.body = yapi.commons.resReturn(null, 400, '项目id不能为空');
}
try{
let res = await this.catModel.list(project_id);
return ctx.body = yapi.commons.resReturn(res);
}catch(e){
yapi.commons.resReturn(null, 400, e.message);
}
}
sendNotice(projectId, data) {

View File

@ -328,12 +328,13 @@ class interfaceColController extends baseController{
result.method = data.method;
result.req_body_type = data.req_body_type;
result.req_headers = data.req_headers;
result.res_body = data.res_body;
result.res_body_type = data.res_body_type;
result.req_body_form = this.handleParamsValue(data.req_body_form, result.req_body_form)
result.req_query = this.handleParamsValue(data.req_query, result.req_query)
result.req_params = this.handleParamsValue(data.req_params, result.req_params)
ctx.body = yapi.commons.resReturn(result);
}catch(e){
ctx.body = yapi.commons.resReturn(null, 400, e.message)

View File

@ -498,6 +498,9 @@ class projectController extends baseController {
async upSet(ctx) {
let id = ctx.request.body.id;
let data = {};
if (await this.checkAuth(id, 'project', 'danger') !== true) {
return ctx.body = yapi.commons.resReturn(null, 405, '没有权限');
}
data.color = ctx.request.body.color;
data.icon = ctx.request.body.icon;
if (!id) {

View File

@ -56,7 +56,7 @@
<div class="ydoc-banner ">
<div class="ydoc-banner-area">
<h1 >YApi</h1>
<p class="desc ">高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
<p class="desc ">高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
</div>
</div>
@ -83,12 +83,6 @@
<a href="usage-创建第一个API.html">创建第一个API</a>
</li>
<!-- <li > -->
<li >
<a href="usage-接口配置.html">接口配置</a>
</li>
<!-- <li class="active" class="active" > -->
<li class="active" >
@ -98,44 +92,186 @@
<ul class="nav docs-sidenav-extend" >
<li >
<a href="#介绍">介绍</a>
<a href="#Mock介绍">Mock介绍</a>
</li>
<li >
<a href="#使用说明">使用说明</a>
<a href="#定义mock数据示例">定义mock数据示例</a>
</li>
<li >
<a href="#模板语法">模板语法</a>
<a href="#yapiMock跟mockjs区别">yapiMock跟mockjs区别</a>
</li>
<li >
<a href="#如何使用Mock?">如何使用Mock?</a>
</li>
<li >
<a href="#Mock语法规范">Mock语法规范</a>
</li>
</ul>
<!-- <li > -->
<li >
<a href="usage-使用测试集.html">使用测试集</a>
</li>
<!-- <li > -->
<li >
<a href="usage-成为组长.html">成为组长</a>
</li>
<!-- <li > -->
<li >
<a href="usage-权限列表.html">权限列表</a>
</li>
</ul>
</ul>
</nav>
</div>
<div class="content-right markdown-body use-sidebar" role="main">
<h2 class="subject" id="介绍">介绍 <a class="hashlink" href="#介绍">#</a></h2><h2 class="subject" id="使用说明">使用说明 <a class="hashlink" href="#使用说明">#</a></h2><h2 class="subject" id="模板语法">模板语法 <a class="hashlink" href="#模板语法">#</a></h2>
<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>
<p> <strong>mock地址解析</strong>yapi平台网址+mock+<strong>您的项目id</strong>+<strong>接口实际请求path</strong></p>
<pre><code>mockd地址 http<span class="token operator">:</span>//yapi.corp.qunar.com/mock/<span class="token number">29</span>/api/hackathon/login
</code></pre><p>项目id可以在项目设置里查看到</p>
<h2 class="subject" id="定义mock数据示例">定义mock数据示例 <a class="hashlink" href="#定义mock数据示例">#</a></h2><pre><code><span class="token punctuation">{</span>
"status|<span class="token number">0</span>-<span class="token number">1</span>"<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> //接口状态
<span class="token property">"message"</span><span class="token operator">:</span> <span class="token string">"请求完成"</span><span class="token punctuation">,</span> //消息提示
<span class="token property">"data"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"counts"</span><span class="token operator">:</span><span class="token string">"@integer"</span><span class="token punctuation">,</span> //统计数量
"totalSubjectType|<span class="token number">4</span>-<span class="token number">10</span>"<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
"subjectName|regexp"<span class="token operator">:</span> "大数据|机器学习|工具<span class="token string">", //主题名
"</span>subjectType|+<span class="token number">1</span>"<span class="token operator">:</span> <span class="token number">1</span> //类型
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"data"</span><span class="token operator">:</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 string">"@name"</span><span class="token punctuation">,</span> //用户名
<span class="token property">"email"</span><span class="token operator">:</span> <span class="token string">"@email"</span><span class="token punctuation">,</span> //email
<span class="token property">"time"</span><span class="token operator">:</span> <span class="token string">"@datetime"</span> //时间
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><h2 class="subject" id="yapiMock跟mockjs区别">yapiMock跟mockjs区别 <a class="hashlink" href="#yapiMock跟mockjs区别">#</a></h2><p>因为yapi基于json定义mock无法使用mockjs原有的函数功能正则表达式需要基于rule书写示例如下</p>
<pre><code><span class="token punctuation">{</span>
"name|regexp"<span class="token operator">:</span> <span class="token string">"[a-z0-9_]+?"</span><span class="token punctuation">,</span>
"type|regexp"<span class="token operator">:</span> "json|text|xml" //枚举数据类型可这样实现
<span class="token punctuation">}</span>
</code></pre><h2 class="subject" id="如何使用Mock?">如何使用Mock? <a class="hashlink" href="#如何使用Mock?">#</a></h2><h3 class="subject" id="1_最简单的方式">1 最简单的方式 <a class="hashlink" href="#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="2_基于本地服务器反向代理">2 基于本地服务器反向代理 <a class="hashlink" href="#2_基于本地服务器反向代理">#</a></h3><p>优点:不用修改项目代码</p>
<h4 class="subject" id="2.1_基于nginx反向代理">2.1 基于nginx反向代理 <a class="hashlink" href="#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>yapi<span class="token punctuation">.</span>corp<span class="token punctuation">.</span>qunar<span class="token punctuation">.</span>com<span class="token operator">/</span>mock<span class="token operator">/</span><span class="token number">2817</span><span class="token operator">/</span>baseapi<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">#baseapi后面没有"/"</span>
<span class="token punctuation">}</span>
</code></pre>
<h4 class="subject" id="2.2_基于ykit_Jerry代理">2.2 基于ykit Jerry代理 <a class="hashlink" href="#2.2_基于ykit_Jerry代理">#</a></h4><p>假设您本地服务器访问地址是: <a href="http://xxx.com">http://xxx.com</a></p>
<p><img src="./images/ykit.jpg" /></p>
<h2 class="subject" id="Mock语法规范">Mock语法规范 <a class="hashlink" href="#Mock语法规范">#</a></h2><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 DefinitionDTD</a></p>
<p><a href="#DPD">2. 数据占位符定义规范Data Placeholder DefinitionDPD</a></p>
<p><span id = "DTD"></span></p>
<h3 class="subject" id="数据模板定义规范Data_Template_DefinitionDTD">数据模板定义规范Data Template DefinitionDTD <a class="hashlink" href="#数据模板定义规范Data_Template_DefinitionDTD">#</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</p>
<h3 class="subject" id="1._属性值是字符串_String">1. 属性值是字符串 String <a class="hashlink" href="#1._属性值是字符串_String">#</a></h3><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><h3 class="subject" id="2._属性值是数字_Number">2. 属性值是数字 Number <a class="hashlink" href="#2._属性值是数字_Number">#</a></h3><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><h3 class="subject" id="3._属性值是布尔型_Boolean">3. 属性值是布尔型 Boolean <a class="hashlink" href="#3._属性值是布尔型_Boolean">#</a></h3><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><h3 class="subject" id="4._属性值是对象_Object">4. 属性值是对象 Object <a class="hashlink" href="#4._属性值是对象_Object">#</a></h3><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><h3 class="subject" id="5._属性值是数组_Array">5. 属性值是数组 Array <a class="hashlink" href="#5._属性值是数组_Array">#</a></h3><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><p><span id = "DPD"></span></p>
<h3 class="subject" id="数据占位符定义规范Data_Placeholder_DefinitionDPD">数据占位符定义规范Data Placeholder DefinitionDPD <a class="hashlink" href="#数据占位符定义规范Data_Placeholder_DefinitionDPD">#</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>
</div>
</div>

View File

@ -1,201 +0,0 @@
<!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 使用手册</title>
<link rel="stylesheet" href="source/main.css" />
<link rel="stylesheet" href="styles/theme.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">&#xf020;</button>
<nav class="ydoc-nav">
<ul class="navbar-left">
<li class="">
<a href="index.html">首页</a>
</li>
<li class="active">
<a href="usage.html">使用手册</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 ">
<div class="content-left staticsidenav" role="complementary">
<nav class="docs-sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav docs-sidenav">
<!-- <li > -->
<li >
<a href="usage-认识 YApi.html">认识 YApi</a>
</li>
<!-- <li > -->
<li >
<a href="usage-创建第一个API.html">创建第一个API</a>
</li>
<!-- <li > -->
<li >
<a href="usage-接口配置.html">接口配置</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用mock功能.html">使用mock功能</a>
</li>
<!-- <li class="active" class="active" > -->
<li class="active" >
<a href="usage-使用测试集.html">使用测试集</a>
</li>
<ul class="nav docs-sidenav-extend" >
<li >
<a href="#介绍">介绍</a>
</li>
<li >
<a href="#使用说明">使用说明</a>
</li>
</ul>
<!-- <li > -->
<li >
<a href="usage-成为组长.html">成为组长</a>
</li>
<!-- <li > -->
<li >
<a href="usage-权限列表.html">权限列表</a>
</li>
</ul>
</nav>
</div>
<div class="content-right markdown-body use-sidebar" role="main">
<h2 class="subject" id="介绍">介绍 <a class="hashlink" href="#介绍">#</a></h2><h2 class="subject" id="使用说明">使用说明 <a class="hashlink" href="#使用说明">#</a></h2>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="copyright">
&copy; 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>
<div class="open-panel"></div>
<div class="mask"></div>
<script src="source/main.js"></script>
<script src="source/app.js"></script>
<script>
var lineHeight = 18;
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>

View File

@ -56,7 +56,7 @@
<div class="ydoc-banner ">
<div class="ydoc-banner-area">
<h1 >YApi</h1>
<p class="desc ">高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
<p class="desc ">高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
</div>
</div>
@ -91,35 +91,11 @@
</ul>
<!-- <li > -->
<li >
<a href="usage-接口配置.html">接口配置</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用mock功能.html">使用mock功能</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用测试集.html">使用测试集</a>
</li>
<!-- <li > -->
<li >
<a href="usage-成为组长.html">成为组长</a>
</li>
<!-- <li > -->
<li >
<a href="usage-权限列表.html">权限列表</a>
</li>
</ul>
</nav>

View File

@ -1,201 +0,0 @@
<!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 使用手册</title>
<link rel="stylesheet" href="source/main.css" />
<link rel="stylesheet" href="styles/theme.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">&#xf020;</button>
<nav class="ydoc-nav">
<ul class="navbar-left">
<li class="">
<a href="index.html">首页</a>
</li>
<li class="active">
<a href="usage.html">使用手册</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 ">
<div class="content-left staticsidenav" role="complementary">
<nav class="docs-sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav docs-sidenav">
<!-- <li > -->
<li >
<a href="usage-认识 YApi.html">认识 YApi</a>
</li>
<!-- <li > -->
<li >
<a href="usage-创建第一个API.html">创建第一个API</a>
</li>
<!-- <li > -->
<li >
<a href="usage-接口配置.html">接口配置</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用mock功能.html">使用mock功能</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用测试集.html">使用测试集</a>
</li>
<!-- <li class="active" class="active" > -->
<li class="active" >
<a href="usage-成为组长.html">成为组长</a>
</li>
<ul class="nav docs-sidenav-extend" >
<li >
<a href="#什么是组长">什么是组长</a>
</li>
<li >
<a href="#组长职责">组长职责</a>
</li>
</ul>
<!-- <li > -->
<li >
<a href="usage-权限列表.html">权限列表</a>
</li>
</ul>
</nav>
</div>
<div class="content-right markdown-body use-sidebar" role="main">
<h2 class="subject" id="什么是组长">什么是组长 <a class="hashlink" href="#什么是组长">#</a></h2><h2 class="subject" id="组长职责">组长职责 <a class="hashlink" href="#组长职责">#</a></h2>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="copyright">
&copy; 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>
<div class="open-panel"></div>
<div class="mask"></div>
<script src="source/main.js"></script>
<script src="source/app.js"></script>
<script>
var lineHeight = 18;
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>

View File

@ -1,201 +0,0 @@
<!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 使用手册</title>
<link rel="stylesheet" href="source/main.css" />
<link rel="stylesheet" href="styles/theme.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">&#xf020;</button>
<nav class="ydoc-nav">
<ul class="navbar-left">
<li class="">
<a href="index.html">首页</a>
</li>
<li class="active">
<a href="usage.html">使用手册</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 ">
<div class="content-left staticsidenav" role="complementary">
<nav class="docs-sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav docs-sidenav">
<!-- <li > -->
<li >
<a href="usage-认识 YApi.html">认识 YApi</a>
</li>
<!-- <li > -->
<li >
<a href="usage-创建第一个API.html">创建第一个API</a>
</li>
<!-- <li class="active" class="active" > -->
<li class="active" >
<a href="usage-接口配置.html">接口配置</a>
</li>
<ul class="nav docs-sidenav-extend" >
<li >
<a href="#介绍">介绍</a>
</li>
<li >
<a href="#配置说明">配置说明</a>
</li>
</ul>
<!-- <li > -->
<li >
<a href="usage-使用mock功能.html">使用mock功能</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用测试集.html">使用测试集</a>
</li>
<!-- <li > -->
<li >
<a href="usage-成为组长.html">成为组长</a>
</li>
<!-- <li > -->
<li >
<a href="usage-权限列表.html">权限列表</a>
</li>
</ul>
</nav>
</div>
<div class="content-right markdown-body use-sidebar" role="main">
<h2 class="subject" id="介绍">介绍 <a class="hashlink" href="#介绍">#</a></h2><h2 class="subject" id="配置说明">配置说明 <a class="hashlink" href="#配置说明">#</a></h2>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="copyright">
&copy; 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>
<div class="open-panel"></div>
<div class="mask"></div>
<script src="source/main.js"></script>
<script src="source/app.js"></script>
<script>
var lineHeight = 18;
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>

View File

@ -1,189 +0,0 @@
<!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 使用手册</title>
<link rel="stylesheet" href="source/main.css" />
<link rel="stylesheet" href="styles/theme.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">&#xf020;</button>
<nav class="ydoc-nav">
<ul class="navbar-left">
<li class="">
<a href="index.html">首页</a>
</li>
<li class="active">
<a href="usage.html">使用手册</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 ">
<div class="content-left staticsidenav" role="complementary">
<nav class="docs-sidebar hidden-print hidden-xs hidden-sm">
<ul class="nav docs-sidenav">
<!-- <li > -->
<li >
<a href="usage-认识 YApi.html">认识 YApi</a>
</li>
<!-- <li > -->
<li >
<a href="usage-创建第一个API.html">创建第一个API</a>
</li>
<!-- <li > -->
<li >
<a href="usage-接口配置.html">接口配置</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用mock功能.html">使用mock功能</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用测试集.html">使用测试集</a>
</li>
<!-- <li > -->
<li >
<a href="usage-成为组长.html">成为组长</a>
</li>
<!-- <li class="active" class="active" > -->
<li class="active" >
<a href="usage-权限列表.html">权限列表</a>
</li>
</ul>
</nav>
</div>
<div class="content-right markdown-body use-sidebar" role="main">
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="copyright">
&copy; 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>
<div class="open-panel"></div>
<div class="mask"></div>
<script src="source/main.js"></script>
<script src="source/app.js"></script>
<script>
var lineHeight = 18;
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>

View File

@ -56,7 +56,7 @@
<div class="ydoc-banner ">
<div class="ydoc-banner-area">
<h1 >YApi</h1>
<p class="desc ">高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
<p class="desc ">高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
</div>
</div>
@ -103,35 +103,11 @@
<a href="usage-创建第一个API.html">创建第一个API</a>
</li>
<!-- <li > -->
<li >
<a href="usage-接口配置.html">接口配置</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用mock功能.html">使用mock功能</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用测试集.html">使用测试集</a>
</li>
<!-- <li > -->
<li >
<a href="usage-成为组长.html">成为组长</a>
</li>
<!-- <li > -->
<li >
<a href="usage-权限列表.html">权限列表</a>
</li>
</ul>
</nav>

View File

@ -56,7 +56,7 @@
<div class="ydoc-banner ">
<div class="ydoc-banner-area">
<h1 >YApi</h1>
<p class="desc ">高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
<p class="desc ">高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
</div>
</div>
@ -83,35 +83,11 @@
<a href="usage-创建第一个API.html">创建第一个API</a>
</li>
<!-- <li > -->
<li >
<a href="usage-接口配置.html">接口配置</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用mock功能.html">使用mock功能</a>
</li>
<!-- <li > -->
<li >
<a href="usage-使用测试集.html">使用测试集</a>
</li>
<!-- <li > -->
<li >
<a href="usage-成为组长.html">成为组长</a>
</li>
<!-- <li > -->
<li >
<a href="usage-权限列表.html">权限列表</a>
</li>
</ul>
</nav>

View File

@ -62,7 +62,7 @@
"title": "使用手册",
"banner": {
"title": "YApi",
"description": "高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。"
"description": "高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。"
},
"content": {
"sidebar": true,
@ -74,22 +74,26 @@
}, {
"name": "创建第一个API",
"content": "./doc/usage/quickstart.md"
}, {
"name": "接口配置",
"content": "./doc/usage/interface.md"
}, {
}
// , {
// "name": "接口配置",
// "content": "./doc/usage/interface.md"
// }
, {
"name": "使用mock功能",
"content": "./doc/usage/mock.md"
}, {
"name": "使用测试集",
"content": "./doc/usage/case.md"
}, {
"name": "成为组长",
"content": "./doc/usage/leader.md"
}, {
"name": "权限列表",
"content": "./doc/usage/authority.md"
}]
}
// , {
// "name": "使用测试集",
// "content": "./doc/usage/case.md"
// }, {
// "name": "成为组长",
// "content": "./doc/usage/leader.md"
// }, {
// "name": "权限列表",
// "content": "./doc/usage/authority.md"
// }
]
}
},
// {