基于 xe-ajax 的 Mock 虚拟服务
npm install xe-ajax-mockshell
npm install xe-ajax xe-ajax-mock
`
`javascript
import XEAjax from 'xe-ajax'
import XEAjaxMock from 'xe-ajax-mock'
XEAjax.use(XEAjaxMock)
`
Get on unpkg and cdnjs
`HTML
`
API
* Mock( defines, options )
* Mock( path, method, response, options )
* HEAD( path, response, options )
* GET( path, response, options )
* POST( path, response, options )
* PUT( path, response, options )
* DELETE( path, response, options )
* PATCH( path, response, options )
* JSONP( path, response, options )
$3
* path 请求路径
* method 请求方法
* response 对象或者函数(request, response, context)，格式: {status: 200, statusText: 'OK', body: {}, headers: {}}
* options 参数
$3
| Name | Type | Description | default value |
|------|------|-----|----|
| baseURL | String | 基础路径 | 默认上下文路径 |
| template | Boolean | 是否允许数据模板自动编译, 可以设置 [true,false] | 默认 false |
| pathVariable | Boolean | 是否启用路径参数类型自动解析, 可以设置 [true,false,'auto'] | 默认 true |
| timeout | String | 设置请求响应的时间 | 默认 '20-400' |
| jsonp | String | 设置jsonp回调参数名称 | |
| headers | Object | 设置响应头信息 | |
| error | Boolean | 控制台输出请求错误日志, 可以设置 [true,false] | 默认 true |
| log | Boolean | 控制台输出请求请求日志, 可以设置 [true,false] | 默认 false |
全局参数
`javascript
import XEAjaxMock from 'xe-ajax-mock'
XEAjaxMock.setup({
baseURL: 'http://xuliangzhan.com',
template: true,
pathVariable: 'auto', // 如果为auto则支持自动转换类型
timeout: '50-600',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
error: true,
log: true
})
`
Template - 基础语法
$3
[key]|number
`javascript
import { template } from 'xe-ajax-mock'
template({
'num|number': '123'
})
// {num: 123}
`
$3
[key]|boolean
`javascript
import { template } from 'xe-ajax-mock'
template({
'flag1|boolean': 'true',
'flag2|boolean': 'false'
})
// {flag1: true, flag2: false}
`
$3
[key]|array([min]-[max])
`javascript
import { template } from 'xe-ajax-mock'
template({
'region|array(1-5)': 'val'
})
// {region: ['val', 'val', 'val']}
template({
'region|array(1)': ["beijing", "shanghai", "guangzhou", "shenzhen"]
})
// {region: ['beijing']}
template({
'region|array(1-3)': ["beijing", "shanghai", "guangzhou", "shenzhen"]
})
// {region: ['shenzhen', 'shanghai']}
`
$3
[key]|random([min]-[max])
`javascript
import { template } from 'xe-ajax-mock'
template({
'region|random(1-5)': 'val'
})
// {region: ['val', 'val', 'val']}
template({
'region|random(1)': ["beijing", "shanghai", "guangzhou", "shenzhen"]
})
// {region: 'shanghai'}
template({
'region|random(1-3)': ["beijing", "shanghai", "guangzhou", "shenzhen"]
})
// {region: ['beijing', 'guangzhou']}
`
$3
`javascript
import { template } from 'xe-ajax-mock'
template({
'id|number': '1',
'name': 'test 1',
'region|array(1)': ["beijing", "shanghai", "guangzhou", "shenzhen"],
'active|boolean': '1'
'age|number': '30'
})
// {id: 1,name: 'test 1', region: ['shanghai'], active: true, age: 30}
`
$3
`javascript
import { template } from 'xe-ajax-mock'
template(['{{ random.repeat("abcdefg",10,20) }}', '{{ random.date("2018-03-04","2018-03-20") }}'])
// ['gbabcdefega', '2018-03-13 14:52:02']
template([{
'id|number': '1',
'name': 'test1',
'region|array(1)': ["beijing", "shanghai", "guangzhou", "shenzhen"],
'active|boolean': '0',
'age|number': '30'
}])
// [{id: 1,name: 'test 0', region: ['guangzhou'], active: false, age: 30}]
`
$3
$size 获取数组大小
$index 获取数组索引
$params 获取请求查询参数
$body 获取请求提交参数
$pathVariable 获取请求路径参数
`javascript
import { template } from 'xe-ajax-mock'
template({
'result|array(1-5)': {
'id|number': '{{ $index }}',
'size|number': '{{ $size }}',
'name': '{{ $params.name }}',
'password': '{{ $body.password }}'
}
})
// {
// age: {pageSize: 10, currentPage: 1},
// result: [
// {id: 0, size: 2, name: 'test', password: ''},
// {id: 1, size: 2, name: 'test', password: ''}
// ]
// }
`
$3
~ 如果对象中只有一个属性，返回对应值
`javascript
import { template } from 'xe-ajax-mock'
template({
'~': {
'id|number': '1',
'name': 'test {{ $index }}',
'region|array(1)': ["beijing", "shanghai", "guangzhou", "shenzhen"],
'active|boolean': '{{ random.num(0,1) }}',
'age|number': '{{ random.num(18,60) }}'
}
})
// {id: 1, name: 'test 0', region: ['shenzhen'], active: true, age: 30}
template({
'~|array(1-2)': {
'id|number': '{{ $index+1 }}',
'name': 'test {{ $index }}',
'region|array(1)': ["beijing", "shanghai", "guangzhou", "shenzhen"],
'active|boolean': '{{ random.num(0,1) }}',
'age|number': '{{ random.num(18,60) }}'
}
})
// [{id: 1, name: 'test 0', region: ['shanghai'], active: true, age: 30},
// {id: 2, name: 'test 1', region: ['shenzhen'], active: false, age: 42}]
`
Template - 函数的使用
$3
random.num(min, max)
`javascript
import { template } from 'xe-ajax-mock'
template({
'age': '{{ random.num(18,60) }}'
})
// {age: '30'}
template({
'ip': '{{ random.num(1,254) }}.{{ random.num(1,254) }}.{{ random.num(1,254) }}.{{ random.num(1,254) }}'
})
// {ip: '147.136.43.175'}
template({
'color': 'rgb({{ random.num(100,120) }}, {{ random.num(140,180) }}, {{ random.num(140,160) }})'
})
// {color: 'rgb(242, 121, 132)'}
`
$3
random.repeat(array|string, min, max)
`javascript
import { template } from 'xe-ajax-mock'
template({
'describe': '{{ random.repeat("abcdefg",10,200) }}'
})
// {describe: 'bacdeggaccedbga'}
template({
'email': '{{ random.repeat("abcdefg",5,20) }}@163.{{ random.repeat(["com","net"],1) }}'
})
// {email: 'abcfdgecee@163.com'}
`
$3
random.time(startDate, endDate)
`javascript
import { template } from 'xe-ajax-mock'
template({
'datetime': '{{ random.time("2018-03-04") }}'
})
// {datetime: '1520092800000'}
template({
'datetime': '{{ random.time("2018-03-04","2018-03-20") }}'
})
// {datetime: '1520611200000'}
`
$3
random.date(startDate, endDate, format)
`javascript
import { template } from 'xe-ajax-mock'
template({
'dateStr': '{{ random.date("2018-03-04") }}'
})
// {dateStr: '2018-03-04'}
template({
'dateStr': '{{ random.date("2018-03-04",null,"yyyy-MM-dd HH:mm:ss.S") }}'
})
// {dateStr: '2018-03-04 00:00:00.0'}
template({
'dateStr': '{{ random.date("2018-03-04","2018-03-20") }}'
})
// {dateStr: '2018-03-10'}
template({
'dateStr': '{{ random.date("2018-03-04","2018-03-20","yyyy-MM-dd HH:mm:ss.S") }}'
})
// {dateStr: '2018-03-10 10:30:20.500'}
`
$3
`javascript
import { template } from 'xe-ajax-mock'
// GET('http://xuliangzhan.com/api/user/list/{pageSize/{currentPage}') ==> XEAjax.fetchGet('api/user/list/10/1')
template({
"page": {
"currentPage|number": "{{ $pathVariable.currentPage }}",
"pageSize|number": "{{ $pathVariable.pageSize }}",
"totalResult|number": "{{ random.num(100,200) }}"
},
"result|array({{ $pathVariable.pageSize }})": {
"id|number": "{{ $index+1 }}",
"name": "test {{ $index }}",
"region|random(1)": ["beijing", "shanghai", "guangzhou", "shenzhen"],
"roles|array(1-3)": ["admin", "developer", "tester", "designer"],
"isLogin|boolean": "{{ random.num(0,1) }}",
"email": "{{ random.repeat('abcdefg',5,20) }}@qq.{{ random.repeat(['com','net'],1) }}",
"color": "rgb(120, {{ random.num(140,180) }}, {{ random.num(140,160) }})",
"ip": "192.168.{{ random.num(1,254) }}.{{ random.num(1,254) }}",
"age|number": "{{ random.num(18,60) }}",
"password": "{{ random.num(100000,999999) }}",
"describe": "{{ random.repeat('abcdefg',10,200) }}",
"createDate": "{{ random.date('2018-01-01','2018-06-20') }}",
"updateTime": "{{ random.time('2018-01-01','2018-06-20') }}"
}
})
`
$3
template.mixin({})
`javascript
import { template } from 'xe-ajax-mock'
template.mixin({
format (str) {
return 'format: ' + str
}
})
template({
'val': '{{ format("2018-01-01") }}'
})
// {val: 'format: 2018-01-01'}
`
Example
example
$3
`javascript
import { Mock } from 'xe-ajax-mock'
Mock([{
path: '/api/user',
children: [{
method: 'GET',
path: 'list',
response: {
'~|array(1-3)': {
'id|number': '{{ $index+1 }}',
'name': '{{ random.repeat("abcdefg",4,20) }}'
}
},
}, {
method: 'POST',
path: 'submit',
response: {msg: 'success'},
},
{
method: 'DELETE',
path : 'delete/{id}',
response (request, response) {
response.status = 500
response.body = {msg: 'error'}
return response
}
]
}])
`
$3
`javascript
import { HEAD } from 'xe-ajax-mock'
HEAD('/api/user/head', null)
`
$3
`javascript
import { GET } from 'xe-ajax-mock'
GET('/api/user/list', {msg: 'success'})
GET('/api/user/list', (request, response) => {
response.status = 200
response.statusText = 'OK'
response.body = {
'~|array(1-3)': {
'id|number': '{{ $index+1 }}',
'name': '{{ random.repeat("abcdefg",4,20) }}'
}
}
return response
})
GET('/api/user/list/{pageSize}/{currentPage}', (request, response, { pathVariable }) => {
response.body = {
'page': {
'currentPage|number': '{{ $pathVariable.currentPage }}',
'pageSize|number': '{{ $pathVariable.pageSize }}'
},
'result|array(2-5)': {
'id|number': '{{ $index+1 }}',
'name': '{{ random.repeat("abcdefg",4,20) }}'
}
}
return response
})
`
$3
`javascript
import { template, POST } from 'xe-ajax-mock'
POST('/api/user/save', {msg: 'success'})
POST('/api/user/save', (request, response) => {
response.body = {msg: 'success'}
return response
})
POST('/api/user/save', (request, response) => {
// 简单模拟后台校验
if (request.params.id) {
response.body = {msg: 'success'}
} else {
response.status = 500
response.body = {msg: 'error'}
}
return response
})
`
$3
`javascript
import { PUT } from 'xe-ajax-mock'
PUT('/api/user/update', {msg: 'success'})
PUT('/api/user/update', (request, response) => {
response.status = 500
response.body = {msg: 'error'}
return response
})
`
$3
`javascript
import { DELETE } from 'xe-ajax-mock'
DELETE('/api/user/delete/{id}', {msg: 'success'})
DELETE('/api/user/delete/{id}', (request, response) => {
response.body = {msg: 'success'}
return response
})
`
$3
`javascript
import { PATCH } from 'xe-ajax-mock'
PATCH('/api/user/update', {msg: 'success'})
`
$3
`javascript
import { JSONP } from 'xe-ajax-mock'
JSONP('http://xuliangzhan.com/jsonp/user/message', {msg: 'success'})
JSONP('http://xuliangzhan.com/jsonp/user/message', (request, response) => {
response.body = {
'~|array(1-3)': {
'id|number': '{{ $index+1 }}',
'name': '{{ random.repeat("abcdefg",4,20) }}'
}
}
return response
}， {jsonp: 'cb'})
``