mirror of
https://github.com/YMFE/yapi.git
synced 2025-01-06 12:45:22 +08:00
docs: 完善高级mock文档
This commit is contained in:
suxiaoxin
parent
2ad1cc5c53
commit
24abaadf73
@ -5,27 +5,27 @@
|
||||
## Postman 数据导入
|
||||
1.首先在postman导出接口
|
||||
|
||||
<div><img class="doc-img" width="50%" src="./images/usage/postman-1.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:50%" src="./images/usage/postman-1.jpg" /></div>
|
||||
|
||||
2.选择collection_v1,点击export导出接口到文件xxx
|
||||
|
||||
<div><img class="doc-img" width="66%" src="./images/usage/postman-2.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:70%" src="./images/usage/postman-2.jpg" /></div>
|
||||
|
||||
3.打开yapi平台，进入到项目页面，点击数据管理，选择相应的分组和postman导入方式，选择刚才保存的文件路径，开始导入数据
|
||||
|
||||
<div><img class="doc-img" width="66%" src="./images/usage/postman-3.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:90%" src="./images/usage/postman-3.jpg" /></div>
|
||||
|
||||
## HAR 数据导入
|
||||
<p>可用 chrome 实现录制接口数据的功能，方便开发者快速导入项目接口</p>
|
||||
|
||||
1.打开 Chrome 浏览器开发者工具，点击network，首次使用请先clear所有请求信息，确保录制功能开启（红色为开启状态）
|
||||
|
||||
<div><img class="doc-img" width="660%" src="./images/usage/chrome-1.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:70%" src="./images/usage/chrome-1.jpg" /></div>
|
||||
|
||||
2.操作页面实际功能，完成后点击save as HAR with content,将数据保存到文件xxx
|
||||
|
||||
<div><img class="doc-img" width="66%" src="./images/usage/chrome-2.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:70%" src="./images/usage/chrome-2.jpg" /></div>
|
||||
|
||||
3.打开yapi平台，进入到项目页面，点击数据管理，选择相应的分组和har导入方式，选择刚才保存的文件路径，开始导入数据
|
||||
|
||||
<div><img class="doc-img" width="50%" src="./images/usage/chrome-3.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:50%" src="./images/usage/chrome-3.jpg" /></div>
|
||||
@ -15,7 +15,7 @@
|
||||
"message": "请求完成", //消息提示
|
||||
"data": {
|
||||
"counts":"@integer", //统计数量
|
||||
"totalSubjectType|4-10": [
|
||||
"totalSubjectType|4-10": [ //4-10意味着可以随机生成4-10组数据
|
||||
{
|
||||
"subjectName|regexp": "大数据|机器学习|工具", //主题名
|
||||
"subjectType|+1": 1 //类型
|
||||
@ -100,6 +100,29 @@ proxy_pass http://yapi.corp.qunar.com/mock/2817/baseapi; #baseapi后面没有"
|
||||
<img src="./images/ykit.jpg" />
|
||||
|
||||
<span id="mock"></span>
|
||||
|
||||
## 高级Mock
|
||||
在前端开发阶段，对于某些接口，业务相对复杂，而 UI 端也需要根据接口返回的不同内容去做相应的处理
|
||||
YApi 提供了写 js 脚本方式处理这一问题，可以根据用户请求的参数修改返回内容。
|
||||
|
||||
### 全局变量
|
||||
1. mockJson
|
||||
2. query
|
||||
3. body
|
||||
4. header
|
||||
5. cookie
|
||||
|
||||
### 使用方法
|
||||
1. 首先开启此功能
|
||||
2. mock脚本就是用 javascript 对 mockJson 变量修改
|
||||
|
||||
|
||||
### 示例：
|
||||
<img class="doc-img" style="width: 80%" src="./images/usage/adv-mock.jpg" />
|
||||
|
||||
|
||||
|
||||
|
||||
## Mock语法规范
|
||||
>了解更多Mock详情：[Mock.js 官方文档](https://github.com/nuysoft/Mock/wiki/Syntax-Specification)
|
||||
|
||||
|
||||
@ -150,24 +150,24 @@
|
||||
<h2 class="subject" id="介绍">介绍 <a class="hashlink" href="#介绍">#</a></h2><p >在数据管理可快速导入其他格式的接口数据，方便快速添加接口。</p>
|
||||
|
||||
<h2 class="subject" id="Postman_数据导入">Postman 数据导入 <a class="hashlink" href="#Postman_数据导入">#</a></h2><p>1.首先在postman导出接口</p>
|
||||
<div><img class="doc-img" width="50%" src="./images/usage/postman-1.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:50%" src="./images/usage/postman-1.jpg" /></div>
|
||||
|
||||
<p>2.选择collection_v1,点击export导出接口到文件xxx</p>
|
||||
<div><img class="doc-img" width="66%" src="./images/usage/postman-2.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:70%" src="./images/usage/postman-2.jpg" /></div>
|
||||
|
||||
<p>3.打开yapi平台，进入到项目页面，点击数据管理，选择相应的分组和postman导入方式，选择刚才保存的文件路径，开始导入数据</p>
|
||||
<div><img class="doc-img" width="66%" src="./images/usage/postman-3.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:90%" src="./images/usage/postman-3.jpg" /></div>
|
||||
|
||||
<h2 class="subject" id="HAR_数据导入">HAR 数据导入 <a class="hashlink" href="#HAR_数据导入">#</a></h2><p>可用 chrome 实现录制接口数据的功能，方便开发者快速导入项目接口</p>
|
||||
|
||||
<p>1.打开 Chrome 浏览器开发者工具，点击network，首次使用请先clear所有请求信息，确保录制功能开启（红色为开启状态）</p>
|
||||
<div><img class="doc-img" width="660%" src="./images/usage/chrome-1.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:70%" src="./images/usage/chrome-1.jpg" /></div>
|
||||
|
||||
<p>2.操作页面实际功能，完成后点击save as HAR with content,将数据保存到文件xxx</p>
|
||||
<div><img class="doc-img" width="66%" src="./images/usage/chrome-2.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:70%" src="./images/usage/chrome-2.jpg" /></div>
|
||||
|
||||
<p>3.打开yapi平台，进入到项目页面，点击数据管理，选择相应的分组和har导入方式，选择刚才保存的文件路径，开始导入数据</p>
|
||||
<div><img class="doc-img" width="50%" src="./images/usage/chrome-3.jpg" /></div>
|
||||
<div><img class="doc-img" style="width:50%" src="./images/usage/chrome-3.jpg" /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -125,6 +125,10 @@
|
||||
<a href="#如何使用Mock?">如何使用Mock?</a>
|
||||
</li>
|
||||
|
||||
<li >
|
||||
<a href="#高级Mock">高级Mock</a>
|
||||
</li>
|
||||
|
||||
<li >
|
||||
<a href="#Mock语法规范">Mock语法规范</a>
|
||||
</li>
|
||||
@ -165,7 +169,7 @@
|
||||
<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> //统计数量
|
||||
<span class="token property">"totalSubjectType|4-10"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token property">"totalSubjectType|4-10"</span><span class="token operator">:</span> <span class="token punctuation">[</span> //<span class="token number">4</span>-<span class="token number">10</span>意味着可以随机生成<span class="token number">4</span>-<span class="token number">10</span>组数据
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"subjectName|regexp"</span><span class="token operator">:</span> <span class="token string">"大数据|机器学习|工具"</span><span class="token punctuation">,</span> //主题名
|
||||
<span class="token property">"subjectType|+1"</span><span class="token operator">:</span> <span class="token number">1</span> //类型
|
||||
@ -211,6 +215,13 @@ $<span class="token punctuation">.</span><span class="token function">post</span
|
||||
<h4 class="subject" id="2.3_基于ykit_Jerry代理">2.3 基于ykit Jerry代理 <a class="hashlink" href="#2.3_基于ykit_Jerry代理">#</a></h4><p>假设您本地服务器访问地址是： <a href="http://xxx.com">http://xxx.com</a></p>
|
||||
<p><img src="./images/ykit.jpg" /></p>
|
||||
<p><span id="mock"></span></p>
|
||||
<h2 class="subject" id="高级Mock">高级Mock <a class="hashlink" href="#高级Mock">#</a></h2><p>在前端开发阶段，对于某些接口，业务相对复杂，而 UI 端也需要根据接口返回的不同内容去做相应的处理
|
||||
YApi 提供了写 js 脚本方式处理这一问题，可以根据用户请求的参数修改返回内容。</p>
|
||||
<h3 class="subject" id="全局变量">全局变量 <a class="hashlink" href="#全局变量">#</a></h3><ol>
|
||||
<li>mockJson</li><li>query</li><li>body</li><li>header</li><li>cookie</li></ol>
|
||||
<h3 class="subject" id="使用方法">使用方法 <a class="hashlink" href="#使用方法">#</a></h3><ol>
|
||||
<li>首先开启此功能</li><li>mock脚本就是用 javascript 对 mockJson 变量修改</li></ol>
|
||||
<h3 class="subject" id="示例：">示例： <a class="hashlink" href="#示例：">#</a></h3><p><img class="doc-img" style="width: 80%" src="./images/usage/adv-mock.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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user