初试MockJS

波酱74627
186 阅读5分钟

初试MockJS

使用场景

​ 在项目开发中，当云端提供了接口文档，前端可以通过接口文档进行数据的mock

作用

1. 让数据关联性大的页面开发可以进行下去
2. 可以测试一些边界情况

安装

npm install mockjs --save-dev

使用

语法规范

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

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

​ 注意事项：

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

  • 生成规则有7种格式：

    • 'name|min-max': value
    • 'name|count': value
    • 'name|min-max.dmin-dmax': value
    • 'name|min-max.dcount': value
    • 'name|count.dmin-dmax': value
    • 'name|count.dcount': value
    • 'name|+step': value

  • 生成规则的含义 需要依赖 属性值的类型 才能支持

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

生成规则
1. 属性值是字符串 String

  1. 'name|min-max': string

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

  2. 'name|count': string

    通过重复 string 生成一个字符串，重复次数等于 count。

    Mock.mock({
    'str1|2': 'hihi',
    'str2|1-5': 'hihi',
});
// =>
{ 
    str1: 'hihihihi', 
  	str2: 'hihihihihihihihihihi' 
}
2. 属性值是数字 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 位。

    ```javascript
Mock.mock({
    'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123
})
// =>
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}
```
3. 属性值是布尔型 Boolean

  1. 'name|1': boolean

    随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

  2. 'name|min-max': value

    随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

     ```
 let data = Mock.mock({
     'boolean1|1': false,
     'boolean2|1-2': true,
 });
 
 console.log(data);
 // =>
 {
     boolean1: true,
     boolean2: true
 }
 ```
4. 属性值是数组 Array

  1. 'name|1': array

    从属性值 array 中随机选取 1 个元素，作为最终值。

  2. 'name|+1': array

    从属性值 array 中顺序选取 1 个元素，作为最终值。

  3. 'name|min-max': array

    通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

  4. 'name|count': array

    通过重复属性值 array 生成一个新数组，重复次数为 count。

     ```javascript
 let data = Mock.mock({
     'arr1|1': ['a', 'b', 'c', 'd'],
     'arr2|1-2': ['a', 'b', 'c', 'd'],
     'arr3|4': ['a', 'b', 'c', 'd'],
 });
 
 console.log(data);
 // =>
 {
   arr1: 'c',
   arr2: 'a',
   arr3: [
     'a', 'b', 'c',
     'd', 'a', 'b',
     'c', 'd'
   ],
   arr4: [
     'a', 'b', 'c', 'd',
     'a', 'b', 'c', 'd',
     'a', 'b', 'c', 'd',
     'a', 'b', 'c', 'd'
   ]
 }
 ```

    如果要随机取数组中的某几个数据，怎么操作？

     ```
 const Random = Mock.Random;
 let arr = ['a', 'b', 'c', 'd', 'e'];
 console.log(Random.pick(arr, 2, 4));
 ```
5. 属性值是对象 Object

  1. 'name|count': object

    从属性值 object 中随机选取 count 个属性。

  2. 'name|min-max': object

    从属性值 object 中随机选取 min 到 max 个属性。

6. 属性值是函数 Function

  1. 'name': function

    执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

7. 属性值是正则表达式 RegExp

  1. '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"
}
```

占位符

  1. @后面的的字符串被标识为占位符

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

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

    1. Mock.random 提供的完整占位符：

      TypeMethod
      Basicboolean, natural, integer, float, character, string, range, date, time, datetime, now
      Imageimage, dataImage
      Colorcolor
      Textparagraph, sentence, word, title, cparagraph, csentence, cword, ctitle
      Namefirst, last, name, cfirst, clast, cname
      Weburl, domain, email, ip, tld
      Addressarea, region
      Helpercapitalize, upper, lower, pick, shuffle
      Miscellaneousguid, id

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

    Mock.Random.extend({
    phone: function () {
        var phonePrefixs = ['132', '135', '189']; // 自己写前缀哈
        return this.pick(phonePrefixs) + Mock.mock(/\d{8}/); //Number()
    },
});

// 生成 1 - 10 个 随机手机号码
let { phone } = Mock.mock({
    'phone|1-10': ['@phone'],
});
console.log(Mock.Random.phone());
console.log(phone);

// => 
18984374974
[ '18992374678', '13248375227', '13557428086' ]

请求拦截

  1. 可以使用Mock.mock方法进行请求拦截

    Mock.mock( rurl?, rtype?, template|function( options ) )

    参数解释：

    rurl

    可选。

    表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。

    rtype

    可选。

    表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

    template

    可选。

    表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

    function(options)

    可选。

    表示用于生成响应数据的函数。

    options

    指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。

    从 1.0 开始，Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不再依赖于第三方 Ajax 工具库（例如 jQuery、Zepto 等）。

    方法示例：

    // 云端给了一个雨水收集的接口，但是接口还没有部署到sit环境，我们就可以在index.vue 通过mock模拟调用接口
// http.js
/**
 * 雨水收集项目总情况详情
 * @param {Object} params 
 * {
    "projectId":261644,
    }
 * @returns 
 */
export async function summary(params) {
  return http.post('v1/iot/statis/cistern/summary', params);
}

// index.vue
<template>
  <div class="rain-collect project-page">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</template>

<script>
import { summary } from '../api';
const Mock = require('mockjs');
Mock.mock('/v1/iot/statis/cistern/summary/', 'post', {
  code: 200,
  data: {
    'dayCollectTotal|1-100': 78,
    'totalSaveAmount|1-1000': 5678,
    'monthCollectTotal|1-1000': 1413,
    'cisternNum|1-10': 1,
    'dayUsedTotal|1-50': 23,
    'currentCollectTotal|1-100.1-2': 120.24,
    'monthSaveAmount|1-100': 800,
    'monthUsedTotal|1-100': 160,
  },
  message: 'success',
});
export default {
  created() {
    summary().then((res) => {
      console.log(res);
    });
  },
};

本文参考自Mock.js官网

avatar
文章
阅读
粉丝