使用easy-mock模拟数据

mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法。比如后端接口未完成时,前端可以借助mock完成开发

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 通过随机数据,模拟各种场景。

这篇文章所提及的语法很少,其余的可以查看mock.js的 示例 和 文档

我是用的是easy-mock

尽量不要使用easy-mock, 提供的api非常不稳定, 官网也经常挂

注册后就可以新建项目,不过他新建项目的位置有点诡异,不知道前端怎么想的,

两边留白这么多然后按钮在最右下角?

image.png

然后就开始新建接口,注意层级

image.png

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

// 属性名 name

// 生成规则 rule

// 属性值 value

'name|rule': value 属性名 和 生成规则 之间用竖线 | 分隔。

生成规则 是可选的。

    "status": 200,
    "list|1-3": [{   // 随机生成1到3个数组元素
        'name': '@cname',  // 中文名称
        'id|+1': 88,    // 属性值自动加 1,初始值为88
        'age|0-99': 0,   // 0至99以内随机整数, 0用来确定类型
        'date': '@date("yyyy-MM-dd")',  // 日期
        'color': '@color',  // 16进制颜色
        'isFalse|1': true,  // 值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
        'isTrue|1-4': true,  // 随机生成一个布尔值,值为 true 的概率是 1/(1+4),值为 !value 的概率是 4/(1+4)。
        'fromObj|2': obj,  // 从obj对象中随机获取2个属性
        'fromObj2|1-3': obj,  // 从obj对象中随机获取1至3个属性
        'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
        'sister|+1': ['jack', 'jim', 'lily'], // 每次从数组中顺序选取元素作为结果
        'friends|count': ['jack', 'jim'] 
        //通过重复属性值数组生成一个新数组,重复次数为 count。
        'name': function    // 执行函数function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。
复制代码

正则表达式

        '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"
        }
复制代码

占位符

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

占位符 的格式为:

@占位符

@占位符(参数 [, 参数])
复制代码

注意:

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

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

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

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

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

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

Mock.Random

Mock.Random 是一个工具类,用于生成各种随机数据。

Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) 。

var Random = Mock.Random
Random.email()
// => "[email protected]"
Mock.mock('@email')
// => "[email protected]"
Mock.mock( { email: '@email' } )
// => { email: "[email protected]" }
复制代码

方法

Mock.Random 提供的完整方法(占位符)如下:

image.png

响应式数据

数据编辑器 中,为某个属性指定一个 Function。在 Function 中,我们提供了 _req 对象,这使得我们可以通过请求对象编写逻辑,实现响应式数据

Function 参数说明

image.png

我所以用到的语法:

"name": "@cname",   // 返回一个中文名字
"id|10000-100000": 1,   // 返回一个id,值在10000到100000之间
'url|1': [
      'https://s2.ax1x.com/2019/09/05/.jpg',
      'https: //s2.ax1x.com/2019/09/05/.jpg',
      'https: //s2.ax1x.com/2019/09/05/.jpg',
    ],
    //  从数组中随机一个值
"shopTitle|+1": [
      "天猫",
      "京东",
      "胖弟弟"
    ]
    // 依次给我一个value

'name': function({_req,Mock}) {
      let obj = _req.query
      if (obj['keyword']) {
        return obj['keyword'] + Mock.Random.csentence()
      } else {
        return Mock.Random.csentence()
      }
    }
  }],
  // 匹配查询字符串中的 keyword,然后返回该 keyword+一句话

你可能感兴趣的:(使用easy-mock模拟数据)