fix: 整理帮助文档

This commit is contained in:
qitmac000249 2017-07-28 20:38:24 +08:00
parent 74ceb706fb
commit a0c7fe196c
6 changed files with 119 additions and 50 deletions

View File

@ -2,7 +2,7 @@
## 平台介绍 ## 平台介绍
YApi是高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护、监控和保护任意规模的 API而且yapi为用户提供了优秀的交互体验开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的创建。 <p style='text-indent:2em;line-height:1.8em'>YApi是<strong>高效</strong><strong>易用</strong><strong>功能强大</strong>的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护、监控和保护任意规模的 API而且yapi为用户提供了优秀的交互体验开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的创建。</p>
## 功能 ## 功能
1. 项目接口管理 1. 项目接口管理
@ -21,65 +21,77 @@ YApi是高效、易用、功能强大的api管理平台旨在为开发、产
### 1 接口管理架构 ### 1 接口管理架构
平台以**项目分组** -> **项目** -> **接口**的划分进行接口组织管理。 平台以**项目分组** -> **项目** -> **接口**的划分进行接口组织管理。
![](http://upload-images.jianshu.io/upload_images/842107-305ba49a60ee1ff5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) <img src="http://upload-images.jianshu.io/upload_images/842107-305ba49a60ee1ff5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
#### 1.1 项目分组 #### 1.1 项目分组
登录之后进到项目首页,左边侧边栏显示的即分组列表。 登录之后进到项目首页,左边侧边栏显示的即分组列表。
![分组列表](http://upload-images.jianshu.io/upload_images/842107-d90ca4b3242fa760.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) <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 />
管理员有权限添加或删除分组。 管理员有权限添加或删除分组。
![添加分组](http://upload-images.jianshu.io/upload_images/842107-a0d4d9a98003896a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<img src="http://upload-images.jianshu.io/upload_images/842107-a0d4d9a98003896a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
> 分组名称具有唯一性 > 分组名称具有唯一性
#### 1.2 项目 #### 1.2 项目
选中不同的分组,右边会显示该分组下的项目列表。 选中不同的分组,右边会显示该分组下的项目列表。
![项目列表](http://upload-images.jianshu.io/upload_images/842107-137bcae58b84715e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) <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 />
创建项目需要填写项目名称,项目线上域名(添加完成后可配置项目其他环境域名),项目接口基本路径(接口路径前面相同的部分)以及项目描述。 创建项目需要填写项目名称,项目线上域名(添加完成后可配置项目其他环境域名),项目接口基本路径(接口路径前面相同的部分)以及项目描述。
![创建项目](http://upload-images.jianshu.io/upload_images/842107-360a50ddb746f73d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<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 接口 #### 1.3 接口
点击项目名称,进入该项目接口列表。 点击项目名称,进入该项目接口列表。
![接口列表](http://upload-images.jianshu.io/upload_images/842107-e858005f714f4889.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<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 />
点击编辑,进入接口详情页(之后接口详情页和编辑也会分开),可以编辑接口或者请求测试真实接口。 点击编辑,进入接口详情页(之后接口详情页和编辑也会分开),可以编辑接口或者请求测试真实接口。
![接口详情](http://upload-images.jianshu.io/upload_images/842107-78c0ea839619d068.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) <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 />
![请求真实接口](http://upload-images.jianshu.io/upload_images/842107-2ee7171d707e91ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) <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 />
#### Mock功能 ### 2 Mock功能
&emsp;&emsp;yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口这些接口会自动生成模拟数据支持复杂的生成逻辑创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作,这对于团队开发是很有好处的。 <p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口这些接口会自动生成模拟数据支持复杂的生成逻辑创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作,这对于团队开发是很有好处的。</p>
#### 2.1 添加接口
##### 第一步:添加接口
通过点击页面上的"+添加接口" 通过点击页面上的"+添加接口"
![接口添加](http://note.youdao.com/yws/api/personal/file/WEB613bd4f29db038f2b41c03dcfceda2b6?method=download&shareKey=29bfc2b855f6f26ce0079baf567e54cc) <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"按钮。 输入协议、URL、接口名、请求头、请求参数、mock规则等信息然后点击右上角的"Mock"按钮。
![接口详情](http://note.youdao.com/yws/api/personal/file/WEB0759331a53e095d910cfb4024ea657d5?method=download&shareKey=a86046f0bd2353d4763a9c962d747e5b) <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 />
##### 第三步:当点击"Mock"按钮之后就会在页面下方生成一个mock结果并产生一个API接口。点击"复制"按钮即可复制,用户拿到接口后就可以发请求了。 #### 2.2 Mock
![Mock结果](http://note.youdao.com/yws/api/personal/file/WEB265d4bf7cc979bda06d07639d1b84557?method=download&shareKey=64d41dea0371e38761f494d7899b3b35) 当点击"Mock"按钮之后就会在页面下方生成一个mock结果并产生一个API接口。点击"复制"按钮即可复制,用户拿到接口后就可以发请求了。
##### 第四步当拿到复制好接口之后就可以发起一个请求了先将请求的信息填写完善如请求方法post、get等、URL、请求头、请求的数据等。然后就点击"发送",然后在"返回结果"出可以看到接口返回的数据。 <img src="http://note.youdao.com/yws/api/personal/file/WEBf9b154cb88d21daa8206e8c4a3d76042?method=download&shareKey=1999f6c2cf197b5b6d775c312e34073d" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
![请求接口](http://note.youdao.com/yws/api/personal/file/WEB1c22d5c4062be5f10be0b1cdfae86621?method=download&shareKey=93be3a4f1fe56219b89ea2c5ba04014d) 将请求的信息填写完善如请求方法post、get等、URL、请求头、请求的数据等。然后就点击"发送",然后在"返回结果"出可以看到接口返回的数据。
<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 />
#### 2.3 成员管理
你也可以通过点击"管理成员"来添加和删除项目的成员,便于团队管理。 你也可以通过点击"管理成员"来添加和删除项目的成员,便于团队管理。
![成员管理](http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&shareKey=218b9326659208ec564b9fff3ea8c6c3) <img src="http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&shareKey=218b9326659208ec564b9fff3ea8c6c3" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
## 未来计划推出功能 ## 未来计划推出功能
1. 可视化JSON编辑器可定义JSON_Schema和mockjs 1. 可视化JSON编辑器可定义JSON_Schema和mockjs
2. 支持HTTP和RPC协议 2. 支持HTTP和RPC协议
3. 自动化测试 3. 自动化测试

51
doc/build/index.html vendored
View File

@ -10,8 +10,6 @@
<meta name="author" content="author of the site"> <meta name="author" content="author of the site">
<title>yapi 首页</title> <title>yapi 首页</title>
<link rel="stylesheet" href="source/main.css" /> <link rel="stylesheet" href="source/main.css" />
</head> </head>
<body> <body>
<div class="ydoc"> <div class="ydoc">
@ -46,8 +44,8 @@
<div class="ydoc-banner-bg"> <div class="ydoc-banner-bg">
<div class="ydoc-banner "> <div class="ydoc-banner ">
<div class="ydoc-banner-area"> <div class="ydoc-banner-area">
<h1 >index</h1> <h1 >Yapi</h1>
<p class="desc ">首页说明文字</p> <p class="desc ">高效、易用、功能强大、的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。</p>
</div> </div>
</div> </div>
@ -58,7 +56,8 @@
<div class="ydoc-container-content" id="readme"> <div class="ydoc-container-content" id="readme">
<article class="markdown-body"> <article class="markdown-body">
<h1 class="subject" id="YApi">YApi <a class="hashlink" href="#YApi">#</a></h1><h2 class="subject" id="平台介绍">平台介绍 <a class="hashlink" href="#平台介绍">#</a></h2><p>YApi是高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护、监控和保护任意规模的 API而且yapi为用户提供了优秀的交互体验开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的创建。</p> <h1 class="subject" id="YApi">YApi <a class="hashlink" href="#YApi">#</a></h1><h2 class="subject" id="平台介绍">平台介绍 <a class="hashlink" href="#平台介绍">#</a></h2><p style='text-indent:2em;line-height:1.8em'>YApi是<strong>高效</strong><strong>易用</strong><strong>功能强大</strong>、的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护、监控和保护任意规模的 API而且yapi为用户提供了优秀的交互体验开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的创建。</p>
<h2 class="subject" id="功能">功能 <a class="hashlink" href="#功能">#</a></h2><ol> <h2 class="subject" id="功能">功能 <a class="hashlink" href="#功能">#</a></h2><ol>
<li><p>项目接口管理</p> <li><p>项目接口管理</p>
<p> 提供基本的项目分组,项目管理,接口管理功能</p> <p> 提供基本的项目分组,项目管理,接口管理功能</p>
@ -68,34 +67,38 @@
<p> 提供基本的用户注册登录管理等功能集成了去哪儿QSSO登录</p> <p> 提供基本的用户注册登录管理等功能集成了去哪儿QSSO登录</p>
</li></ol> </li></ol>
<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> <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="http://upload-images.jianshu.io/upload_images/842107-305ba49a60ee1ff5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p> <p><img src="http://upload-images.jianshu.io/upload_images/842107-305ba49a60ee1ff5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<h4 class="subject" id="1.1 项目分组">1.1 项目分组 <a class="hashlink" href="#1.1 项目分组">#</a></h4><p>登录之后进到项目首页,左边侧边栏显示的即分组列表。</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" alt="分组列表"></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" alt="添加分组"></p> <p><img src="http://upload-images.jianshu.io/upload_images/842107-a0d4d9a98003896a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<blockquote> <blockquote>
<p>分组名称具有唯一性</p> <p>分组名称具有唯一性</p>
</blockquote> </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" alt="项目列表"></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" alt="创建项目"></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> <blockquote>
<p>项目『线上域名 + 基本路径』具有唯一性</p> <p>项目『线上域名 + 基本路径』具有唯一性</p>
</blockquote> </blockquote>
<h4 class="subject" id="1.3 接口">1.3 接口 <a class="hashlink" href="#1.3 接口">#</a></h4><p>点击项目名称,进入该项目接口列表。 <h4 class="subject" id="1.3 接口">1.3 接口 <a class="hashlink" href="#1.3 接口">#</a></h4><p>点击项目名称,进入该项目接口列表。</p>
<img src="http://upload-images.jianshu.io/upload_images/842107-e858005f714f4889.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="接口列表"></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>点击编辑,进入接口详情页(之后接口详情页和编辑也会分开),可以编辑接口或者请求测试真实接口。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/842107-78c0ea839619d068.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="接口详情"></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" alt="请求真实接口"></p> <p><img src="http://upload-images.jianshu.io/upload_images/842107-2ee7171d707e91ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<h4 class="subject" id="Mock功能">Mock功能 <a class="hashlink" href="#Mock功能">#</a></h4><p> &emsp;&emsp;yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口这些接口会自动生成模拟数据支持复杂的生成逻辑创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作,这对于团队开发是很有好处的。</p> <h3 class="subject" id="2 Mock功能">2 Mock功能 <a class="hashlink" href="#2 Mock功能">#</a></h3> <p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口这些接口会自动生成模拟数据支持复杂的生成逻辑创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作,这对于团队开发是很有好处的。</p>
<h5 class="subject" id="第一步:添加接口">第一步:添加接口 <a class="hashlink" href="#第一步:添加接口">#</a></h5><p>通过点击页面上的&quot;+添加接口&quot;</p>
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB613bd4f29db038f2b41c03dcfceda2b6?method=download&amp;shareKey=29bfc2b855f6f26ce0079baf567e54cc" alt="接口添加"></p> <h4 class="subject" id="2.1 添加接口">2.1 添加接口 <a class="hashlink" href="#2.1 添加接口">#</a></h4><p>通过点击页面上的&quot;+添加接口&quot;</p>
<h5 class="subject" id="第二步输入协议、URL、接口名、请求头、请求参数、mock规则等信息然后点击右上角的&quot;Mock&quot;按钮。">第二步输入协议、URL、接口名、请求头、请求参数、mock规则等信息然后点击右上角的&quot;Mock&quot;按钮。 <a class="hashlink" href="#第二步输入协议、URL、接口名、请求头、请求参数、mock规则等信息然后点击右上角的&quot;Mock&quot;按钮。">#</a></h5><p><img src="http://note.youdao.com/yws/api/personal/file/WEB0759331a53e095d910cfb4024ea657d5?method=download&amp;shareKey=a86046f0bd2353d4763a9c962d747e5b" alt="接口详情"></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>
<h5 class="subject" id="第三步:当点击&quot;Mock&quot;按钮之后就会在页面下方生成一个mock结果并产生一个API接口。点击&quot;复制&quot;按钮即可复制,用户拿到接口后就可以发请求了。">第三步:当点击&quot;Mock&quot;按钮之后就会在页面下方生成一个mock结果并产生一个API接口。点击&quot;复制&quot;按钮即可复制,用户拿到接口后就可以发请求了。 <a class="hashlink" href="#第三步:当点击&quot;Mock&quot;按钮之后就会在页面下方生成一个mock结果并产生一个API接口。点击&quot;复制&quot;按钮即可复制,用户拿到接口后就可以发请求了。">#</a></h5><p><img src="http://note.youdao.com/yws/api/personal/file/WEB265d4bf7cc979bda06d07639d1b84557?method=download&amp;shareKey=64d41dea0371e38761f494d7899b3b35" alt="Mock结果"></p> <p> 输入协议、URL、接口名、请求头、请求参数、mock规则等信息然后点击右上角的&quot;Mock&quot;按钮。</p>
<h5 class="subject" id="第四步当拿到复制好接口之后就可以发起一个请求了先将请求的信息填写完善如请求方法post、get等、URL、请求头、请求的数据等。然后就点击&quot;发送&quot;,然后在&quot;返回结果&quot;出可以看到接口返回的数据。">第四步当拿到复制好接口之后就可以发起一个请求了先将请求的信息填写完善如请求方法post、get等、URL、请求头、请求的数据等。然后就点击&quot;发送&quot;,然后在&quot;返回结果&quot;出可以看到接口返回的数据。 <a class="hashlink" href="#第四步当拿到复制好接口之后就可以发起一个请求了先将请求的信息填写完善如请求方法post、get等、URL、请求头、请求的数据等。然后就点击&quot;发送&quot;,然后在&quot;返回结果&quot;出可以看到接口返回的数据。">#</a></h5><p><img src="http://note.youdao.com/yws/api/personal/file/WEB1c22d5c4062be5f10be0b1cdfae86621?method=download&amp;shareKey=93be3a4f1fe56219b89ea2c5ba04014d" alt="请求接口"></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>你也可以通过点击&quot;管理成员&quot;来添加和删除项目的成员,便于团队管理。</p> <h4 class="subject" id="2.2 Mock">2.2 Mock <a class="hashlink" href="#2.2 Mock">#</a></h4><p>当点击&quot;Mock&quot;按钮之后就会在页面下方生成一个mock结果并产生一个API接口。点击&quot;复制&quot;按钮即可复制,用户拿到接口后就可以发请求了。</p>
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&amp;shareKey=218b9326659208ec564b9fff3ea8c6c3" alt="成员管理"></p> <p><img src="http://note.youdao.com/yws/api/personal/file/WEBf9b154cb88d21daa8206e8c4a3d76042?method=download&shareKey=1999f6c2cf197b5b6d775c312e34073d" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<p>将请求的信息填写完善如请求方法post、get等、URL、请求头、请求的数据等。然后就点击&quot;发送&quot;,然后在&quot;返回结果&quot;出可以看到接口返回的数据。</p>
<p><img src="http://upload-images.jianshu.io/upload_images/842107-2ee7171d707e91ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<h4 class="subject" id="2.3 成员管理">2.3 成员管理 <a class="hashlink" href="#2.3 成员管理">#</a></h4><p>你也可以通过点击&quot;管理成员&quot;来添加和删除项目的成员,便于团队管理。</p>
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&shareKey=218b9326659208ec564b9fff3ea8c6c3" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
<h2 class="subject" id="未来计划推出功能">未来计划推出功能 <a class="hashlink" href="#未来计划推出功能">#</a></h2><ol> <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> <li>可视化JSON编辑器可定义JSON_Schema和mockjs</li><li>支持HTTP和RPC协议</li><li>自动化测试</li><li>多人协作</li></ol>

View File

@ -132,6 +132,23 @@ $(document).ready(function() {
$(item).addClass('ydoc-example'); $(item).addClass('ydoc-example');
}); });
// $('code').each(function(i, block) {
// if (block.innerHTML.indexOf('\n') != -1) {
// var pn = block.parentNode;
// if (pn.tagName.toUpperCase() == 'PRE') {
// try {
// hljs.highlightBlock(block);
// } catch(e) {}
// } else {
// pn.innerHTML = '<pre><code>' + block.innerHTML + '</code></pre>';
// try {
// hljs.highlightBlock(pn.childNodes[0].childNodes[0]);
// } catch(e) {}
// }
// }
// });
var winHeight = $(window).height() - 44, var winHeight = $(window).height() - 44,
sidebar = $('.docs-sidebar'); sidebar = $('.docs-sidebar');
var docSideNav = $('.docs-sidenav'); var docSideNav = $('.docs-sidenav');
@ -188,9 +205,46 @@ $(document).ready(function() {
// 退出全屏浏览器窗口大小改变不触发resize // 退出全屏浏览器窗口大小改变不触发resize
$(window).on('resize', function(e) { $(window).on('resize', function(e) {
resizeSidebar();
$contentLeftWidth = $contentLeft.width() - 1; $contentLeftWidth = $contentLeft.width() - 1;
}); });
function resizeSidebar() {
var winHeight = $(window).height() - 44,
sidebar = $('.docs-sidebar');
var docSideNav = $('.docs-sidenav');
if (winWidth > 767) {
docSideNav.width($contentLeftWidth);
}
if (sidebar.height() > winHeight) {
sidebar.css('max-height', winHeight + 'px');
$('.docs-sidenav').css('max-height', winHeight + 'px');
$('.docs-sidenav').css({
'overflow-y': 'scroll',
'overflow-x': 'hidden'
});
var barScroll = false;
sidebar.on('mouseover', function() {
barScroll = true;
});
sidebar.on('mouseout', function() {
barScroll = false;
});
// scroll
if ($(window).scrollTop() > ($('.footer').offset().top - $(window).height())) {
winHeight = $(window).height() - $('.footer').outerHeight() - 44;
sidebar.css('max-height', winHeight + 'px');
$('.docs-sidenav').css('max-height', winHeight + 'px');
} else {
winHeight = $(window).height() - 44;
sidebar.css('max-height', winHeight + 'px');
$('.docs-sidenav').css('max-height', winHeight + 'px');
}
}
}
function sortAsOffset(propertyName) { function sortAsOffset(propertyName) {
return function(obj1, obj2) { return function(obj1, obj2) {
var val1 = obj1[propertyName]; var val1 = obj1[propertyName];

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -18,8 +18,8 @@
"name": "index", // Page Name html : index.html "name": "index", // Page Name html : index.html
"title": "首页", // Page Title "title": "首页", // Page Title
"banner": { // Banner "banner": { // Banner
"title": "index", "title": "Yapi",
"description": "首页说明文字" "description": "高效、易用、功能强大、的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。"
}, },
"content": "./README.md" // (markdown) "content": "./README.md" // (markdown)
},{ },{