mirror of
https://github.com/YMFE/yapi.git
synced 2025-01-06 12:45:22 +08:00
fix: 文档整理
This commit is contained in:
qitmac000249
parent
9d31a3bd32
commit
1f4a55d70e
@ -1,20 +1,19 @@
|
||||
### Mock功能
|
||||
|
||||
<p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口，这些接口会自动生成模拟数据，支持复杂的生成逻辑，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。</p>
|
||||
<p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则([点击到Mock规则](#mock)）生成Mock接口，这些接口会自动生成模拟数据，支持复杂的生成逻辑，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。</p>
|
||||
|
||||
#### 1 添加接口
|
||||
|
||||
通过点击页面上的"+添加接口"
|
||||
#### 1 Mock步骤
|
||||
##### 1.1 创建接口
|
||||
通过点击页面上的"+添加接口"（若是接口已存在则跳到 1.2 ）
|
||||
|
||||
<img src="http://note.youdao.com/yws/api/personal/file/WEB613bd4f29db038f2b41c03dcfceda2b6?method=download&shareKey=29bfc2b855f6f26ce0079baf567e54cc" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
|
||||
输入协议、URL、接口名、请求头、请求参数、mock规则等信息，然后点击右上角的"Mock"按钮。
|
||||
输入协议、URL、接口名、请求头、请求参数、Mock规则（[点击到Mock规则](#mock)）等信息，然后点击右上角的"Mock"按钮。
|
||||
|
||||
<img src="http://upload-images.jianshu.io/upload_images/842107-78c0ea839619d068.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
|
||||
#### 2 Mock
|
||||
|
||||
当点击"Mock"按钮之后，就会在页面下方生成一个mock结果并产生一个API接口。点击"复制"按钮即可复制，用户拿到接口后就可以发请求了。
|
||||
##### 1.2 开始Mock
|
||||
当点击"Mock"按钮之后，就会在页面下方生成一个mock结果并产生一个API接口。
|
||||
|
||||
<img src="http://note.youdao.com/yws/api/personal/file/WEBf9b154cb88d21daa8206e8c4a3d76042?method=download&shareKey=1999f6c2cf197b5b6d775c312e34073d" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
|
||||
@ -28,6 +27,180 @@
|
||||
|
||||
<img src="http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&shareKey=218b9326659208ec564b9fff3ea8c6c3" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
|
||||
|
||||
|
||||
<span id = "mock"></span>
|
||||
#### 2.1 Mock语法规范
|
||||
>参考自：[Mock.js 官网](http://mockjs.com/)
|
||||
|
||||
Mock.js 的语法规范包括两部分：
|
||||
|
||||
[1. 数据模板定义规范（Data Template Definition，DTD）](#DTD)
|
||||
|
||||
[2. 数据占位符定义规范（Data Placeholder Definition，DPD）](#DPD)
|
||||
|
||||
<span id = "DTD"></span>
|
||||
#### 数据模板定义规范（Data Template Definition，DTD）
|
||||
|
||||
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
|
||||
|
||||
|
||||
```
|
||||
// 属性名 name （与生成规则之间用 "|" 隔开）
|
||||
// 生成规则 rule（生成规则有7种详见下面的生成规则）
|
||||
// 属性值 value（可以含有 "@占位符" 同时也指定了最终值的初始值和类型）
|
||||
|
||||
'name|rule': value
|
||||
|
||||
生成规则：
|
||||
'name|min-max': value
|
||||
'name|count': value
|
||||
'name|min-max.dmin-dmax': value
|
||||
'name|min-max.dcount': value
|
||||
'name|count.dmin-dmax': value
|
||||
'name|count.dcount': value
|
||||
'name|+step': value
|
||||
```
|
||||
|
||||
生成规则示例：
|
||||
##### 1. 属性值是字符串 String
|
||||
|
||||
```
|
||||
1. 'name|min-max': string
|
||||
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
|
||||
|
||||
2. 'name|count': string
|
||||
通过重复 string 生成一个字符串，重复次数等于 count。
|
||||
```
|
||||
##### 2. 属性值是数字 Number
|
||||
```
|
||||
1. 'name|+1': number
|
||||
|
||||
属性值自动加 1，初始值为 number。
|
||||
|
||||
2. 'name|min-max': number
|
||||
|
||||
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
|
||||
|
||||
3. 'name|min-max.dmin-dmax': number
|
||||
|
||||
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
|
||||
|
||||
例如：
|
||||
Mock.mock({
|
||||
'number1|1-100.1-10': 1,
|
||||
'number2|123.1-10': 1,
|
||||
'number3|123.3': 1,
|
||||
'number4|123.10': 1.123
|
||||
})
|
||||
// =>
|
||||
{
|
||||
"number1": 12.92,
|
||||
"number2": 123.51,
|
||||
"number3": 123.777,
|
||||
"number4": 123.1231091814
|
||||
}
|
||||
```
|
||||
|
||||
##### 3. 属性值是布尔型 Boolean
|
||||
```
|
||||
1. 'name|1': boolean
|
||||
|
||||
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
|
||||
|
||||
2. 'name|min-max': value
|
||||
|
||||
随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
|
||||
```
|
||||
##### 4. 属性值是对象 Object
|
||||
```
|
||||
1. 'name|count': object
|
||||
|
||||
从属性值 object 中随机选取 count 个属性。
|
||||
|
||||
2. 'name|min-max': object
|
||||
|
||||
从属性值 object 中随机选取 min 到 max 个属性。
|
||||
```
|
||||
##### 5. 属性值是数组 Array
|
||||
```
|
||||
1. 'name|1': array
|
||||
|
||||
从属性值 array 中随机选取 1 个元素，作为最终值。
|
||||
|
||||
2. 'name|+1': array
|
||||
|
||||
从属性值 array 中顺序选取 1 个元素，作为最终值。
|
||||
|
||||
3. 'name|min-max': array
|
||||
|
||||
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
|
||||
|
||||
4. 'name|count': array
|
||||
|
||||
通过重复属性值 array 生成一个新数组，重复次数为 count。
|
||||
```
|
||||
##### 6. 属性值是函数 Function
|
||||
```
|
||||
1. 'name': function
|
||||
|
||||
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
|
||||
```
|
||||
##### 7.属性值是正则表达式 RegExp
|
||||
```
|
||||
1. 'name': regexp
|
||||
|
||||
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
|
||||
|
||||
例如：
|
||||
Mock.mock({
|
||||
'regexp1': /[a-z][A-Z][0-9]/,
|
||||
'regexp2': /\w\W\s\S\d\D/,
|
||||
'regexp3': /\d{5,10}/
|
||||
})
|
||||
// =>
|
||||
{
|
||||
"regexp1": "pJ7",
|
||||
"regexp2": "F)\fp1G",
|
||||
"regexp3": "561659409"
|
||||
}
|
||||
```
|
||||
<span id = "DPD"></span>
|
||||
#### 数据占位符定义规范（Data Placeholder Definition，DPD）
|
||||
|
||||
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
|
||||
|
||||
占位符 的格式为：
|
||||
```
|
||||
@占位符
|
||||
@占位符(参数 [, 参数])
|
||||
|
||||
说明：
|
||||
1. 用 @ 来标识其后的字符串是 占位符。
|
||||
2. 占位符 引用的是 Mock.Random 中的方法。
|
||||
3. 通过 Mock.Random.extend() 来扩展自定义占位符。
|
||||
4. 占位符 也可以引用 数据模板 中的属性。
|
||||
5. 占位符 会优先引用 数据模板 中的属性。
|
||||
6. 占位符 支持 相对路径 和 绝对路径。
|
||||
|
||||
Mock.mock({
|
||||
name: {
|
||||
first: '@FIRST',
|
||||
middle: '@FIRST',
|
||||
last: '@LAST',
|
||||
full: '@first @middle @last'
|
||||
}
|
||||
})
|
||||
// 上面的示例可以得到如下结果：
|
||||
{
|
||||
"name": {
|
||||
"first": "Charles",
|
||||
"middle": "Brenda",
|
||||
"last": "Lopez",
|
||||
"full": "Charles Brenda Lopez"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 未来计划推出功能
|
||||
|
||||
1. 可视化JSON编辑器，可定义JSON_Schema和mockjs
|
||||
|
||||
@ -3426,8 +3426,8 @@
|
||||
var $this = $(this);
|
||||
$this.removeClass('extend').addClass('fold');
|
||||
$this.html('折叠代码');
|
||||
$this.prev().height('auto');
|
||||
$this.prev().parent().height('auto');
|
||||
$this.parent().children('.js-code').height('auto');
|
||||
$this.parent().height('auto');
|
||||
});
|
||||
$('.ydoc-example').delegate('.fold', 'click', function() {
|
||||
var $this = $(this);
|
||||
@ -3435,7 +3435,7 @@
|
||||
EXAMPLE_MAX_HEIGHT = lineHeight * (foldnumber || 6);
|
||||
$this.removeClass('fold').addClass('extend');
|
||||
$this.parent().height(EXAMPLE_MAX_HEIGHT); // pre
|
||||
$this.prev().height(EXAMPLE_MAX_HEIGHT); // code
|
||||
$this.parent().children('.js-code').height(EXAMPLE_MAX_HEIGHT); // code
|
||||
$this.html("展开更多……");
|
||||
});
|
||||
}
|
||||
|
||||
@ -175,8 +175,8 @@
|
||||
var $this = $(this);
|
||||
$this.removeClass('extend').addClass('fold');
|
||||
$this.html('折叠代码');
|
||||
$this.prev().height('auto');
|
||||
$this.prev().parent().height('auto');
|
||||
$this.parent().children('.js-code').height('auto');
|
||||
$this.parent().height('auto');
|
||||
});
|
||||
$('.ydoc-example').delegate('.fold', 'click', function() {
|
||||
var $this = $(this);
|
||||
@ -184,7 +184,7 @@
|
||||
EXAMPLE_MAX_HEIGHT = lineHeight * (foldnumber || 6);
|
||||
$this.removeClass('fold').addClass('extend');
|
||||
$this.parent().height(EXAMPLE_MAX_HEIGHT); // pre
|
||||
$this.prev().height(EXAMPLE_MAX_HEIGHT); // code
|
||||
$this.parent().children('.js-code').height(EXAMPLE_MAX_HEIGHT); // code
|
||||
$this.html("展开更多……");
|
||||
});
|
||||
}
|
||||
|
||||
@ -134,8 +134,8 @@
|
||||
var $this = $(this);
|
||||
$this.removeClass('extend').addClass('fold');
|
||||
$this.html('折叠代码');
|
||||
$this.prev().height('auto');
|
||||
$this.prev().parent().height('auto');
|
||||
$this.parent().children('.js-code').height('auto');
|
||||
$this.parent().height('auto');
|
||||
});
|
||||
$('.ydoc-example').delegate('.fold', 'click', function() {
|
||||
var $this = $(this);
|
||||
@ -143,7 +143,7 @@
|
||||
EXAMPLE_MAX_HEIGHT = lineHeight * (foldnumber || 6);
|
||||
$this.removeClass('fold').addClass('extend');
|
||||
$this.parent().height(EXAMPLE_MAX_HEIGHT); // pre
|
||||
$this.prev().height(EXAMPLE_MAX_HEIGHT); // code
|
||||
$this.parent().children('.js-code').height(EXAMPLE_MAX_HEIGHT); // code
|
||||
$this.html("展开更多……");
|
||||
});
|
||||
}
|
||||
|
||||
@ -68,19 +68,153 @@
|
||||
<div class="ydoc-container-content " id="readme">
|
||||
|
||||
<article class="markdown-body">
|
||||
<h3 class="subject" id="Mock功能">Mock功能 <a class="hashlink" href="#Mock功能">#</a></h3> <p style='text-indent:2em;line-height:1.8em'>yapi的Mock功能可以根据用户的输入接口信息如协议、URL、接口名、请求头、请求参数、mock规则生成Mock接口，这些接口会自动生成模拟数据，支持复杂的生成逻辑，创建者可以自由构造需要的数据。而且与常见的Mock方式如将Mock写在代码里和JS拦截等相比yapi的Mock在使用场景和效率和复杂度上是相差甚远的，正是由于yapi的Mock是一个第三方平台那么在 团队开发时任何人都可以权限许可下创建、修改接口信息等操作，这对于团队开发是很有好处的。</p>
|
||||
<h3 class="subject" id="Mock功能">Mock功能 <a class="hashlink" href="#Mock功能">#</a></h3> <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>
|
||||
|
||||
<h4 class="subject" id="1_添加接口">1 添加接口 <a class="hashlink" href="#1_添加接口">#</a></h4><p>通过点击页面上的"+添加接口"</p>
|
||||
<h4 class="subject" id="1_Mock步骤">1 Mock步骤 <a class="hashlink" href="#1_Mock步骤">#</a></h4><h5 class="subject" id="1.1_创建接口">1.1 创建接口 <a class="hashlink" href="#1.1_创建接口">#</a></h5><p>通过点击页面上的"+添加接口"（若是接口已存在则跳到 1.2 ）</p>
|
||||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB613bd4f29db038f2b41c03dcfceda2b6?method=download&shareKey=29bfc2b855f6f26ce0079baf567e54cc" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<p> 输入协议、URL、接口名、请求头、请求参数、mock规则等信息，然后点击右上角的"Mock"按钮。</p>
|
||||
<p> 输入协议、URL、接口名、请求头、请求参数、Mock规则（<a href="#mock">点击到Mock规则</a>）等信息，然后点击右上角的"Mock"按钮。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-78c0ea839619d068.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<h4 class="subject" id="2_Mock">2 Mock <a class="hashlink" href="#2_Mock">#</a></h4><p>当点击"Mock"按钮之后，就会在页面下方生成一个mock结果并产生一个API接口。点击"复制"按钮即可复制，用户拿到接口后就可以发请求了。</p>
|
||||
<h5 class="subject" id="1.2_开始Mock">1.2 开始Mock <a class="hashlink" href="#1.2_开始Mock">#</a></h5><p>当点击"Mock"按钮之后，就会在页面下方生成一个mock结果并产生一个API接口。</p>
|
||||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEBf9b154cb88d21daa8206e8c4a3d76042?method=download&shareKey=1999f6c2cf197b5b6d775c312e34073d" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<p>将请求的信息填写完善如：请求方法（post、get等）、URL、请求头、请求的数据等。然后就点击"发送"，然后在"返回结果"出可以看到接口返回的数据。</p>
|
||||
<p><img src="http://upload-images.jianshu.io/upload_images/842107-2ee7171d707e91ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<h4 class="subject" id="3_成员管理">3 成员管理 <a class="hashlink" href="#3_成员管理">#</a></h4><p>你也可以通过点击"管理成员"来添加和删除项目的成员，便于团队管理。</p>
|
||||
<p><img src="http://note.youdao.com/yws/api/personal/file/WEB1b9defdf0cb884f46c2bd6c30ceb02fb?method=download&shareKey=218b9326659208ec564b9fff3ea8c6c3" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
|
||||
<h2 class="subject" id="未来计划推出功能">未来计划推出功能 <a class="hashlink" href="#未来计划推出功能">#</a></h2><ol>
|
||||
<p><span id = "mock"></span></p>
|
||||
<h4 class="subject" id="2.1_Mock语法规范">2.1 Mock语法规范 <a class="hashlink" href="#2.1_Mock语法规范">#</a></h4><blockquote>
|
||||
<p>参考自：<a href="http://mockjs.com/">Mock.js 官网</a></p>
|
||||
</blockquote>
|
||||
<p>Mock.js 的语法规范包括两部分：</p>
|
||||
<p><a href="#DTD">1. 数据模板定义规范（Data Template Definition，DTD）</a></p>
|
||||
<p><a href="#DPD">2. 数据占位符定义规范（Data Placeholder Definition，DPD）</a></p>
|
||||
<p><span id = "DTD"></span></p>
|
||||
<h4 class="subject" id="数据模板定义规范（Data_Template_Definition，DTD）">数据模板定义规范（Data Template Definition，DTD） <a class="hashlink" href="#数据模板定义规范（Data_Template_Definition，DTD）">#</a></h4><p>数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：</p>
|
||||
<pre><code>// 属性名 name （与生成规则之间用 "|<span class="token string">" 隔开）
|
||||
// 生成规则 rule（生成规则有7种详见下面的生成规则）
|
||||
// 属性值 value（可以含有 "</span>@占位符" 同时也指定了最终值的初始值和类型）
|
||||
|
||||
'name|rule'<span class="token operator">:</span> value
|
||||
|
||||
生成规则：
|
||||
'name|min-max'<span class="token operator">:</span> value
|
||||
'name|count'<span class="token operator">:</span> value
|
||||
'name|min-max.dmin-dmax'<span class="token operator">:</span> value
|
||||
'name|min-max.dcount'<span class="token operator">:</span> value
|
||||
'name|count.dmin-dmax'<span class="token operator">:</span> value
|
||||
'name|count.dcount'<span class="token operator">:</span> value
|
||||
'name|+step'<span class="token operator">:</span> value
|
||||
</code></pre><p>生成规则示例：</p>
|
||||
<h5 class="subject" id="1._属性值是字符串_String">1. 属性值是字符串 String <a class="hashlink" href="#1._属性值是字符串_String">#</a></h5><pre><code><span class="token number">1</span>. 'name|min-max'<span class="token operator">:</span> string
|
||||
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
|
||||
|
||||
<span class="token number">2</span>. 'name|count'<span class="token operator">:</span> string
|
||||
通过重复 string 生成一个字符串，重复次数等于 count。
|
||||
</code></pre><h5 class="subject" id="2._属性值是数字_Number">2. 属性值是数字 Number <a class="hashlink" href="#2._属性值是数字_Number">#</a></h5><pre><code><span class="token number">1</span>. 'name|+<span class="token number">1</span>'<span class="token operator">:</span> number
|
||||
|
||||
属性值自动加 <span class="token number">1</span>，初始值为 number。
|
||||
|
||||
<span class="token number">2</span>. 'name|min-max'<span class="token operator">:</span> number
|
||||
|
||||
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
|
||||
|
||||
<span class="token number">3</span>. 'name|min-max.dmin-dmax'<span class="token operator">:</span> number
|
||||
|
||||
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
|
||||
|
||||
例如：
|
||||
Mock.mock(<span class="token punctuation">{</span>
|
||||
'number1|<span class="token number">1</span>-<span class="token number">100.1</span>-<span class="token number">10</span>'<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
'number2|<span class="token number">123.1</span>-<span class="token number">10</span>'<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
'number3|<span class="token number">123.3</span>'<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
'number4|<span class="token number">123.10</span>'<span class="token operator">:</span> <span class="token number">1.123</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
// =>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"number1"</span><span class="token operator">:</span> <span class="token number">12.92</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"number2"</span><span class="token operator">:</span> <span class="token number">123.51</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"number3"</span><span class="token operator">:</span> <span class="token number">123.777</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"number4"</span><span class="token operator">:</span> <span class="token number">123.1231091814</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><h5 class="subject" id="3._属性值是布尔型_Boolean">3. 属性值是布尔型 Boolean <a class="hashlink" href="#3._属性值是布尔型_Boolean">#</a></h5><pre><code><span class="token number">1</span>. 'name|<span class="token number">1</span>'<span class="token operator">:</span> boolean
|
||||
|
||||
随机生成一个布尔值，值为 <span class="token boolean">true</span> 的概率是 <span class="token number">1</span>/<span class="token number">2</span>，值为 <span class="token boolean">false</span> 的概率同样是 <span class="token number">1</span>/<span class="token number">2</span>。
|
||||
|
||||
<span class="token number">2</span>. 'name|min-max'<span class="token operator">:</span> value
|
||||
|
||||
随机生成一个布尔值，值为 value 的概率是 min / (min + max<span class="token punctuation">)</span>，值为 !value 的概率是 max / (min + max<span class="token punctuation">)</span>。
|
||||
</code></pre><h5 class="subject" id="4._属性值是对象_Object">4. 属性值是对象 Object <a class="hashlink" href="#4._属性值是对象_Object">#</a></h5><pre><code><span class="token number">1</span>. 'name|count'<span class="token operator">:</span> object
|
||||
|
||||
从属性值 object 中随机选取 count 个属性。
|
||||
|
||||
<span class="token number">2</span>. 'name|min-max'<span class="token operator">:</span> object
|
||||
|
||||
从属性值 object 中随机选取 min 到 max 个属性。
|
||||
</code></pre><h5 class="subject" id="5._属性值是数组_Array">5. 属性值是数组 Array <a class="hashlink" href="#5._属性值是数组_Array">#</a></h5><pre><code><span class="token number">1</span>. 'name|<span class="token number">1</span>'<span class="token operator">:</span> array
|
||||
|
||||
从属性值 array 中随机选取 <span class="token number">1</span> 个元素，作为最终值。
|
||||
|
||||
<span class="token number">2</span>. 'name|+<span class="token number">1</span>'<span class="token operator">:</span> array
|
||||
|
||||
从属性值 array 中顺序选取 <span class="token number">1</span> 个元素，作为最终值。
|
||||
|
||||
<span class="token number">3</span>. 'name|min-max'<span class="token operator">:</span> array
|
||||
|
||||
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
|
||||
|
||||
<span class="token number">4</span>. 'name|count'<span class="token operator">:</span> array
|
||||
|
||||
通过重复属性值 array 生成一个新数组，重复次数为 count。
|
||||
</code></pre><h5 class="subject" id="6._属性值是函数_Function">6. 属性值是函数 Function <a class="hashlink" href="#6._属性值是函数_Function">#</a></h5><pre><code><span class="token number">1</span>. 'name'<span class="token operator">:</span> function
|
||||
|
||||
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
|
||||
</code></pre><h5 class="subject" id="7.属性值是正则表达式_RegExp">7.属性值是正则表达式 RegExp <a class="hashlink" href="#7.属性值是正则表达式_RegExp">#</a></h5><pre><code><span class="token number">1</span>. 'name'<span class="token operator">:</span> regexp
|
||||
|
||||
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
|
||||
|
||||
例如：
|
||||
Mock.mock(<span class="token punctuation">{</span>
|
||||
'regexp1'<span class="token operator">:</span> /<span class="token punctuation">[</span>a-z<span class="token punctuation">]</span><span class="token punctuation">[</span>A-Z<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span>-<span class="token number">9</span><span class="token punctuation">]</span>/<span class="token punctuation">,</span>
|
||||
'regexp2'<span class="token operator">:</span> /\w\W\s\S\d\D/<span class="token punctuation">,</span>
|
||||
'regexp3'<span class="token operator">:</span> /\d<span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">}</span>/
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
// =>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"regexp1"</span><span class="token operator">:</span> <span class="token string">"pJ7"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"regexp2"</span><span class="token operator">:</span> <span class="token string">"F)\fp1G"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"regexp3"</span><span class="token operator">:</span> <span class="token string">"561659409"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><p><span id = "DPD"></span></p>
|
||||
<h4 class="subject" id="数据占位符定义规范（Data_Placeholder_Definition，DPD）">数据占位符定义规范（Data Placeholder Definition，DPD） <a class="hashlink" href="#数据占位符定义规范（Data_Placeholder_Definition，DPD）">#</a></h4><p>占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。</p>
|
||||
<p>占位符 的格式为：</p>
|
||||
<pre><code>@占位符
|
||||
@占位符(参数 <span class="token punctuation">[</span><span class="token punctuation">,</span> 参数<span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||
|
||||
说明：
|
||||
<span class="token number">1</span>. 用 @ 来标识其后的字符串是 占位符。
|
||||
<span class="token number">2</span>. 占位符 引用的是 Mock.Random 中的方法。
|
||||
<span class="token number">3</span>. 通过 Mock.Random.extend(<span class="token punctuation">)</span> 来扩展自定义占位符。
|
||||
<span class="token number">4</span>. 占位符 也可以引用 数据模板 中的属性。
|
||||
<span class="token number">5</span>. 占位符 会优先引用 数据模板 中的属性。
|
||||
<span class="token number">6</span>. 占位符 支持 相对路径 和 绝对路径。
|
||||
|
||||
Mock.mock(<span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
first<span class="token operator">:</span> '@FIRST'<span class="token punctuation">,</span>
|
||||
middle<span class="token operator">:</span> '@FIRST'<span class="token punctuation">,</span>
|
||||
last<span class="token operator">:</span> '@LAST'<span class="token punctuation">,</span>
|
||||
full<span class="token operator">:</span> '@first @middle @last'
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
// 上面的示例可以得到如下结果：
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"first"</span><span class="token operator">:</span> <span class="token string">"Charles"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"middle"</span><span class="token operator">:</span> <span class="token string">"Brenda"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"last"</span><span class="token operator">:</span> <span class="token string">"Lopez"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"full"</span><span class="token operator">:</span> <span class="token string">"Charles Brenda Lopez"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><h2 class="subject" id="未来计划推出功能">未来计划推出功能 <a class="hashlink" href="#未来计划推出功能">#</a></h2><ol>
|
||||
<li>可视化JSON编辑器，可定义JSON_Schema和mockjs</li><li>支持HTTP和RPC协议</li><li>自动化测试</li><li>多人协作</li></ol>
|
||||
|
||||
</article>
|
||||
@ -127,8 +261,8 @@
|
||||
var $this = $(this);
|
||||
$this.removeClass('extend').addClass('fold');
|
||||
$this.html('折叠代码');
|
||||
$this.prev().height('auto');
|
||||
$this.prev().parent().height('auto');
|
||||
$this.parent().children('.js-code').height('auto');
|
||||
$this.parent().height('auto');
|
||||
});
|
||||
$('.ydoc-example').delegate('.fold', 'click', function() {
|
||||
var $this = $(this);
|
||||
@ -136,7 +270,7 @@
|
||||
EXAMPLE_MAX_HEIGHT = lineHeight * (foldnumber || 6);
|
||||
$this.removeClass('fold').addClass('extend');
|
||||
$this.parent().height(EXAMPLE_MAX_HEIGHT); // pre
|
||||
$this.prev().height(EXAMPLE_MAX_HEIGHT); // code
|
||||
$this.parent().children('.js-code').height(EXAMPLE_MAX_HEIGHT); // code
|
||||
$this.html("展开更多……");
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user