最新版本见 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 对虚拟服务目录结构不限制,当虚拟服务配置越来越多时,统一目录结构可维护性会更好

项目示例

xe-ajax-mock 前端虚拟服务的更多相关文章

  1. 前端监听websocket消息并实时弹出(实例代码)

    这篇文章主要介绍了前端监听websocket消息并实时弹出,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 关于h5中的fetch方法解读(小结)

    这篇文章主要介绍了关于h5中的fetch方法解读(小结),fetch身为H5中的一个新对象,他的诞生,是为了取代ajax的存在而出现,有兴趣的可以了解一下

  3. ios – 使用NSURLSession获取JSON数据

    我试图从谷歌距离api使用NSURLSession获取数据,但如下所示,当我打印响应和数据时,我得到的结果为NULL.可能是什么问题?

  4. ios – 错误域= com.alamofire.error.serialization.response代码= -1011“请求失败:禁止

    任何人都可以帮我解决以下错误–>在AFNetworking2.5中使用“删除”方法时出错解决方法我发现,如果我的手机时钟不同步……它不允许我更新…也许检查你的手机设置到正确的时间“自动区”,看看是否有效…

  5. iOS网页/原生应用Facebook登录弹出 – 失败?

    如果我重新启动app/web-app,用户将自动登录,并重定向到成功页面.我认为是导致问题的原因当您在Firefox/Chrome/Safari浏览器中运行网页时,Facebook登录对话框会弹出一个弹出窗口或另一个选项卡.我相信这是这个弹出页面的一个问题,以及当成功登录时Javascript如何与自身通信.window.close的东西没有返回的根页面…失败的解决方法由于应用程序挂在前面提到的URL上,我决定在shouldStartLoadWithRequest(…)中添加if语句以强制UIWebvie

  6. ios – Watchkit新会话不起作用

    我的手表扩展中有两个视图控制器.每当我打电话时我只得到第一个视图控制器的响应,并在第二个viewcontroller中得到错误WCSession在app和watch扩展中启动.任何建议?

  7. 使用Firebase iOS Swift将特定设备的通知推送到特定设备

    我非常感谢PushNotifications的帮助.我的应用聊天,用户可以直接向对方发送短信.但是如果没有PushNotifications,它就没有多大意义.它全部设置在Firebase上.如何将推送通知从特定设备发送到特定设备?

  8. ios – 保存从查询中获取的用户的属性(即不在currentUser上)

    我有兴趣根据currentUser执行的操作将属性保存到数据库中的用户.基于以下代码,我收到错误消息“除非已通过logIn或signUp验证用户,否则无法保存用户”我想知道是否有一个解决方法,我可以将属性保存到foundUser,而无需登录该用户.谢谢你的帮助!解决方法如果要更新当前不是登录用户的用户,则需要使用主密钥调用Parse.您可以从CloudCode执行此操作;并从您的iOS项目中调用它;

  9. 在iOS中使用NSJSONSerialization进行JSON解析

    解决方法首先在您的JSON响应字典中,在“RESPONSE”键下,您有一个数组而不是字典,该数组包含字典对象.所以要提取用户名和电子邮件ID,如下所示

  10. Xcode:Alamofire获得String响应

    我是IOS开发的新手,目前正在与Alamofire学习网络我正在尝试登录…每当凭证正确时,.PHP文件返回一个json,我可以通过以下代码从Alamofire获取json:现在……当凭证错误时,.PHP不会给json..而且它返回一个字符串..例如“wrong_password”或“userLocked”等等……如何通过Alamofire获得String响应?解决方法如果您希望JSON响应使用.responseJSON,如果您想要String响应,请使用.responseString.如果你想两者同时使用

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部