mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2025-02-17 13:49:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc: Mock 期望

Browse Source
This commit is contained in:
zwjamnsss 2017-10-25 17:20:55 +08:00
parent 2aa343aa12
commit 05e1923ac1
26 changed files with 453 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/images/usage/adv-mock-case1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
doc/images/usage/adv-mock-case3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
doc/images/usage/adv-mock-case4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
doc/images/usage/adv-mock-case5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 419 KiB

62
doc/page/usage/adv_mock.md Normal file
View File

@ -0,0 +1,62 @@
## Mock 期望
在测试时，很多时候需要根据不同的请求参数、IP 返回不同的 HTTP Code、HTTP 头和 JSON 数据。
Mock 期望就是根据设置的请求过滤规则，返回期望数据。
### 使用方法
1. 进入接口详情页，点击『高级 Mock』选项。
<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>
### 期望填写
* 期望名称：给此条期望命名
请求
* IP 过滤：请求的 IP 是设置的地址才可能返回期望。默认 IP 过滤关闭，任何 IP 地址都可能返回期望。
* 参数过滤：请求必须包含设置的参数，并且值相等才可能返回期望。参数可以在 Body 或 Query 中。
响应
* HTTP Code：期望响应的 HTTP 状态码
* 延时：期望响应的延迟时间
* HTTP 头：期望响应带有的 HTTP 头
* 返回 JSON：期望返回的 JSON 数据
## 自定义 Mock 脚本
在前端开发阶段，对于某些接口，业务相对复杂，而 UI 端也需要根据接口返回的不同内容去做相应的处理。
YApi 提供了写 JS 脚本方式处理这一问题，可以根据用户请求的参数修改返回内容。
### 全局变量
请求
- `header` 请求的 HTTP 头
- `params` 请求参数，包括 Body、Query 中所有参数
- `cookie` 请求带的 Cookies
响应
- `mockJson` 接口定义的响应数据 Mock 模板
- `resHeader` 响应的 HTTP 头
- `httpCode` 响应的 HTTP 状态码
- `delay` Mock 响应延时
### 使用方法
1. 首先开启此功能
2. Mock 脚本就是用 JavaScript 对 `mockJson` 变量修改
### 示例：
<div class="doc-img-wrapper"><img class="doc-img-r" src="./images/usage/adv-mock.jpg" /></div>
## Mock 优先级说明
请求 Mock 数据时，规则匹配优先级：Mock 期望 > 自定义 Mock 脚本 > 普通 Mock。
如果前面匹配到 Mock 数据，后面 Mock 则不返回。

29
doc/page/usage/mock.md
View File

@ -2,13 +2,13 @@
<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**
**mock地址解析**：`YApi平台网址 + mock + 您的项目id + 接口实际请求path`
假设你 YApi 的部署地址为：http://yapi.xxx.com，然后后面的都可以用这个地址作为示例
假设你 YApi 的部署地址为：http://yapi.xxx.com 然后用这个地址作为示例
mockd地址： http://yapi.xxx.com/mock/29/api/hackathon/login
注：项目id可以在项目设置里查看到
> 注：项目 id 可以在项目设置里查看到
## 定义mock数据示例
```
@ -105,29 +105,8 @@ proxy_pass http://yapi.xxx.com/mock/2817/baseapi; #baseapi后面没有"/"
<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)

12
doc/styles/theme.css
View File

@ -8,6 +8,18 @@ body, h1, h2, h3, h4, h5, h6 {
margin-top: 3em;
}
.doc-img-wrapper {
background: #f7f7f7;
padding: 16px;
display: inline-block;
text-align: center;
width: 80%;
position: relative;
border-radius: 4px;
}
.doc-img-r {
display: block;
}
.doc-img {
width: 50%;
display: block;

225
static/doc/adv_mock.html Normal file
View File

@ -0,0 +1,225 @@
<!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="active">
<a href="index.html">使用手册</a>
</li>
<li class="">
<a href="devops.html">内网部署</a>
</li>
<li class="">
<a href="plugin.html">插件Wiki</a>
</li>
<li class="">
<a href="qa.html">常见问题</a>
</li>
<li class="">
<a href="releases.html">版本记录</a>
</li>
<li class="">
<a href="http://yapi.demo.qunar.com/" target="_blank">demo站点</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="getfamiliar.html">认识 YApi</a>
</li>
<!-- <li > -->
<li >
<a href="quickstart.html">创建第一个API</a>
</li>
<!-- <li > -->
<li >
<a href="manage.html">管理分组与项目</a>
</li>
<!-- <li > -->
<li >
<a href="project.html">项目操作</a>
</li>
<!-- <li > -->
<li >
<a href="interface.html">接口操作</a>
</li>
<!-- <li > -->
<li >
<a href="mock.html">普通 Mock</a>
</li>
<!-- <li class="active" class="active" > -->
<li class="active" >
<a href="adv_mock.html">高级 Mock</a>
</li>
<ul class="nav docs-sidenav-extend" >
<li >
<a href="#Mock_期望">Mock 期望</a>
</li>
<li >
<a href="#自定义_Mock_脚本">自定义 Mock 脚本</a>
</li>
<li >
<a href="#Mock_优先级说明">Mock 优先级说明</a>
</li>
</ul>
<!-- <li > -->
<li >
<a href="case.html">使用测试集</a>
</li>
<!-- <li > -->
<li >
<a href="data.html">数据导入</a>
</li>
</ul>
</nav>
</div>
<div class="content-right markdown-body use-sidebar" role="main">
<h2 class="subject" id="Mock_期望">Mock 期望 <a class="hashlink" href="#Mock_期望">#</a></h2><p>在测试时，很多时候需要根据不同的请求参数、IP 返回不同的 HTTP Code、HTTP 头和 JSON 数据。</p>
<p>Mock 期望就是根据设置的请求过滤规则，返回期望数据。</p>
<h3 class="subject" id="使用方法">使用方法 <a class="hashlink" href="#使用方法">#</a></h3><ol>
<li>进入接口详情页，点击『高级 Mock』选项。<div class="doc-img-wrapper"><img class="doc-img-r" src="./images/usage/adv-mock-case1.png"/></div></li><li>点击『添加期望』，填写过滤规则以及期望返回数据，点击『确定』保存。<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></li><li>然后尝试在浏览器里发送符合规则的请求，查看返回的数据是否符合期望。<div class="doc-img-wrapper"><img class="doc-img-r" src="./images/usage/adv-mock-case5.png"/></div>
</li></ol>
<h3 class="subject" id="期望填写">期望填写 <a class="hashlink" href="#期望填写">#</a></h3><ul>
<li>期望名称：给此条期望命名</li></ul>
<p>请求</p>
<ul>
<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 class="subject" id="自定义_Mock_脚本">自定义 Mock 脚本 <a class="hashlink" href="#自定义_Mock_脚本">#</a></h2><p>在前端开发阶段，对于某些接口，业务相对复杂，而 UI 端也需要根据接口返回的不同内容去做相应的处理。</p>
<p>YApi 提供了写 JS 脚本方式处理这一问题，可以根据用户请求的参数修改返回内容。</p>
<h3 class="subject" id="全局变量">全局变量 <a class="hashlink" href="#全局变量">#</a></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><code>mockJson</code> 接口定义的响应数据 Mock 模板</li><li><code>resHeader</code> 响应的 HTTP 头</li><li><code>httpCode</code> 响应的 HTTP 状态码</li><li><code>delay</code> Mock 响应延时</li></ul>
<h3 class="subject" id="使用方法">使用方法 <a class="hashlink" href="#使用方法">#</a></h3><ol>
<li>首先开启此功能</li><li>Mock 脚本就是用 JavaScript 对 <code>mockJson</code> 变量修改</li></ol>
<h3 class="subject" id="示例：">示例： <a class="hashlink" href="#示例：">#</a></h3><div class="doc-img-wrapper"><img class="doc-img-r" src="./images/usage/adv-mock.jpg" /></div>
<h2 class="subject" id="Mock_优先级说明">Mock 优先级说明 <a class="hashlink" href="#Mock_优先级说明">#</a></h2><p>请求 Mock 数据时，规则匹配优先级：Mock 期望 &gt; 自定义 Mock 脚本 &gt; 普通 Mock。</p>
<p>如果前面匹配到 Mock 数据，后面 Mock 则不返回。</p>
</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>
</body>
</html>

8
static/doc/case.html
View File

@ -124,7 +124,13 @@
<!-- <li > -->
<li >
<a href="mock.html">使用mock功能</a>
<a href="mock.html">普通 Mock</a>
</li>
<!-- <li > -->
<li >
<a href="adv_mock.html">高级 Mock</a>
</li>
<!-- <li class="active" class="active" > -->

8
static/doc/data.html
View File

@ -124,7 +124,13 @@
<!-- <li > -->
<li >
<a href="mock.html">使用mock功能</a>
<a href="mock.html">普通 Mock</a>
</li>
<!-- <li > -->
<li >
<a href="adv_mock.html">高级 Mock</a>
</li>
<!-- <li > -->

8
static/doc/getfamiliar.html
View File

@ -144,7 +144,13 @@
<!-- <li > -->
<li >
<a href="mock.html">使用mock功能</a>
<a href="mock.html">普通 Mock</a>
</li>
<!-- <li > -->
<li >
<a href="adv_mock.html">高级 Mock</a>
</li>
<!-- <li > -->

BIN
static/doc/images/usage/adv-mock-case1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
static/doc/images/usage/adv-mock-case3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
static/doc/images/usage/adv-mock-case4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
static/doc/images/usage/adv-mock-case5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 419 KiB

8
static/doc/index.html
View File

@ -124,7 +124,13 @@
<!-- <li > -->
<li >
<a href="mock.html">使用mock功能</a>
<a href="mock.html">普通 Mock</a>
</li>
<!-- <li > -->
<li >
<a href="adv_mock.html">高级 Mock</a>
</li>
<!-- <li > -->

8
static/doc/interface.html
View File

@ -136,7 +136,13 @@
<!-- <li > -->
<li >
<a href="mock.html">使用mock功能</a>
<a href="mock.html">普通 Mock</a>
</li>
<!-- <li > -->
<li >
<a href="adv_mock.html">高级 Mock</a>
</li>
<!-- <li > -->

8
static/doc/manage.html
View File

@ -144,7 +144,13 @@
<!-- <li > -->
<li >
<a href="mock.html">使用mock功能</a>
<a href="mock.html">普通 Mock</a>
</li>
<!-- <li > -->
<li >
<a href="adv_mock.html">高级 Mock</a>
</li>
<!-- <li > -->

45
static/doc/mock.html
View File

@ -124,7 +124,7 @@
<!-- <li class="active" class="active" > -->
<li class="active" >
<a href="mock.html">使用mock功能</a>
<a href="mock.html">普通 Mock</a>
</li>
<ul class="nav docs-sidenav-extend" >
@ -145,16 +145,18 @@
<a href="#如何使用Mock?">如何使用Mock?</a>
</li>
<li >
<a href="#高级Mock">高级Mock</a>
</li>
<li >
<a href="#Mock语法规范">Mock语法规范</a>
</li>
</ul>
<!-- <li > -->
<li >
<a href="adv_mock.html">高级 Mock</a>
</li>
<!-- <li > -->
<li >
@ -175,19 +177,21 @@
<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>
<p> 假设你 YApi 的部署地址为：<a href="http://yapi.xxx.com，然后后面的都可以用这个地址作为示例">http://yapi.xxx.com，然后后面的都可以用这个地址作为示例</a></p>
<p> <strong>mock地址解析</strong>：<code>YApi平台网址 + mock + 您的项目id + 接口实际请求path</code></p>
<p> 假设你 YApi 的部署地址为：<a href="http://yapi.xxx.com">http://yapi.xxx.com</a> 然后用这个地址作为示例</p>
<pre><code>mockd地址： http<span class="token operator">:</span>//yapi.xxx.com/mock/<span class="token number">29</span>/api/hackathon/login
</code></pre><p> 注：项目id可以在项目设置里查看到</p>
</code></pre><blockquote>
<p>注：项目 id 可以在项目设置里查看到</p>
</blockquote>
<h2 class="subject" id="定义mock数据示例">定义mock数据示例 <a class="hashlink" href="#定义mock数据示例">#</a></h2><pre><code><span class="token punctuation">{</span>
<span class="token property">"status|0-1"</span><span class="token operator">:</span> <span class="token number">0</span><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> //统计数量
<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>组数据
"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 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> //类型
"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>
@ -201,8 +205,8 @@
</code></pre><h2 class="subject" id="YApi-Mock_跟_Mockjs_区别">YApi-Mock 跟 Mockjs 区别 <a class="hashlink" href="#YApi-Mock_跟_Mockjs_区别">#</a></h2><p><a href="http://mockjs.com">Mockjs 官网</a></p>
<p>1 因为 yapi 基于 json 定义 mock ，无法使用 mockjs 原有的函数功能，正则表达式需要基于 rule 书写，示例如下：</p>
<pre><code><span class="token punctuation">{</span>
<span class="token property">"name|regexp"</span><span class="token operator">:</span> <span class="token string">"[a-z0-9_]+?"</span><span class="token punctuation">,</span>
<span class="token property">"type|regexp"</span><span class="token operator">:</span> <span class="token string">"json|text|xml"</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><p>2 支持替换请求的query,body参数</p>
<pre><code><span class="token punctuation">{</span>
@ -231,13 +235,6 @@ $<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 端也需要根据接口返回的不同内容去做相应的处理</p>
<p>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>
@ -246,9 +243,9 @@ $<span class="token punctuation">.</span><span class="token function">post</span
<p><a href="#DPD">2. 数据占位符定义规范（Data Placeholder Definition，DPD）</a></p>
<p><span id = "DTD"></span></p>
<h3 class="subject" id="数据模板定义规范（Data_Template_Definition，DTD）">数据模板定义规范（Data Template Definition，DTD） <a class="hashlink" href="#数据模板定义规范（Data_Template_Definition，DTD）">#</a></h3><p>数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：</p>
<pre><code>// 属性名 name （与生成规则之间用 <span class="token string">"|"</span> 隔开）
// 生成规则 rule（生成规则有<span class="token number">7</span>种详见下面的生成规则）
// 属性值 value（可以含有 <span class="token string">"@占位符"</span> 同时也指定了最终值的初始值和类型）
<pre><code>// 属性名 name （与生成规则之间用 "|<span class="token string">" 隔开）
// 生成规则 rule（生成规则有7种详见下面的生成规则）
// 属性值 value（可以含有 "</span>@占位符" 同时也指定了最终值的初始值和类型）
'name|rule'<span class="token operator">:</span> value

8
static/doc/project.html
View File

@ -140,7 +140,13 @@
<!-- <li > -->
<li >
<a href="mock.html">使用mock功能</a>
<a href="mock.html">普通 Mock</a>
</li>
<!-- <li > -->
<li >
<a href="adv_mock.html">高级 Mock</a>
</li>
<!-- <li > -->

8
static/doc/quickstart.html
View File

@ -140,7 +140,13 @@
<!-- <li > -->
<li >
<a href="mock.html">使用mock功能</a>
<a href="mock.html">普通 Mock</a>
</li>
<!-- <li > -->
<li >
<a href="adv_mock.html">高级 Mock</a>
</li>
<!-- <li > -->

106
static/doc/source/app.js
View File

@ -1,3 +1,6 @@
var EXAMPLE_MAX_HEIGHT = 98,
DEFAULT_SHOW_PARAMS = 5;
$(document).ready(function() {
// 移动端导航
var $openPanel = $('.open-panel');
@ -122,6 +125,7 @@ $(document).ready(function() {
})
$versionSelector.click(function(e) {
$versionMask.show();
console.log('e');
});
$('.markdown-body pre').map(function(i, item) {
@ -129,61 +133,59 @@ $(document).ready(function() {
$(item).children('code').addClass('js-code-'+i);
});
// var winHeight = $(window).height() - 44,
// sidebar = $('.docs-sidebar');
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');
if (winWidth < 768) {
$('.docs-sidenav').css({
'overflow-x': 'hidden'
});
}
var activeMenu,
barScroll = false;
// var docSideNav = $('.docs-sidenav');
// if (winWidth > 767) {
// docSideNav.width($contentLeftWidth);
// }
sidebar.on('mouseover', function() {
barScroll = true;
});
sidebar.on('mouseout', function() {
barScroll = false;
});
};
// if (sidebar.height() > winHeight) {
// sidebar.css('max-height', winHeight + 'px');
// $('.docs-sidenav').css('max-height', winHeight + 'px');
// if (winWidth < 768) {
// $('.docs-sidenav').css({
// 'overflow-x': 'hidden'
// });
// }
// var activeMenu,
// barScroll = false;
//
// sidebar.on('mouseover', function() {
// barScroll = true;
// });
// sidebar.on('mouseout', function() {
// barScroll = false;
// });
// };
$(window).on('scroll', function(e) {
if ($(this).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');
}
// $(window).on('scroll', function(e) {
// if ($(this).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');
// }
//
// if (!barScroll) {
// var activeItem = $('.docs-sidebar li.active a');
// if (activeItem.length) {
// if (!activeMenu || (activeMenu.attr('href') != activeItem.attr('href'))) {
// activeMenu = activeItem;
// var top = activeMenu.offset().top - sidebar.offset().top;
// if (top < 0) {
// //sidebar.scrollTop(sidebar.scrollTop() + top);
// $('.docs-sidenav').scrollTop($('.docs-sidenav').scrollTop() + top);
// } else if (top > winHeight - 88) {
// //sidebar.scrollTop(sidebar.scrollTop() + top - winHeight + 44);
// $('.docs-sidenav').scrollTop($('.docs-sidenav').scrollTop() + top - winHeight + 88);
// }
// }
// }
// }
// });
if (!barScroll) {
var activeItem = $('.docs-sidebar li.active a');
if (activeItem.length) {
if (!activeMenu || (activeMenu.attr('href') != activeItem.attr('href'))) {
activeMenu = activeItem;
var top = activeMenu.offset().top - sidebar.offset().top;
if (top < 0) {
//sidebar.scrollTop(sidebar.scrollTop() + top);
$('.docs-sidenav').scrollTop($('.docs-sidenav').scrollTop() + top);
} else if (top > winHeight - 88) {
//sidebar.scrollTop(sidebar.scrollTop() + top - winHeight + 44);
$('.docs-sidenav').scrollTop($('.docs-sidenav').scrollTop() + top - winHeight + 88);
}
}
}
}
});
// 退出全屏浏览器窗口大小改变，不触发resize
$(window).on('resize', function(e) {

2
static/doc/source/code.css
View File

File diff suppressed because one or more lines are too long

2
static/doc/source/main.css
View File

File diff suppressed because one or more lines are too long

12
static/doc/styles/theme.css
View File

@ -8,6 +8,18 @@ body, h1, h2, h3, h4, h5, h6 {
margin-top: 3em;
}
.doc-img-wrapper {
background: #f7f7f7;
padding: 16px;
display: inline-block;
text-align: center;
width: 80%;
position: relative;
border-radius: 4px;
}
.doc-img-r {
display: block;
}
.doc-img {
width: 50%;
display: block;

6
ydoc.json
View File

@ -49,9 +49,13 @@
"index": "interface",
"content": "./doc/page/usage/api.md"
},{
"name": "使用mock功能",
"name": "普通 Mock",
"index": "mock",
"content": "./doc/page/usage/mock.md"
},{
"name": "高级 Mock",
"index": "adv_mock",
"content": "./doc/page/usage/adv_mock.md"
},{
"name": "使用测试集",
"index": "case",