xe-ajax-mock 前端虚拟服务

Ajax 2020-07-02

最新版本见 Github，点击查看历史版本

基于 XEAjax 扩展的 Mock 虚拟服务插件；对于前后端分离的开发模式，ajax+mock 使前端不再依赖后端接口开发效率更高。

CDN

使用 script 方式安装，XEAjaxMock 会定义为全局变量
生产环境请使用 xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

cdnjs 获取最新版本

点击浏览已发布的所有 npm 包源码

<script src="https://cdn.jsdelivr.net/npm/xe-ajax-mock/dist/xe-ajax-mock.js"></script>

unpkg 获取最新版本

点击浏览已发布的所有 npm 包源码

<script src="https://unpkg.com/xe-ajax-mock/dist/xe-ajax-mock.js"></script>

AMD

require.js

// require 配置
require.config({
  paths: {
    // ...,'xe-ajax': './dist/xe-ajax.min','xe-ajax-mock': './dist/xe-ajax-mock.min'
  }
})

// ./mock/index.js 配置文件
define(['xe-ajax','xe-ajax-mock'],function (XEAjax,XEAjaxMock) {
  // 安装
  XEAjax.use(XEAjaxMock)
})

NPM

npm install xe-ajax xe-ajax-mock --save

NodeJS

const XEAjaxMock = require('xe-ajax-mock')

ES6 Module import

import XEAjaxMock from 'xe-ajax-mock'

ES6 Module import

import { GET,POST,PUT,DELETE,JSONP } from 'xe-ajax-mock'

API

提供的便捷方法：

  • Mock( defines,options )
  • Mock( path,method,response,options )
  • HEAD( path,options )
  • GET( path,options )
  • POST( path,options )
  • PUT( path,options )
  • DELETE( path,options )
  • PATCH( path,options )
  • JSONP( path,options )

入参

  • path（字符串）请求地址，占位符{key}支持动态路径: 例如: /api/list/{key1}/{key2} 匹配 /api/list/10/1
  • method（字符串）请求方法 | 默认GET
  • response（对象/方法(request,context)）数据或返回数据方法，格式：{status: 200,statusText: 'OK',body: {},headers: {}}
  • options （可选，对象）参数

options 参数说明

参数 类型 描述 值
baseURL String 基础路径 默认上下文路径
template Boolean 启用数据模板自动编译,可以设置true,false 默认false
pathVariable Boolean 启用路径参数类型自动解析,可以设置false,true,auto 默认true
timeout String 模拟请求时间 默认'20-400'
jsonp String jsonp入参属性名 默认callback
headers Object 设置响应头
error Boolean 控制台输出错误日志,false true
log Boolean 控制台输出请求详细日志,false false

全局参数设置

import XEAjaxMock from 'xe-ajax-mock'

XEAjaxMock.setup({
  baseURL: 'http://xuliangzhan.com',template: true,pathVariable: 'auto',timeout: '100-600',headers: {
    'Content-Type': 'application/json; charset=utf-8'
  },error: true,log: true
})

数据模板 - 基本语法

数值

[key]|number

import { template } from 'xe-ajax-mock'

template({
  'num|number': '123'
})
// 结果: {num: 123}

布尔值

[key]|boolean

import { template } from 'xe-ajax-mock'

template({
  'flag1|boolean': 'true','flag2|boolean': 'false'
})
// 结果: {flag1: true,flag2: false}

生成一个或多个值

[key]|array([min]-[max])

import { template } from 'xe-ajax-mock'

template({
  'region|array(1-5)': '值'
})
// 结果: {region: ['值','值','值']}

template({
  'region|array(1)': ['深圳','北京','上海','广州']
})
// 结果: {region: ['深圳']}

template({
  'region|array(1-3)': ['深圳','广州']
})
// {region: ['深圳','北京']}

随机生成一个或多个值

[key]|random([min]-[max])

import { template } from 'xe-ajax-mock'

template({
  'region|random(1-5)': '值'
})
// 结果: {region: ['值','值']}

template({
  'region|random(1)': ['深圳','广州']
})
// 结果: {region: '深圳'}

template({
  'region|random(1-3)': ['深圳','广州']
})
// 结果: {region: ['上海','北京']}

对象

import { template } from 'xe-ajax-mock'

template({
  'id|number': '1','name': 'test 1','region|array(1)': ['深圳','广州'],'active|boolean': '1'
  'age|number': '30'
})
// 结果: {id: 1,name: 'test 1',region: ['深圳'],active: true,age: 30}

数组

import { template } from 'xe-ajax-mock'

template(['{{ random.repeat("随机产生一段文本",10,20) }}','{{ random.date("2018-03-04","2018-03-20") }}'])
// 结果: ['"产机文机文生生一产产随本生随随段段一本"','2018-03-13 14:52:02']

template([{
  'id|number': '1','name': 'test1','active|boolean': '0','age|number': '30'
}])
// 结果: [{id: 1,name: 'test 0',region: ['上海'],active: false,age: 30}]

内置属性

$size 获取数组大小
$index 获取数组索引
$params 获取查询参数
$body 获取提交参数
$pathVariable 获取路径参数

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,password: ''}]
// }

直接输出对应值

!return 当对象中只有一个属性 !return 时直接输出对应值

import { template } from 'xe-ajax-mock'

template({
  '!return': {
    'id|number': '1','name': 'test {{ $index }}','active|boolean': '{{ random.num(0,1) }}','age|number': '{{ random.num(18,60) }}'
  }
})
// 结果: {id: 1,age: 30}

template({
  '!return|array(1-2)': {
    'id|number': '{{ $index+1 }}',60) }}'
  }
})
// 结果：
// [{id: 1,age: 30},// {id: 2,region: ['北京'],age: 42}]

数据模板 - 高级语法

随机数值

random.num(min,max)

import { template } from 'xe-ajax-mock'

template({
  'age': '{{ random.num(18,60) }}'
})
// 结果: {age: '30'}

template({
  'ip': '{{ random.num(1,254) }}.{{ random.num(1,254) }}'
})
// 结果: {ip: '147.136.43.175'}

template({
  'color': 'rgb({{ random.num(100,120) }},{{ random.num(140,180) }},160) }})'
})
// 结果: {color: 'rgb(242,121,132)'}

根据内容随机生成值

random.repeat(array|string,min,max)

import { template } from 'xe-ajax-mock'

template({
  'describe': '{{ random.repeat("随机产生一段文本",200) }}'
})
// 结果: {describe: '段生随本段段随机本一段段机本本一本段段随机'}

template({
  'email': '{{ random.repeat("abcdefg",5,20) }}@163.{{ random.repeat(["com","net"],1) }}'
})
// 结果: {email: 'abcfdgecee@163.com'}

随机时间戳

random.time(startDate,endDate)

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'}

随机日期

random.date(startDate,endDate,format)

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'}

分页配置

import { template } from 'xe-ajax-mock'

// Mock 配置：GET('http://xuliangzhan.com/api/user/list/{pageSize/{currentPage}')
// 请求调用：getJSON('api/user/list/10/1',{name: 'test'})
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)": ["深圳","北京","上海","广州"],"roles|array(1-3)": ["admin","developer","tester","designer"],"isLogin|boolean": "{{ random.num(0,1) }}","email": "{{ random.repeat('abcdefg',20) }}@qq.{{ random.repeat(['com','net'],"color": "rgb(120,160) }})","ip": "192.168.{{ random.num(1,254) }}","age|number": "{{ random.num(18,60) }}","password": "{{ random.num(100000,999999) }}","describe": "{{ random.repeat('描述信息',200) }}","createDate": "{{ random.date('2018-01-01','2018-06-20') }}","updateTime": "{{ random.time('2018-01-01','2018-06-20') }}"
  }
})

模板混合函数

template.mixin({})

import { template } from 'xe-ajax-mock'

template.mixin({
  format (str) {
    return '格式化:' + str
  }
})

template({
  'val': '{{ format("2018-01-01") }}'
})
// 结果: {val: '格式化:2018-01-01'}

示例

Mock

import { Mock } from 'xe-ajax-mock'

Mock([{
  path: '/api/user',children: [{
    method: 'GET',path: 'list',response: {
      '!return|array(1-3)': {
        'id|number': '{{ $index+1 }}','name': '{{ random.repeat("随机生成名字",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
    }
  ]
}])

HEAD

import { HEAD } from 'xe-ajax-mock'

HEAD('/api/user/head',null)

GET

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 = {
    '!return|array(1-3)': {
      'id|number': '{{ $index+1 }}',20) }}'
    }
  }
  return response
})

GET('/api/user/list/{pageSize}/{currentPage}',context) => {
  response.body = {
    'page': {
      'currentPage|number': '{{ $pathVariable.currentPage }}','pageSize|number': '{{ $pathVariable.pageSize }}'
    },'result|array(2-5)': {
      'id|number': '{{ $index+1 }}',20) }}'
    }
  }
  return response
})

POST

import { template,POST } from 'xe-ajax-mock'

POST('/api/user/save',{msg: 'success'})

POST('/api/user/save',response) => {
  response.body = {msg: 'success'}
  return response
})

POST('/api/user/save',response) => {
  // 模拟后台逻辑 对参数进行校验
  if (request.params.id) {
    response.body = {msg: 'success'}
  } else {
    response.status = 500
    response.body = {msg: 'error'}
  }
  return response
})

PUT

import { PUT } from 'xe-ajax-mock'

PUT('/api/user/update',{msg: 'success'})

PUT('/api/user/update',response) => {
  response.status = 500
  response.body = {msg: 'error'}
  return response
})

DELETE

import { DELETE } from 'xe-ajax-mock'

DELETE('/api/user/delete/{id}',{msg: 'success'})

DELETE('/api/user/delete/{id}',response) => {
  response.body = {msg: 'success'}
  return response
})

PATCH

import { PATCH } from 'xe-ajax-mock'

PATCH('/api/user/update',{msg: 'success'})

JSONP

import { JSONP } from 'xe-ajax-mock'

JSONP('http://xuliangzhan.com/jsonp/user/message',{msg: 'success'})

JSONP('http://xuliangzhan.com/jsonp/user/message',response) => {
  response.body = {
    '!return|array(1-3)': {
      'id|number': '{{ $index+1 }}',20) }}'
    }
  }
  return response
}， {jsonp: 'cb'})

AMD 使用方式

define([
  'xe-ajax-mock'
],function (XEAjaxMock) {

  XEAjaxMock.GET('/api/user/list1',{msg: 'success'})
  XEAjaxMock.GET('/api/user/list2',function (request,response) {
    response.body = {
      '!return|array(1-3)': {
        'id|number': '{{ $index+1 }}',20) }}'
      }
    }
    return response
  })

  // 支持链式写法
  XEAjaxMock
  .GET('/api/user/list3',{msg: 'success'})
  .POST('/api/user/save1',response) {
    response.body = {msg: 'success'}
    return response
  })
  .POST('/api/user/save2',response) {
    return response.require('mock/json/api/user/save/data.json')
  })
})

混合函数

文件 ./customs.js

import { POST } from 'xe-ajax-mock'

export function POST2 (path,options) {
  return POST(path,{message: '成功'},options)
}

示例 ./main.js

import { Mock } from 'xe-ajax-mock'
import customs from './customs'

Mock.mixin(customs)

Mock.POST2('/api/user/save')

示例

XEAjaxMock 对虚拟服务目录结构不限制，当虚拟服务配置越来越多时，统一目录结构可维护性会更好

项目示例

相关文章

$.AJAX()方法中的PROCESSDATA参数
$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方...
form表单提交的几种方式
form表单提交的几种方式 表单提交方式一：直接利用form表单提...
AJAX应用之注册用户即时检测
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于...
详谈基于JSON的高级AJAX开发技术
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在...
手写的ajax分页控件
文章浏览阅读2.2k次。/************************** 创建XML...
AJAX中同时发送多个请求XMLHttpRequest对象处理方法
文章浏览阅读3.7k次。在ajax应用中，通常一个页面要同时发送...