mockts-next

生成随机数据 & 拦截 Ajax 请求

mockts-next 是一个用于生成模拟数据和拦截 Ajax 请求的 JavaScript 库。它可以帮助前端开发者在后端接口尚未完成时，通过模拟数据来独立开发前端页面。

功能特性

• 生成随机数据：基于丰富的数据模板，生成各种随机数据（如姓名、地址、日期、图片等）
• 拦截 Ajax 请求：拦截 XMLHttpRequest 请求，根据 URL 匹配规则返回模拟数据
• 数据模板定义：支持 DTD（Data Template Definition）和 DPD（Data Placeholder Definition）两种模板语法
• 路径引用：支持相对路径和绝对路径引用数据模板中的属性
• 数据验证：验证生成的数据是否符合数据模板定义
• JSON Schema 转换：将数据模板转换为 JSON Schema

安装

浏览器环境

<script src="dist/mock.js"></script>

Node.js 环境

npm install mockts-next

var Mock = require('mockts-next')

AMD/CMD 模块

require(['mock'], function(Mock) {
    // 使用 Mock
})

快速开始

生成随机数据

var Mock = require('mockts-next')

var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1,
        'name': '@CNAME',
        'email': '@EMAIL',
        'age|18-60': 1,
        'city': '@CITY',
        'color': '@COLOR'
    }]
})

console.log(JSON.stringify(data, null, 4))

拦截 Ajax 请求

Mock.mock('/api/users', {
    'list|1-10': [{
        'id|+1': 1,
        'name': '@CNAME',
        'email': '@EMAIL'
    }]
})

// 发起 Ajax 请求时，会被自动拦截并返回模拟数据
$.ajax({
    url: '/api/users',
    success: function(data) {
        console.log(data)
    }
})

数据模板定义（DTD）

数据模板定义用于生成随机数据，遵循 'name|rule': value 的语法格式。

生成规则

| 规则 | 说明 | 示例 | |------|------|------| | 'name|min-max': value | 生成 min 到 max 个元素 | 'list|1-10': [{}] | | 'name|count': value | 生成 count 个元素 | 'list|5': [{}] | | 'name|min-max.dmin-dmax': value | 生成指定范围浮点数 | 'price|1-100.1-2': 1 | | 'name|+step': value | 自增 step | 'id|+1': 1 |

数据占位符（DPD）

使用 @占位符 语法调用随机数据生成方法。

基础类型

| 占位符 | 说明 | 示例 | |--------|------|------| | @BOOLEAN | 随机布尔值 | true / false | | @NATURAL(min, max) | 随机自然数 | @NATURAL(0, 100) | | @INTEGER(min, max) | 随机整数 | @INTEGER(-100, 100) | | @FLOAT(min, max, dmin, dmax) | 随机浮点数 | @FLOAT(0, 100, 2, 4) | | @CHARACTER(pool) | 随机字符 | @CHARACTER('lower') | | @STRING(min, max) | 随机字符串 | @STRING(5, 10) |

日期时间

| 占位符 | 说明 | 示例 | |--------|------|------| | @DATE(format) | 随机日期 | @DATE('yyyy-MM-dd') | | @TIME(format) | 随机时间 | @TIME('HH:mm:ss') | | @DATETIME(format) | 随机日期时间 | @DATETIME('yyyy-MM-dd HH:mm:ss') | | @NOW(unit, format) | 当前时间 | @NOW('day', 'yyyy-MM-dd') |

地址

| 占位符 | 说明 | |--------|------| | @REGION | 随机大区（东北、华北等） | | @PROVINCE | 随机省份 | | @CITY(prefix) | 随机城市 | | @COUNTY(prefix) | 随机县/区 | | @ZIP | 随机邮政编码 |

姓名

| 占位符 | 说明 | |--------|------| | @FIRST | 随机英文名（名） | | @LAST | 随机英文名（姓） | | @NAME | 随机英文姓名 | | @CFIRST | 随机中文姓 | | @CLAST | 随机中文名 | | @CNAME | 随机中文姓名 |

Web

| 占位符 | 说明 | |--------|------| | @URL | 随机 URL | | @PROTOCOL | 随机协议 | | @DOMAIN | 随机域名 | | @TLD | 随机顶级域名 | | @EMAIL | 随机邮箱 | | @IP | 随机 IP 地址 |

图片与颜色

| 占位符 | 说明 | 示例 | |--------|------|------| | @IMAGE(size, background, foreground, format, text) | 随机图片地址 | @IMAGE('200x100', '#FF0000', '#FFF', 'png', 'Hello') | | @COLOR | 随机颜色（名称） | red | | @HEX | 随机十六进制颜色 | #FF0000 | | @RGB | 随机 RGB 颜色 | rgb(255, 0, 0) | | @RGBA | 随机 RGBA 颜色 | rgba(255, 0, 0, 0.5) | | @HSL | 随机 HSL 颜色 | hsl(0, 100%, 50%) |

文本

| 占位符 | 说明 | |--------|------| | @PARAGRAPH | 随机英文段落 | | @SENTENCE | 随机英文句子 | | @WORD | 随机英文单词 | | @TITLE | 随机英文标题 | | @CPARAGRAPH | 随机中文段落 | | @CSENTENCE | 随机中文句子 | | @CWORD | 随机汉字 | | @CTITLE | 随机中文标题 |

杂项

| 占位符 | 说明 | |--------|------| | @GUID | 随机 GUID | | @UUID | 随机 UUID | | @ID | 随机身份证号 | | @INCREMENT(step) | 自增整数 | | @D4 / @D6 / @D8 / @D12 / @D20 / @D100 | 骰子 |

辅助方法

| 占位符 | 说明 | |--------|------| | @PICK(arr, min, max) | 从数组中随机选取 | | @SHUFFLE(arr) | 打乱数组顺序 | | @CAPITALIZE(word) | 首字母大写 | | @UPPER(str) | 转大写 | | @LOWER(str) | 转小写 |

路径引用

支持在占位符中使用相对路径和绝对路径引用数据模板中的属性。

相对路径

var data = Mock.mock({
    'foo': 'Hello',
    'bar': 'World',
    'foobar': '@foo @bar',        // 引用同级属性
    'parent': {
        'child': 'Child',
        'sibling': '@child'         // 引用同级属性
    },
    'uncle': '@parent/child',      // 引用子级属性
    'grandchild': '@parent/child', // 引用子级属性
    'sibling': '../foo',           // 使用 .. 引用父级属性
    'absolute': '/foo'             // 使用 / 开头引用根级属性
})

Ajax 拦截

基本用法

// 拦截 GET 请求
Mock.mock('/api/users', {
    'list|10': [{
        'id|+1': 1,
        'name': '@CNAME'
    }]
})

// 拦截指定类型的请求
Mock.mock('/api/users', 'get', {
    'list|10': [{
        'id|+1': 1,
        'name': '@CNAME'
    }]
})

// 使用函数动态生成响应数据
Mock.mock('/api/users', function(options) {
    return {
        code: 200,
        data: Mock.mock({
            'list|10': [{
                'id|+1': 1,
                'name': '@CNAME'
            }]
        })
    }
})

// 使用正则匹配 URL
Mock.mock(/\/api\/users\/\d+/, {
    'id': 1,
    'name': '@CNAME'
})

设置请求超时

Mock.setup({
    timeout: '200-600'  // 随机 200-600 毫秒超时
})

数据验证

验证生成的数据是否符合数据模板定义。

var template = {
    'name': 'string',
    'age': 'number',
    'email': 'string'
}
var data = {
    'name': 'John',
    'age': 20,
    'email': '[email protected]'
}

Mock.valid(template, data)

JSON Schema 转换

将数据模板转换为 JSON Schema。

var template = {
    'list|1-10': [{
        'id|+1': 1,
        'name': '@CNAME'
    }]
}

var schema = Mock.toJSONSchema(template)
console.log(JSON.stringify(schema, null, 4))

多行字符串模板

使用 Mock.heredoc() 书写多行字符串模板。

var tpl = Mock.heredoc(function() {
    /*!
<div>
    <p>{{email}}</p>
    <p>{{age}}</p>
</div>
    */
})

构建

npm run build

测试

npm test

测试使用 Mocha + Chai + Puppeteer 在浏览器环境中运行。

许可证

MIT

相关链接

• GitHub