前一篇写了echarts+mock做前后端分离的数据可视化。

这里再深入理解下mock的各个api以及方法。

使用

为了方便就直接使用cdn方式引入了。

//头部引入   
 <script src="http://mockjs.com/dist/mock.js"></script>

语法规范

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

DTD 数据模板定义规范:

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

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value
 <script type="module">
   const str = Mock.mock({
        'string1|3': 'a',//'aaa'
        'string2|1-10': 'b'// 1-10随机个b
      })

      const num = {
        'number1:1-100.1-10': 1
      }

//生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 十分位 到 百分位位。
      const bool = Mock.mock({
        'bool1|1': true,//生成true的概率为1/2
      })

      const obj = Mock.mock({
        'list|5': [{ 'name|5': { a: 1, b: 2, c: 3 } }]
      })//打印list:[name: {b: 2, c: 3, a: 1}...(共5条)]    
     
   const arr = Mock.mock({
        'arr1|1': [1, 2, 3, 4, 5],//随机选取数组中1个元素
        'arr2|1-3': [1, 2, 3, 4, 5]//通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。

  const fn = Mock.mock({
        fun1: function a(){return 123}
      })//执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。
      })//打印123
      const reg = Mock.mock({
        reg1: /[a-z][0-9]/
      })//用于生成自定义格式的字符串。

</script>

DPD 数据占位符 定义规范:

注意:

  1. 用 @ 来标识其后的字符串是 占位符
  2. 占位符 引用的是 Mock.Random 中的方法。
  3. 通过 Mock.Random.extend() 来扩展自定义占位符。
  4. 占位符 也可以引用 数据模板 中的属性。
  5. 占位符 会优先引用 数据模板 中的属性。
  6. 占位符 支持 相对路径 和 绝对路径


爬。