MockJs学习笔记

为什么要使用mock

1. 前后端和测试 团队可以并行工作，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响，只在最后的联调阶段往来密切；后端与后端之间如果有接口耦合，也同样能被Mock解决。

2. 可以开启TDD（测试驱动开发）模式，测试人员可以通过mock，在接口提测前完成用例的编写。

3. 测试可以模拟很多不好模拟的场景，比如你需要接口返回500，不再需要开发给代码动手脚即可实现。总之，想要什么返回就mock什么返回

mock.js的使用方法

安装mockjs即可使用

npm install mockjs --save-dev

在项目中创建mock.js，并写一个简单的返回示例，后面拦截其他url的ajax请求直接参考这个示例。

//引入mockjs
import Mock from 'mockjs'
//使用mockjs模拟数据
Mock.mock('/api/demo/', {
  "ret":0,
  "data":{
    "mtime": "@datetime",//随机生成日期时间
    "score|1-800": 800,//随机生成1-800的数字
    "rank|1-100":  100,//随机生成1-100的数字
    "stars|1-5": 5,//随机生成1-5的数字
    "nickname": "@cname",//随机生成中文名字
  }
});

main.js里面引入该文档

import './assets/js/mock'//此部分引入的是我们所编写的mockjs文档

ajax调用该接口

axios.get('/api/demo/')

mock规则

首先需要查看 语法规范 https://github.com/nuysoft/Mock/wiki/Syntax-Specification

语法规范

Mock.js 的语法规范包括两部分：

• 数据模板定义规范（Data Template Definition，DTD）

• 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范 DTD

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

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

• 属性名 和 生成规则 之间用竖线 | 分隔。

• 生成规则 是可选的。

• 生成规则 有 7 种格式：

1. 'name|min-max': value

2. 'name|count': value

3. 'name|min-max.dmin-dmax': value

4. 'name|min-max.dcount': value

5. 'name|count.dmin-dmax': value

6. 'name|count.dcount': value

7. 'name|+step': value

• 生成规则 的 含义 需要依赖 属性值的类型 才能确定。

• 属性值 中可以含有 @占位符。

• 属性值 还指定了最终值的初始值和类型。

数据占位符定义规范 DPD

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

占位符 的格式为：

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

1. 用 @ 来标识其后的字符串是 占位符。

2. 占位符 引用的是 Mock.Random 中的方法。

3. 通过 Mock.Random.extend() 来扩展自定义占位符。

4. 占位符 也可以引用 数据模板 中的属性。

5. 占位符 会优先引用 数据模板 中的属性。

6. 占位符 支持 相对路径 和 绝对路径。

具体规则的使用，查看官方文档：http://mockjs.com/examples.htm

Mock.Random生成各种随机数据

官方文档：https://github.com/nuysoft/Mock/wiki/Mock.Random

这些有两种使用方式，比如cword

// Random.cword()
Random.cword()
Mock.mock('@cword')
Mock.mock('@cword()')

// Random.cword( pool )
Random.cword('零一二三四五六七八九十')
Mock.mock('@cword("零一二三四五六七八九十")')

// Random.cword( length )
Random.cword(3)
Mock.mock('@cword(3)')

// Random.cword( pool, length )
Random.cword('零一二三四五六七八九十', 3)
Mock.mock('@cword("零一二三四五六七八九十", 3)')

// Random.cword( min, max )
Random.cword(3, 5)
Mock.mock('@cword(3, 5)')

// Random.cword( pool, min, max )
Random.cword('零一二三四五六七八九十', 5, 7)
Mock.mock('@cword("零一二三四五六七八九十", 5, 7)')

参考文章：

MockJs常见用法总结 https://blog.csdn.net/qq_45044074/article/details/116459354

转载本站文章《MockJs学习笔记》,
请注明出处：https://www.zhoulujun.cn/html/tools/TestTools/Mock/8694.html