feat: mockServer 自定义脚本支持 mock.random 函数和 完善文档

This commit is contained in:
suxiaoxin 2017-10-26 15:01:51 +08:00
parent 6df5bfb027
commit 68b7cdf8ec
8 changed files with 125 additions and 40 deletions

View File

@ -211,7 +211,7 @@ class InterfaceEditForm extends Component {
this.setState({
req_radio_type: HTTP_METHOD[this.state.method].request_body ? 'req-body' : 'req-query'
})
let that = this, mockPreview, resBodyEditor;
let that = this;
const initReqBody = that.state.req_body_other;
const initResBody = that.state.res_body;
mockEditor({
@ -225,24 +225,20 @@ class InterfaceEditForm extends Component {
}
})
resBodyEditor = mockEditor({
this.resBodyEditor = mockEditor({
container: 'res_body_json',
data: that.state.res_body,
onChange: function (d) {
if (d.format === true) {
mockPreview.setValue(d.mockText)
}
that.setState({
res_body: d.text,
res_body_mock: d.mockText
res_body: d.text
});
EditFormContext.props.changeEditStatus(initResBody !== d.text);
}
})
mockPreview = mockEditor({
this.mockPreview = mockEditor({
container: 'mock-preview',
data: resBodyEditor.curData.mockText,
data: '',
readOnly: true
})
@ -281,9 +277,28 @@ class InterfaceEditForm extends Component {
this.setState(newValue)
}
handleJsonType = (key) => {
handleMockPreview = ()=>{
let str = '';
try{
if(this.resBodyEditor.curData.format === true){
str = JSON.stringify(this.resBodyEditor.curData.mockData(), null , ' ');
}else{
str = '解析出错: ' + this.resBodyEditor.curData.format;
}
}catch(err){
str = '解析出错: ' + err.message;
}
this.mockPreview.setValue(
str
)
}
handleJsonType = (key) => {
key = key || 'tpl';
if(key === 'preview'){
this.handleMockPreview()
}
this.setState({
jsonType: key
})
@ -742,7 +757,7 @@ class InterfaceEditForm extends Component {
<TabPane tab="模板" key="tpl">
</TabPane>
<TabPane tab="预览" key="preview">
<TabPane tab="预览" key="preview">
</TabPane>

View File

@ -68,10 +68,8 @@ function run(options) {
var obj = json5.parse(json);
curData.format = true;
curData.jsonData = obj;
curData.mockData = Mock.mock(MockExtra(obj, {}));
curData.mockText = JSON.stringify(curData.mockData, null, " ");
curData.mockData = ()=>Mock.mock(MockExtra(obj, {})); //为防止时时 mock 导致页面卡死的问题,改成函数式需要用到再计算
} catch (e) {
curData.format = e.message;
}
}

View File

@ -42,19 +42,58 @@ YApi 提供了写 JS 脚本方式处理这一问题,可以根据用户请求
响应
- `mockJson` 接口定义的响应数据 Mock 模板
- `resHeader` 响应的 HTTP 头
- `httpCode` 响应的 HTTP 状态码
- `delay` Mock 响应延时
- `mockJson`
接口定义的响应数据 Mock 模板
- `resHeader`
响应的 HTTP 头
- `httpCode`
响应的 HTTP 状态码
- `delay`
Mock 响应延时,单位为 ms
- `Random`
Mock.Random 方法,详细使用方法请查看 <a href="https://github.com/nuysoft/Mock/wiki/Mock.Random">Wiki</a>
### 使用方法
1. 首先开启此功能
2. Mock 脚本就是用 JavaScript 对 `mockJson` 变量修改
2. Mock 脚本就是用 JavaScript 对 `mockJson` 变量修改,请避免被全局变量(httpCode, resHeader, delay)的修改
### 示例:
<div class="doc-img-wrapper"><img class="doc-img-r" src="./images/usage/adv-mock.jpg" /></div>
### 示例1, 根据请求参数重写 mockJson
```
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;
}
```
### 示例2, 生成高度自定义数据内容
```
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() + '银行'
})
}
```
## Mock 优先级说明
请求 Mock 数据时规则匹配优先级Mock 期望 > 自定义 Mock 脚本 > 普通 Mock。

View File

@ -6,6 +6,7 @@ const mongoose = require('mongoose');
const _ = require('underscore');
const path = require('path');
const lib = require(path.resolve(yapi.WEBROOT, 'common/lib.js' ));
const Mock = require('mockjs');
function arrToObj(arr){
let obj = {};
@ -155,7 +156,7 @@ module.exports = function(){
let caseData = await checkCase(context.ctx, interfaceId);
if(caseData){
let data = await handleByCase(caseData, context);
context.mockJson = data.res_body;
context.mockJson = yapi.commons.json_parse(data.res_body);
context.resHeader = arrToObj(data.headers);
context.httpCode = data.code;
context.delay = data.delay;
@ -175,7 +176,8 @@ module.exports = function(){
params: Object.assign({}, context.ctx.query, context.ctx.request.body),
resHeader: context.resHeader,
httpCode: context.httpCode,
delay: context.httpCode
delay: context.httpCode,
Random: Mock.Random
}
sandbox.cookie = {};

View File

@ -189,12 +189,43 @@
<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>
<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 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>
<li>首先开启此功能</li><li>Mock 脚本就是用 JavaScript 对 <code>mockJson</code> 变量修改,请避免被全局变量(httpCode, resHeader, delay)的修改</li></ol>
<h3 class="subject" id="示例1,_根据请求参数重写_mockJson">示例1, 根据请求参数重写 mockJson <a class="hashlink" href="#示例1,_根据请求参数重写_mockJson">#</a></h3><pre><code>if(params.type == <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
mockJson.errcode = <span class="token number">400</span><span class="token punctuation">;</span>
mockJson.errmsg = 'error<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<h2 class="subject" id="Mock_优先级说明">Mock 优先级说明 <a class="hashlink" href="#Mock_优先级说明">#</a></h2><p>请求 Mock 数据时规则匹配优先级Mock 期望 &gt; 自定义 Mock 脚本 &gt; 普通 Mock。</p>
if(header.token == 't'<span class="token punctuation">)</span><span class="token punctuation">{</span>
mockJson.errcode = <span class="token number">300</span><span class="token punctuation">;</span>
mockJson.errmsg = 'error<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
if(cookie.type == 'a'<span class="token punctuation">)</span><span class="token punctuation">{</span>
mockJson.errcode = <span class="token number">500</span><span class="token punctuation">;</span>
mockJson.errmsg = 'error<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><h3 class="subject" id="示例2,_生成高度自定义数据内容">示例2, 生成高度自定义数据内容 <a class="hashlink" href="#示例2,_生成高度自定义数据内容">#</a></h3><pre><code>var a = <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">]</span>
mockJson = <span class="token punctuation">{</span>
errcode<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
email<span class="token operator">:</span> Random.email('qq.com'<span class="token punctuation">)</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> a.map(function(item<span class="token punctuation">)</span><span class="token punctuation">{</span>
return Random.city(<span class="token punctuation">)</span> + '银行'
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><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>

View File

@ -3379,7 +3379,7 @@
<tr>
<td>req_params</td>
<td>Array</td>
<td>name, desc两个参数</td>
<td>路径参数 name, desc两个参数</td>
<td>
</td>

View File

@ -134,7 +134,7 @@
</li>
<li >
<a href="#定义mock数据示例">定义mock数据示例</a>
<a href="#定义_mock_数据示例">定义 mock 数据示例</a>
</li>
<li >
@ -146,7 +146,7 @@
</li>
<li >
<a href="#Mock语法规范">Mock语法规范</a>
<a href="#Mock_语法规范">Mock 语法规范</a>
</li>
</ul>
@ -175,15 +175,15 @@
<div class="content-right markdown-body use-sidebar" role="main">
<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>
<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><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
<pre><code>mockd 地址: http<span class="token operator">:</span>//yapi.xxx.com/mock/<span class="token number">29</span>/api/hackathon/login
</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>
<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> //接口状态
<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>
@ -208,34 +208,34 @@
<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> //枚举数据类型可这样实现
<span class="token punctuation">}</span>
</code></pre><p>2 支持替换请求的query,body参数</p>
</code></pre><p>2 支持替换请求的 query, body 参数</p>
<pre><code><span class="token punctuation">{</span>
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"${query.name}"</span><span class="token punctuation">,</span> //请求的url是/path?name=xiaoming<span class="token punctuation">,</span> 返回的name字段是xiaoming
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"${body.type}"</span> //请求的requestBody type=<span class="token number">1</span><span class="token punctuation">,</span>返回的type字段是<span class="token number">1</span>
<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_在js代码直接请求yapi提供的mock地址不用担心跨域问题">1 在js代码直接请求yapi提供的mock地址不用担心跨域问题 <a class="hashlink" href="#1_在js代码直接请求yapi提供的mock地址不用担心跨域问题">#</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.xxx.com/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>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
<h3 class="subject" id="2_基于本地服务器反向代理">2 基于本地服务器反向代理 <a class="hashlink" href="#2_基于本地服务器反向代理">#</a></h3><p>优点:不用修改项目代码</p>
<h4 class="subject" id="2.1_基于nginx反向代理">2.1 基于nginx反向代理 <a class="hashlink" href="#2.1_基于nginx反向代理">#</a></h4><pre><code class="lang-nginx"><span class="token keyword">location</span> <span class="token operator">/</span>baseapi
<h4 class="subject" id="2.1_基于_nginx_反向代理">2.1 基于 nginx 反向代理 <a class="hashlink" href="#2.1_基于_nginx_反向代理">#</a></h4><pre><code class="lang-nginx"><span class="token keyword">location</span> <span class="token operator">/</span>baseapi
<span class="token punctuation">{</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>xxx<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_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>
<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.xxx.com/mock/58/api/$1'</span>
<span class="token punctuation">}</span>
</code></pre>
<p>上面通过正则匹配,将所有接口转到 <a href="http://yapi.xxx.com">http://yapi.xxx.com</a> 上,比如 <code>http://localhost/api/user/status</code> 会成为 <code>http://yapi.xxx.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>
<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><blockquote>
<h2 class="subject" id="Mock_语法规范">Mock 语法规范 <a class="hashlink" href="#Mock_语法规范">#</a></h2><blockquote>
<p>了解更多Mock详情<a href="http://mockjs.com/examples.html">Mock.js 官方文档</a></p>
</blockquote>
<p>Mock.js 的语法规范包括两部分:</p>

View File

@ -63,7 +63,7 @@ class interfaceController extends baseController {
* @param {Boolean} [req_headers[].required] 是否是必须,默认为否
* @param {String} [req_headers[].desc] header描述
* @param {String} [req_body_type] 请求参数方式,有["form", "json", "text", "xml"]四种
* @param {Array} [req_params] name, desc两个参数
* @param {Array} [req_params] 路径参数 name, desc两个参数
* @param {Mixed} [req_body_form] 请求参数,如果请求方式是form参数是Array数组其他格式请求参数是字符串
* @param {String} [req_body_form[].name] 请求参数名
* @param {String} [req_body_form[].value] 请求参数值可填写生成规则mock。如@email随机生成一条email