Easy Mock简单使用

Easy Mock是一个可视化,并且能快速生成模拟数据的持久化服务。

解决问题

开发时,后端还没完成数据输出,前端只好写静态模拟数据。
数据太长了,将数据写在js文件里,完成后挨个改url。
某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据,要么编写更多代码，要么手动修改模拟数据。
特殊的格式,例如IP,随机数,图片,地址,需要去收集。

准备工作

Mock.js 的语法规范

数据模板定义规范

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

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

举例:

'name|min-max': string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

模板:
 "string|1-10": "★"
 
结果:
{
  "string": "★★"
}

数据占位符定义规范

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

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

举例:

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

语法不是本文重点,具体请参考官方文档

官网
http://mockjs.com
示例
http://mockjs.com/examples.html#DPD

Easy Mock

重点来了,现在正式开始

首先请大致过一遍官方文档,主要熟悉基础语法,数据占位符,怎样创建一个项目,响应式数据这几个模块,能方便理解下面的使用方式

官网
https://www.easy-mock.com

常见使用方式

目前我觉得下面三种数据已经够使用了

静态数据

静态数据使用很简单,随便写个json,复制到编辑区

{
  name: '小明',
  age: 14,
  gender: true,
  height: 1.65,
  grade: null,
  'middle-school': '\"W3C\" Middle School',
  skills: ['JavaScript', 'Java', 'Python', 'Lisp']
}

流程图片

image

image

这个访问结果解释上面的json

动态数据

结合Mock.js的语法,将json改造一下,可以生成随机数据,这样就避免了每次都是一样的假数据,比较符合真实的开发场景

{
  "code": 0,
  "message": "success",
  "update_time": "@now",
  "data|20": [{
    "id": "@id",
    "wechat_id": "@word(5)",
    "phone": /^1[34578]\d{9}$/,
    "name": "@cname",
    "index|+1": 0
  }]
}

访问结果:

{
  "code": 0,
  "message": "success",
  "update_time": "2019-03-15 15:58:10",
  "data": [
    {
      "id": "130000198012071312",
      "wechat_id": "gbjrh",
      "phone": "15538214534",
      "name": "段超",
      "index": 0
    },
    {
      "id": "120000201604272428",
      "wechat_id": "ycskj",
      "phone": "17531635685",
      "name": "龙明",
      "index": 1
    },
    {
      "id": "360000198712315587",
      "wechat_id": "yayql",
      "phone": "15741728621",
      "name": "范秀英",
      "index": 2
    },
    {
      "id": "350000199512068537",
      "wechat_id": "eiqgj",
      "phone": "14166884429",
      "name": "段军",
      "index": 3
    },
    {
      "id": "630000199301100725",
      "wechat_id": "durpk",
      "phone": "14585958661",
      "name": "郑芳",
      "index": 4
    },
    {
      "id": "370000197102053353",
      "wechat_id": "uywns",
      "phone": "15628123122",
      "name": "任芳",
      "index": 5
    },
    {
      "id": "420000198104243678",
      "wechat_id": "keegs",
      "phone": "14733828249",
      "name": "段芳",
      "index": 6
    },
    {
      "id": "990000199208102867",
      "wechat_id": "bfjii",
      "phone": "14310033074",
      "name": "马勇",
      "index": 7
    },
    {
      "id": "630000201009097354",
      "wechat_id": "qkner",
      "phone": "14313920949",
      "name": "王霞",
      "index": 8
    },
    {
      "id": "610000201108312343",
      "wechat_id": "ldglx",
      "phone": "18382132410",
      "name": "彭明",
      "index": 9
    },
    {
      "id": "310000197505018332",
      "wechat_id": "tncgo",
      "phone": "15787376932",
      "name": "金伟",
      "index": 10
    },
    {
      "id": "610000201108270470",
      "wechat_id": "nsjuw",
      "phone": "15512171367",
      "name": "彭静",
      "index": 11
    },
    {
      "id": "82000019920825184X",
      "wechat_id": "ivuhc",
      "phone": "17286394622",
      "name": "董磊",
      "index": 12
    },
    {
      "id": "990000200711062781",
      "wechat_id": "wswxm",
      "phone": "14202849159",
      "name": "汤涛",
      "index": 13
    },
    {
      "id": "150000200610210611",
      "wechat_id": "vwnvl",
      "phone": "14824152287",
      "name": "汤刚",
      "index": 14
    },
    {
      "id": "340000198310233972",
      "wechat_id": "gzysq",
      "phone": "15934454235",
      "name": "林丽",
      "index": 15
    },
    {
      "id": "42000020020501126X",
      "wechat_id": "hxncn",
      "phone": "15433795836",
      "name": "姚明",
      "index": 16
    },
    {
      "id": "410000200607202219",
      "wechat_id": "tkmnm",
      "phone": "14975419206",
      "name": "朱洋",
      "index": 17
    },
    {
      "id": "230000197305281259",
      "wechat_id": "bkvlf",
      "phone": "15869843614",
      "name": "杨艳",
      "index": 18
    },
    {
      "id": "640000201702016673",
      "wechat_id": "vifef",
      "phone": "13829263258",
      "name": "雷娟",
      "index": 19
    }
  ]
}

响应式数据

可以模拟真实的接口一样,根据传入的参数不同获取对应的数据

{
  "code": function({
    _req
  }) {
    return _req.query.my_parameters ? 0 : -1;
  },
  "msg": function({
    _req
  }) {
    return _req.query.my_parameters ? "" : "缺少my_parameters参数"
  },

  "data": function({
    _req,
    Mock
  }) {
    if (_req.query.my_parameters) {
      return Mock.mock("@cname");
    } else {
      return "";
    }
  }

}