feat: getCase list select all field

This commit is contained in:
suxiaoxin 2017-08-21 21:18:55 +08:00
parent 9ac3411da3
commit 718829a42e
6 changed files with 383 additions and 0 deletions

6
doc/home.md Normal file
View File

@ -0,0 +1,6 @@
<script>
window.onload = function(){
var aList = $('.ydoc-nav').find('a');
$(aList[aList.length-1]).css('display','none');
}
</script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 KiB

42
doc/interface.md Normal file
View File

@ -0,0 +1,42 @@
## 快速开始
### 1 创建项目分组
#### 1.1 项目分组
登录之后进到项目首页,左边侧边栏显示的即分组列表。
<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 />
管理员有权限添加或删除分组。
<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 />
> 分组名称具有唯一性
#### 1.2 项目
选中不同的分组,右边会显示该分组下的项目列表。
<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 />
创建项目需要填写项目名称,项目线上域名(添加完成后可配置项目其他环境域名),项目接口基本路径(接口路径前面相同的部分)以及项目描述。
<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 />
> 项目『线上域名 + 基本路径』具有唯一性
#### 1.3 接口
点击项目名称,进入该项目接口列表。
<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 />
点击编辑,进入接口详情页(之后接口详情页和编辑也会分开),可以编辑接口或者请求测试真实接口。
<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 />
<img src="http://upload-images.jianshu.io/upload_images/842107-2ee7171d707e91ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />

179
doc/mock.md Normal file
View File

@ -0,0 +1,179 @@
## 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>
### 1 Mock步骤
#### 1.1 创建接口
通过点击页面上的"+添加接口"
<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 />
输入协议、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 />
输入Mock规则时它会在右边同步产生一个对应的结果
<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 />
<span id = "mock"></span>
### 2.1 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"
}
```
## 未来计划推出功能
1. 可视化JSON编辑器可定义JSON_Schema和mockjs
2. 支持HTTP和RPC协议
3. 自动化测试
4. 多人协作

Binary file not shown.

After

Width:  |  Height:  |  Size: 305 KiB

156
static/doc/start.html Normal file
View File

@ -0,0 +1,156 @@
<!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" />
</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="start.html">快速开始</a>
</li>
<li class="">
<a href="mock.html">Mock功能</a>
</li>
<li class="">
<a href="api.html"></a>
</li>
</ul>
</nav>
</div>
</header>
<!-- <header style="height:20px"></header> -->
<!-- Docs page layout -->
<div class="ydoc-banner-bg">
<div class="ydoc-banner ">
<div class="ydoc-banner-area">
<h1 >YApi</h1>
<p class="desc ">高效、易用、功能强大、的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
</div>
</div>
<div class="ydoc-container">
<div class="ydoc-container-content " id="readme">
<article class="markdown-body">
<h2 class="subject" id="快速开始">快速开始 <a class="hashlink" href="#快速开始">#</a></h2><h3 class="subject" id="1 接口管理架构">1 接口管理架构 <a class="hashlink" href="#1 接口管理架构">#</a></h3><p>平台以<strong>项目分组</strong> -&gt; <strong>项目</strong> -&gt; <strong>接口</strong>的划分进行接口组织管理。</p>
<p><img src="./images/yapi-base-flow.jpg" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<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>
<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>
<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>
<p><img src="http://upload-images.jianshu.io/upload_images/842107-2ee7171d707e91ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
</article>
</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>
<script src="source/main.js"></script>
<script src="source/app.js"></script>
<script>
var lineHeight = 17.4;
var EXAMPLE_MAX_HEIGHT;
function fold() {
// 折叠code
$('.markdown-body pre').css({
"line-height": lineHeight + "px"
});
$('.markdown-body pre').map(function(i, item) {
var $item = $(item);
var foldnumber = $item.data('foldnumber');
EXAMPLE_MAX_HEIGHT = lineHeight * (foldnumber || 6);
if ($item.height() > EXAMPLE_MAX_HEIGHT) {
$item.css({
"padding-bottom": 30
});
$item.find('code').height(EXAMPLE_MAX_HEIGHT);
$item.append('<span class="extend">展开更多……</span>');
};
});
$('.ydoc-example').delegate('.extend', 'click', function() {
var $this = $(this);
$this.removeClass('extend').addClass('fold');
$this.html('折叠代码');
$this.prev().height('auto');
$this.prev().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.prev().height(EXAMPLE_MAX_HEIGHT); // code
$this.html("展开更多……");
});
}
$(document).ready(fold);
</script>
</body>
</html>