Mock.js数据模拟器

1.什么是Mock.js

  • 官网:http://mockjs.com/
  • 文档:https://github.com/nuysoft/Mock/wiki
  • Mock.js 是用于生成随机数据,拦截 Ajax 请求。
    通过拦截 Ajax 请求,根据数据模板生成并返回模拟数据,让前端攻城师独立于后端进行开发,帮助编写单元
    测试。
  • Mock.js 作用:
  1. 前后端分离

让前端攻城师独立于后端进行开发。

  1. 增加单元测试的真实性

通过随机数据,模拟各种场景。

  1. 开发无侵入

不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

  1. 用法简单

符合直觉的接口。

  1. 数据类型丰富

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

  1. 方便扩展

支持扩展更多数据类型,支持自定义函数和正则。

2.为什么要是用Mock.js模拟数据

前后端分离项目,前端和后端的测试人员都是根据API文档进行开发项目的,不应该直接相互依赖 ,前端人员不应该等待后端接口开发好后进行测试。所以我们可以通过模拟数据生成器,通过一定规则 (API文档)生成模拟数据接口, 提供给前端人员进行测试。

3.安装 Mock.js

  • 在命令提示符窗口,用 npm 安装 mockjs

npm install mockjs --save-dev

4.入门案例

编码实现:

  1. 新建 mockjs-demo 目录,通过命令提示符窗口进入到该文件夹,执行下面命令进行初始化项目

npm init -y

  1. Mock.js 安装

npm install mockjs

  1. 新建 demo1.js 代码如下

     const Mock = require('mockjs')
     const data = Mock.mock({
        'memberList|4': [
        {
           'id': 1,
           'name': '小梦'
        }
      ]
     })
     console.log(JSON.stringify(data, null, 2))
    
  2. 查看效果,执行命令

node demo1.js

5.语法规则

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

  1. 数据模板定义规范(Data Template Definition,DTD)
  2. 数据占位符定义规范(Data Placeholder Definition,DPD)
数据模板定义规范 DTD

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

// ‘属性名|生成规则’: 属性值
‘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
  • 生成规则 的 含义 需要依赖 属性值的类型 才能确定。

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

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

属性值是字符串 String

  1. ‘name|count’: string
    通过重复 string 生成一个字符串,重复次数等于 count 。
  2. ‘name|min-max’: string
    通过重复 string 生成一个字符串,重复次数大于等于 min ,小于等于 max 。
    在这里插入图片描述

属性值是数字 Number

  1. ‘name|+1’: number
    属性值自动加 1,初始值为 number 。
  2. ‘name|min-max’: number
    生成一个大于等于 min 、小于等于 max 的整数,属性值 number 只是用来确定类型。
  3. ‘name|min-max.dmin-dmax’: number
    生成一个浮点数,整数部分大于等于 min 、小于等于 max ,小数部分保留 dmin 到 dmax 位。

在这里插入图片描述

属性值是布尔型 Boolean

  1. ‘name|1’: boolean
    随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
  2. ‘name|min-max’: value
    随机生成一个布尔值,值为 value 的概率是 min / (min + max) ,值为 !value 的概率是 max / (min + max) 。
    在这里插入图片描述

属性值是对象 Object

  1. ‘name|count’: object
    从属性值 object 中随机选取 count 个属性。
  2. ‘name|min-max’: object
    从属性值 object 中随机选取 min 到 max 个属性。
    在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值