Mock.js的使用

0.前言

Mock.js用于生成随机数据，下载Mock.js。导入项目后能够生成动态本地数据。

使用https://easy-mock.com/能够生成在线的动态随机数据。

测试成熟后，能够替换为正式的数据。

做为数据趋动的微信小程序开发，使用Mock.js能够大大节省先后端交流的时间，能够使前端工程师专一于逻辑的实现。

1.什么是Mock.js?

生成随机数据，拦截 Ajax 请求。

经过随机数据，模拟各类场景；不须要修改既有代码，就能够拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、连接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则。

优势是很是简单方便, 无侵入性, 基本覆盖经常使用的接口数据类型.

2.安装

使用npm安装:npm install mockjs;

或直接<script src="http://mockjs.com/dist/mock.js"></script>;

3.使用方式

   0.官方示例 

       http://mockjs.com/examples.html

   1-基本语法

Mock.mock('地址',{ "dataname|rule":{"对应的值"} }) 

说明：地址就是咱们经过ajax获取数据时候填写的地址，这里填写的地址能够是任意不存在的地址，第二个参数是咱们要模拟的数据，以及相应的规则。

    2-语法规则

    参照官网实例便可：

示例：

Mock.mock('https://www.test.com',{

      "userInfo|4":[{    //生成|num个以下格式名字的数据

          "id|+1":1,  //数字从当前数开始后续依次加一

          "name":"@cname",    //名字为随机中文名字

          "ago|18-28":25,    //年龄为18-28之间的随机数字

          "sex|1":["男","女"],    //性别是数组中的一个，随机的

          "job|1":["web","UI","python","php"]    //工做是数组中的一个

      }]

    })

最后经过ajax接收数据，形式以下：

    //ajax接收数据，经过jq

    $.get('https://www.test.com',function(data){

        console.log(JSON.parse(data));

    })

最终生成的数据为：

 

 

注意：

对于经过Random属性而来的一些随机数据-好比随机生成图片，使用方式以下：

Mock.mock('http://www.test.com',{

            "ListInfo|5":[{

              "img":Mock.Random.image('200x100')

            }]

        });

//这里的图片数据就是随机生成的，只是大小被指定为200X100了