mirror of
https://github.com/YMFE/yapi.git
synced 2025-02-11 13:40:32 +08:00
104 lines
14 KiB
HTML
104 lines
14 KiB
HTML
<html><head><meta charSet="UTF-8"/><meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><link rel="apple-touch-icon" sizes="180x180" href="../ydoc/images/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="../ydoc/images/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="../ydoc/images/favicon-16x16.png"/><link rel="manifest" href="../ydoc/images/manifest.json"/><link rel="mask-icon" href="../ydoc/images/safari-pinned-tab.svg"" color="#5bbad5"/><meta name="theme-color" content="#ffffff"/><meta http-equiv="Cache-Control" content="no-transform"/><meta http-equiv="Cache-Control" content="no-siteapp"/><title>高级Mock-教程</title><link rel="stylesheet" href="../ydoc/styles/style.css"/><meta name="author" content="ymfe"/><meta name="keywords" content="api管理,接口管理,接口文档,api文档"/><meta name="description" content="YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API，YApi 还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理"/><meta id="releativePath" content=".."/><link rel="stylesheet" href="../ydoc/ydoc-plugin-search/search.css"/></head><body><div class="g-doc"><div class="m-summary" id="js-menu"><div class="m-summary-content" id="js-menu-content"><div class="m-summary-block"><div class="m-summary-title">快速上手</div><ul class="m-summary-list indent"><li class="item"><a href="index.html" class="href">认识YApi</a></li><li class="item"><a href="quickstart.html" class="href">创建第一个API</a></li></ul></div><div class="m-summary-block"><div class="m-summary-title">进阶篇</div><ul class="m-summary-list indent"><li class="item"><a href="manage.html" class="href">权限</a></li><li class="item"><a href="project.html" class="href">项目操作</a></li><li class="item"><a href="api.html" class="href">接口操作</a></li><li class="item"><a href="mock.html" class="href">数据Mock</a></li><li class="item"><a href="" class="href">高级Mock</a></li><li class="item"><a href="case.html" class="href">自动化测试</a></li><li class="item"><a href="data.html" class="href">数据导入</a></li></ul></div><div class="m-summary-block"><div class="m-summary-title">自定义</div><ul class="m-summary-list indent"><li class="item"><div class="m-summary-block"><a href="plugin-index.html" class="href">插件</a><ul class="m-summary-list indent"><li class="item"><a href="plugin-dev.html" class="href">插件开发</a></li><li class="item"><a href="plugin-list.html" class="href">插件列表</a></li><li class="item"><a href="plugin-hooks.html" class="href">钩子</a></li></ul></div></li><li class="item"><a href="redev.html" class="href">二次开发</a></li></ul></div><div class="m-summary-block"><ul class="m-summary-list"><li class="item"><a href="qa.html" class="href">常见问题解答</a></li><li class="item"><a href="https://github.com/YMFE/yapi/blob/master/CHANGELOG.md" class="href">版本记录</a></li></ul></div></div><div class="m-summary-switch" id="js-summary-switch"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="bottom"><g transform="translate(904.92214,-879.1482)"><path d=" m -673.67664,1221.6502 -231.2455,-231.24803 55.6165, -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894, 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892, -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696, -174.68583 0.6895,0 26.281,25.03215 56.8701, 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864 -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688, -104.0616 -231.873,-231.248 z " fill="#fff"></path></g></svg><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="top"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="aaa" fill="#fff" fill-rule="nonzero"><path d="M231.2455,342.502 L0,111.25397 L55.6165,55.62697 C86.2056,25.03212 111.7971,-2.99999998e-05 112.4866,-2.99999998e-05 C113.176,-2.99999998e-05 192.3503,78.60859 288.4293,174.6858 L463.1185,349.3716 L637.8077,174.6858 C733.8867,78.60859 813.060896,-2.99999997e-05 813.750396,-2.99999997e-05 C814.439896,-2.99999997e-05 840.031396,25.03212 870.620496,55.62697 L926.236996,111.25397 L694.9915,342.502 C567.8065,469.6884 463.4636,573.75 463.1185,573.75 C462.7734,573.75 358.4305,469.6884 231.2455,342.502 Z" id="Shape" transform="translate(463.118498, 286.874985) scale(1, -1) translate(-463.118498, -286.874985) "></path></g></g></svg></div></div><div class="m-main" id="js-panel"><header class="m-header" id="js-header"><div class="m-header-title js-logo"><a href="../index.html" target="_self"><img class="logo" src="images/logo_header@2x.png"/><h6 class="name">YApi</h6></a></div><div><div class="m-search">
|
||
<div class="icon"></div>
|
||
<input type="text" class="input js-input" placeholder="搜索文档内容" />
|
||
<div class="m-search-result js-search-result"></div>
|
||
</div></div><nav class="m-header-nav js-nav"><ul class="m-header-items"><li class="item active"><a class="href" href="index.html">教程</a></li><li class="item "><a class="href" href="../devops/index.html">内网部署</a></li></ul></nav><div id="js-nav-btn" class="m-header-btn ui-font-ydoc"></div></header><div class="m-content"><div id="markdown-body" class="m-content-container markdown-body"><h1>高级Mock</h1>
|
||
<p>高级 Mock 分为<code>Mock 期望</code>和<code>自定义 Mock 脚本</code>两种方式。</p>
|
||
<h2 id="mock-期望">Mock 期望</h2>
|
||
<p>在测试时，很多时候需要根据不同的请求参数、IP 返回不同的 HTTP Code、HTTP 头和 JSON 数据。</p>
|
||
<p>Mock 期望就是根据设置的请求过滤规则，返回期望数据。</p>
|
||
<h3 id="mock-期望-使用方法">使用方法</h3>
|
||
<ol>
|
||
<li>进入接口详情页，点击『高级 Mock』选项。</li>
|
||
</ol>
|
||
<div class="doc-img-wrapper"><img class="doc-img-r" src="./images/usage/adv-mock-case1.png"></div>
|
||
2. 点击『添加期望』，填写过滤规则以及期望返回数据，点击『确定』保存。
|
||
<div class="doc-img-wrapper"><img class="doc-img-r" src="./images/usage/adv-mock-case3.png"></div>
|
||
<div class="doc-img-wrapper"><img class="doc-img-r" src="./images/usage/adv-mock-case4.png"></div>
|
||
3. 然后尝试在浏览器里发送符合规则的请求，查看返回的数据是否符合期望。
|
||
<div class="doc-img-wrapper"><img class="doc-img-r" src="./images/usage/adv-mock-case5.png"></div>
|
||
<h3 id="mock-期望-期望填写">期望填写</h3>
|
||
<p>基本信息</p>
|
||
<ul>
|
||
<li>期望名称：给此条期望命名</li>
|
||
<li>IP 过滤：请求的 IP 是设置的地址才可能返回期望。默认 IP 过滤关闭，任何 IP 地址都可能返回期望。</li>
|
||
<li>参数过滤：请求必须包含设置的参数，并且值相等才可能返回期望。参数可以在 Body 或 Query 中。</li>
|
||
</ul>
|
||
<p>响应</p>
|
||
<ul>
|
||
<li>HTTP Code：期望响应的 HTTP 状态码</li>
|
||
<li>延时：期望响应的延迟时间</li>
|
||
<li>HTTP 头：期望响应带有的 HTTP 头</li>
|
||
<li>返回 JSON：期望返回的 JSON 数据</li>
|
||
</ul>
|
||
<h2 id="自定义-mock-脚本">自定义 Mock 脚本</h2>
|
||
<p>在前端开发阶段，对于某些接口，业务相对复杂，而 UI 端也需要根据接口返回的不同内容去做相应的处理。</p>
|
||
<p>YApi 提供了写 JS 脚本方式处理这一问题，可以根据用户请求的参数修改返回内容。</p>
|
||
<h3 id="自定义-mock-脚本-全局变量">全局变量</h3>
|
||
<p>请求</p>
|
||
<ul>
|
||
<li><code>header</code> 请求的 HTTP 头</li>
|
||
<li><code>params</code> 请求参数，包括 Body、Query 中所有参数</li>
|
||
<li><code>cookie</code> 请求带的 Cookies</li>
|
||
</ul>
|
||
<p>响应</p>
|
||
<ul>
|
||
<li>
|
||
<p><code>mockJson</code>
|
||
接口定义的响应数据 Mock 模板</p>
|
||
</li>
|
||
<li>
|
||
<p><code>resHeader</code>
|
||
响应的 HTTP 头</p>
|
||
</li>
|
||
<li>
|
||
<p><code>httpCode</code>
|
||
响应的 HTTP 状态码</p>
|
||
</li>
|
||
<li>
|
||
<p><code>delay</code>
|
||
Mock 响应延时，单位为 ms</p>
|
||
</li>
|
||
<li>
|
||
<p><code>Random</code>
|
||
Mock.Random 方法，详细使用方法请查看 <a href="https://github.com/nuysoft/Mock/wiki/Mock.Random">Wiki</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="自定义-mock-脚本-使用方法">使用方法</h3>
|
||
<ol>
|
||
<li>首先开启此功能</li>
|
||
<li>Mock 脚本就是用 JavaScript 对 <code>mockJson</code> 变量修改,请避免被全局变量(httpCode, resHeader, delay)的修改</li>
|
||
</ol>
|
||
<h3 id="自定义-mock-脚本-示例1,-根据请求参数重写-mockjson">示例1, 根据请求参数重写 mockJson</h3>
|
||
<pre><code>if(params.type == 1){
|
||
mockJson.errcode = 400;
|
||
mockJson.errmsg = 'error;
|
||
}
|
||
|
||
if(header.token == 't'){
|
||
mockJson.errcode = 300;
|
||
mockJson.errmsg = 'error;
|
||
}
|
||
|
||
if(cookie.type == 'a'){
|
||
mockJson.errcode = 500;
|
||
mockJson.errmsg = 'error;
|
||
}
|
||
|
||
</code></pre>
|
||
<h3 id="自定义-mock-脚本-示例2,-生成高度自定义数据内容">示例2, 生成高度自定义数据内容</h3>
|
||
<pre><code>var a = [1,1,1,1,1,1,1,1,1,1]
|
||
|
||
mockJson = {
|
||
errcode: 0,
|
||
email: Random.email('qq.com'),
|
||
data: a.map(function(item){
|
||
return Random.city() + '银行'
|
||
})
|
||
}
|
||
|
||
</code></pre>
|
||
<h2 id="mock-优先级说明">Mock 优先级说明</h2>
|
||
<p>请求 Mock 数据时，规则匹配优先级：Mock 期望 > 自定义 Mock 脚本 > 普通 Mock。</p>
|
||
<p>如果前面匹配到 Mock 数据，后面 Mock 则不返回。</p>
|
||
</div><div class="m-content-container m-paging"><div class="m-paging-prev m-paging-item"><a href="mock.html" class="href"><span class="ui-font-ydoc"></span>数据Mock</a></div><div class="m-paging-next m-paging-item"><a href="case.html" class="href">自动化测试<span class="ui-font-ydoc"></span></a></div></div></div></div></div><script src="../ydoc/scripts/plugins/dollar.min.js"></script><script src="../ydoc/scripts/plugins/responsive-nav.min.js"></script><script src="../ydoc/scripts/plugins/slideout.min.js"></script><script src="../ydoc/scripts/app.js"></script><script src="../ydoc/ydoc-plugin-search/core.js"></script><script src="../ydoc/ydoc-plugin-search/search.js"></script><script src="../search_json.js"></script></body></html> |