xe-ajax-mock 前端虚拟服务
最新版本见 Github,点击查看历史版本 基于 XEAjax 扩展的 Mock 虚拟服务插件;对于前后端分离的开发模式,ajax+mock 使前端不再依赖后端接口开发效率更高。 CDN使用 script 方式安装,XEAjaxMock 会定义为全局变量 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> AMDrequire.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) }) NPMnpm install xe-ajax xe-ajax-mock --save NodeJSconst XEAjaxMock = require('xe-ajax-mock') ES6 Module importimport XEAjaxMock from 'xe-ajax-mock' ES6 Module importimport { GET,POST,PUT,DELETE,JSONP } from 'xe-ajax-mock' API提供的便捷方法:
入参
options 参数说明
全局参数设置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 获取数组大小 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'} 示例Mockimport { 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 } ] }]) HEADimport { HEAD } from 'xe-ajax-mock' HEAD('/api/user/head',null) GETimport { 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 }) POSTimport { 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 }) PUTimport { 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 }) DELETEimport { DELETE } from 'xe-ajax-mock' DELETE('/api/user/delete/{id}',{msg: 'success'}) DELETE('/api/user/delete/{id}',response) => { response.body = {msg: 'success'} return response }) PATCHimport { PATCH } from 'xe-ajax-mock' PATCH('/api/user/update',{msg: 'success'}) JSONPimport { 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.jsimport { POST } from 'xe-ajax-mock' export function POST2 (path,options) { return POST(path,{message: '成功'},options) } 示例 ./main.jsimport { Mock } from 'xe-ajax-mock' import customs from './customs' Mock.mixin(customs) Mock.POST2('/api/user/save') 示例XEAjaxMock 对虚拟服务目录结构不限制,当虚拟服务配置越来越多时,统一目录结构可维护性会更好 项目示例 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |