docs: add ykit mock in the mock document

This commit is contained in:
suxiaoxin 2017-09-07 17:02:08 +08:00
parent 87c35a590d
commit e0a1b0c761
2 changed files with 26 additions and 4 deletions

View File

@ -43,7 +43,7 @@
```
## 如何使用Mock?
### 1 最简单的方式
### 1 在js代码直接请求yapi提供的mock地址不用担心跨域问题
在代码直接请求yapi提供的mock地址以jQuery为例
````javascript
@ -66,7 +66,22 @@ proxy_pass http://yapi.corp.qunar.com/mock/2817/baseapi; #baseapi后面没有"
}
````
#### 2.2 基于ykit Jerry代理
#### 2.2 基于ykit mock功能
```javascript
{
pattern: /\/api\/(.*)/,
responder: 'http://yapi.corp.qunar.com/mock/58/api/$1'
}
```
上面通过正则匹配,将所有接口转到 http://yapi.corp.qunar.com 上,比如 `http://localhost/api/user/status` 会成为 `http://yapi.corp.qunar.com/mock/58/api/user/status`
详细使用指南: <a target="_blank" href="https://ykit.ymfe.org/plugins-mock.html#获取远程数据_Map_Remote_">ykit-config-mock</a>
#### 2.3 基于ykit Jerry代理
假设您本地服务器访问地址是: http://xxx.com

View File

@ -171,7 +171,7 @@
"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><h2 class="subject" id="如何使用Mock?">如何使用Mock? <a class="hashlink" href="#如何使用Mock?">#</a></h2><h3 class="subject" id="1 最简单的方式">1 最简单的方式 <a class="hashlink" href="#1 最简单的方式">#</a></h3><p>在代码直接请求yapi提供的mock地址以jQuery为例</p>
</code></pre><h2 class="subject" id="如何使用Mock?">如何使用Mock? <a class="hashlink" href="#如何使用Mock?">#</a></h2><h3 class="subject" id="1 在js代码直接请求yapi提供的mock地址不用担心跨域问题">1 在js代码直接请求yapi提供的mock地址不用担心跨域问题 <a class="hashlink" href="#1 在js代码直接请求yapi提供的mock地址不用担心跨域问题">#</a></h3><p>在代码直接请求yapi提供的mock地址以jQuery为例</p>
<pre><code class="lang-javascript"><span class="token keyword">let</span> prefix <span class="token operator">=</span> <span class="token string">'http://yapi.local.qunar.com:3000/mock/2817'</span>
$<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span>prefix<span class="token operator">+</span><span class="token string">'/baseapi/path'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>username<span class="token punctuation">:</span> <span class="token string">'xxx'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//返回上图预览部分的数据</span>
@ -183,7 +183,14 @@ $<span class="token punctuation">.</span><span class="token function">post</span
<span class="token keyword">proxy_pass</span> <span class="token keyword">http</span><span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>yapi<span class="token punctuation">.</span>corp<span class="token punctuation">.</span>qunar<span class="token punctuation">.</span>com<span class="token operator">/</span>mock<span class="token operator">/</span><span class="token number">2817</span><span class="token operator">/</span>baseapi<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">#baseapi后面没有"/"</span>
<span class="token punctuation">}</span>
</code></pre>
<h4 class="subject" id="2.2 基于ykit Jerry代理">2.2 基于ykit Jerry代理 <a class="hashlink" href="#2.2 基于ykit Jerry代理">#</a></h4><p>假设您本地服务器访问地址是: <a href="http://xxx.com">http://xxx.com</a></p>
<h4 class="subject" id="2.2 基于ykit mock功能">2.2 基于ykit mock功能 <a class="hashlink" href="#2.2 基于ykit mock功能">#</a></h4><pre><code class="lang-javascript"><span class="token punctuation">{</span>
pattern<span class="token punctuation">:</span> <span class="token regex">/\/api\/(.*)/</span><span class="token punctuation">,</span>
responder<span class="token punctuation">:</span> <span class="token string">'http://yapi.corp.qunar.com/mock/58/api/$1'</span>
<span class="token punctuation">}</span>
</code></pre>
<p>上面通过正则匹配,将所有接口转到 <a href="http://yapi.corp.qunar.com">http://yapi.corp.qunar.com</a> 上,比如 <code>http://localhost/api/user/status</code> 会成为 <code>http://yapi.corp.qunar.com/mock/58/api/user/status</code></p>
<p>详细使用指南: <a target="_blank" href="https://ykit.ymfe.org/plugins-mock.html#获取远程数据_Map_Remote_">ykit-config-mock</a></p>
<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>
<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>