Mock数据,语法规范

Mock数据,语法规范

数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意:

生成规则 有 7 种格式:

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

生成规则和示例:

1、 属性值是字符串 String

'name|min-max': string

通过重复 String 生成一个字符串,重复次数大于等于 min,小于等于 max;

'name|count': string

通过重复 String 生成一个字符串,重复次数等于 count;

2、属性值是数字 Number

'name|+1': number

属性值自动加 1,初始值为 number;

'name|min-max': number

生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型;

'name|min-max.dmin-dmax': number

生成一个浮点数,整数部分大于等于 min、小于等于 max ,小数部分保留 dmin 到 dmax 位;

Mock.mock({
    'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123
})
// =>
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}

3、属性值是布尔型 Boolean

'name|1': boolean

随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2;

'name|min-max': value

随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max);

4、属性值是对象 Object

'name|count': object

从属性值 object 中随机选取 count 个属性;

'name|min-max': object

从属性值 object 中随机选取 min 到 max 个属性;

5、属性值是数组 Array

'name|1': array

从属性值 array 中随机选取 1 个元素,作为最终值;

'name|+1': array

从属性值 array 中顺序选取 1 个元素,作为最终值;

'name|min-max': array

通过重复属性值 array 生成一个新数组,重复次数大于等于 min ,小于等于 max;

'name|count': array

通过重复属性值 array 生成一个新数组,重复次数为 count;

6、属性值是函数 Function

'name': function

执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象;

7、属性值是正则表达式 RegExp

'name': regexp

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串;

Mock.mock({
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
})
// =>
{
    "regexp1": "pJ7",
    "regexp2": "F)\fp1G",
    "regexp3": "561659409"
}

 数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。

占位符 的格式为:

@占位符
@占位符(参数 [, 参数])

注意:

  1. 用  @ 来标识其后的字符串是 占位符;
  2. 占位符 引用的是 Mock.Random 中的方法;
  3. 通过 Mock.Random.extend() 来扩展自定义占位符;
  4. 占位符 也可以引用 数据模板 中的属性;
  5. 占位符 会优先引用 数据模板 中的属性;
  6. 占位符 支持 相对路径 和 绝对路径; 
Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

br

 

<think>好的,我现在需要向用户介绍Mock.js的常用语法规则以及如何使用。首先,我得回想一下用户之前的问题,他是在Vue3项目中使用Mock.js模拟接口,现在想进一步了解Mock语法规则和使用方法。 首先,用户可能已经按照之前的指导安装了Mock.js,并创建了一些基本的模拟接口,比如获取用户名。现在他想更深入地了解如何生成不同类型的数据,以及Mock.js的其他功能。我需要确保覆盖Mock.js的核心语法,比如数据模板定义、占位符、随机数据生成方法等。 接下来,我需要组织内容结构。用户要求的是“常用语法规则”和“如何使用”,所以应该分两部分。语法规则部分需要详细说明数据模板、占位符、正则表达式、函数等。使用部分可能需要包括基础用法、自定义扩展、拦截请求、数据验证等。 考虑到用户可能对Mock.js的语法不太熟悉,我需要用简单明了的例子来说明每个语法规则。例如,数据模板的例子应该展示基本的对象结构,占位符则需要列举常用的如@id、@cname、@datetime等,并说明它们的用途。同时,可能需要解释占位符的参数,比如@string(5,10)表示生成长度在5到10之间的字符串。 另外,用户可能对如何自定义扩展随机数据感兴趣,比如之前例子中提到的中文名字生成。这部分需要详细说明如何使用Mock.Random.extend方法,并给出示例代码。同时,应该提到Mock.js内置的Random方法,方便用户查阅官方文档了解更多。 关于拦截请求,用户已经知道如何模拟GET请求,但可能需要了解其他HTTP方法,比如POST、PUT、DELETE等。因此,需要展示不同方法的模拟方式,并说明如何匹配URL,使用字符串或正则表达式。 数据验证方面,用户可能希望确保模拟的数据符合预期结构,可以提到使用Mock.valid方法,但可能实际使用中较少,不过作为进阶内容还是值得提及。 在注意事项部分,需要强调环境隔离,确保生产环境不加载Mock数据结构一致性,以及维护建议。这些都是用户在实际开发中容易遇到的问题,提前指出可以帮助他们避免常见错误。 最后,要确保整个回答结构清晰,步骤分明,每个部分都有示例代码,方便用户理解和复制。同时,语言要简洁,避免技术术语过于复杂,必要时进行解释。比如,解释占位符时,用“@”符号开头,后面跟数据类型或规则,这样用户容易记忆。 需要检查是否有遗漏的重要语法规则,比如正则表达式生成数据、函数生成数据,以及Mock.setup设置延迟等。这些都是Mock.js的重要功能,应该包含在内。另外,可能还需要提到Mock.js的随机数据生成器,如Random.image生成图片地址,这对前端开发模拟图片数据很有帮助。 总结一下,回答的结构应该是:首先介绍Mock.js的基本语法规则,包括数据模板、占位符、正则匹配、函数生成等,然后详细说明如何使用,包括安装、创建模拟数据、扩展方法、拦截请求、数据验证等。最后给出注意事项和常用方法列表,帮助用户快速查阅。</think>以下是Mock.js的核心语法规则与使用方法的系统化说明: ### 一、基础语法规则体系 #### 1. 数据模板定义规范 (Data Template Definition) ```javascript // 基本结构 const template = { 'key|rule': value // 键名|生成规则: 值类型 } ``` #### 2. 占位符系统 (Placeholder System) ```javascript Mock.mock({ 'id': '@id', // 随机ID: "340523199801016666" 'name': '@cname', // 中文名: "王伟" 'age|18-60': 1, // 数值范围: 25 'email': '@email', // 邮箱: "d.lewis@example.net" 'date': '@datetime', // 日期: "2023-07-21 14:12:34" 'color': '@color', // 颜色值: "#f279ba" 'image': '@image', // 图片URL: "http://dummyimage.com/200x100" 'guid': '@guid', // GUID: "6EC6e5D8-5aE3-4f47-Bb8d-5bFbE3B8dEB3" 'title': '@title(5,10)'// 随机标题: "Rjq Ddwfap" }) ``` #### 3. 生成规则类型矩阵 | 规则格式 | 示例 | 输出示例 | |---------------------|---------------------------|--------------------------| | 固定次数 | `'list|3': [{id:1}]` | 生成3个相同对象 | | 数值范围 | `'age|18-60': 1` | 随机18-60之间的整数 | | 小数精度 | `'price|1-100.2-4': 1` | "58.365" | | 字符串长度 | `'code|6': 'a'` | "aaaaaa" | | 数组随机选取 | `'fruit|1': ['🍎','🍌']` | "🍌" | | 对象属性随机 | `'info|2-4': {a:1,b:2}` | 随机保留2-4个属性 | ### 二、高阶应用方法 #### 1. 正则表达式数据生成 ```javascript Mock.mock({ 'regex1': /[a-z][A-Z][0-9]/, // 生成符合正则的字符串: "aB3" 'regex2': /\d{3}-\d{4}-\d{4}/, // 电话号码: "138-0013-8000" 'regex3': /[\u4e00-\u9fa5]{2,4}/ // 2-4个中文字符: "张三" }) ``` #### 2. 函数动态生成 ```javascript Mock.mock({ 'dynamicData': function() { return Date.now() + '-' + Math.random().toString(36).substr(2) } }) // 输出: "1689923456789-4xqwerty" ``` #### 3. 数据关联与引用 ```javascript const data = Mock.mock({ 'userList|5': [{ id: '@id', name: '@cname' }], 'firstUser': function() { return this.userList[0] // 引用已生成的userList数据 } }) ``` ### 三、扩展机制实践 #### 自定义数据类型扩展 ```javascript Mock.Random.extend({ constellation: function() { return this.pick(['白羊座', '金牛座', '双子座', '巨蟹座']) }, mobile: function() { return this.pick(['138', '139', '188']).concat( Mock.mock(/\d{8}/) ).join('') } }) // 使用自定义类型 Mock.mock('@constellation') // "金牛座" Mock.mock('@mobile') // "13800138000" ``` ### 四、HTTP请求拦截配置 #### 全方法支持示例 ```javascript // 匹配RESTful风格接口 Mock.mock(/\/api\/users\/\d+/, 'get', getUserDetail) Mock.mock(/\/api\/users/, 'post', createUser) Mock.mock(/\/api\/users\/\d+/, 'put', updateUser) Mock.mock(/\/api\/users\/\d+/, 'delete', deleteUser) // 精确匹配特定路径 Mock.mock('/api/login', 'post', { code: 200, token: Mock.Random.guid(), expires: 3600 }) ``` ### 五、数据验证体系 ```javascript const schema = { "type": "object", "properties": { "id": { "type": "string" }, "name": { "type": "string", "minLength": 2 } }, "required": ["id", "name"] } const data = Mock.mock({ id: '@id', name: '@cname' }) // 执行验证 const result = Mock.valid(schema, data) if (result.length > 0) { console.error('数据校验失败:', result) } ``` ### 六、最佳实践建议 1. **环境隔离策略**:使用`process.env.MOCK_ENABLED`环境变量控制Mock开关 2. **数据结构管理**: ```javascript // mock/schemas/user.js export const userSchema = { id: '@id', username: '@cname', department: '@pick(["技术部","市场部"])' } ``` 3. **性能优化方案**: ```javascript Mock.setup({ timeout: 300 // 统一设置300ms延迟 }) ``` ### 七、调试辅助方案 1. 开启调试模式: ```javascript Mock.debug = true // 控制台显示请求匹配日志 ``` 2. 实时数据预览: ```javascript console.log(Mock.mock('@email')) // 即时查看生成结果 ``` ### 八、综合应用示例 ```javascript // 复杂数据生成 Mock.mock({ 'status': '@pick([200, 400, 500])', 'data|5-10': [{ 'id|+1': 1000, 'name': '@cname', 'age|20-35': 1, 'address': '@county(true)', 'scores': { 'math|60-100': 1, 'english|50-95': 1 }, 'courses': function() { return Mock.mock({ 'list|2-4': ['@pick(["数学","英语"])'] }).list } }] }) ``` 掌握这些规则后,可快速构建出符合以下特性的模拟系统: - 生成符合实际业务场景的数据结构 - 保持数据间的逻辑关联性 - 实现动态响应规则 - 支持复杂数据验证 - 适配多种请求场景 建议通过官方文档扩展学习更多占位符(60+种内置规则),并结合实际项目需求进行组合使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值