mock数据的基础使用

一、应用场景

　　在我们自己做一个项目时，会遇到后端还没完成数据输出或者接口没写好的情况。你没有办法想后台获取数据，这时候需要前端只好自己写静态模拟数据（假数据）。mockjs就是用来创造假数据的，他的用法和从后端取数据是基本一样的，基本的语法看下文，移步官方文档。

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

二、mock优点

1、前后端分离：让前端工程师独立于后端进行开发。

2、增加单元测试的真实性：通过随机数据，模拟各种场景。

3、开发无侵入：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

4、用法简单：符合直觉的接口。

5、数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

6、方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。

7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。

三、mock的基本使用

需要引用mock.js，引入方法其实和JQ这样的类库一样。可以直接引入

//直接引入

<script src="http://mockjs.com/dist/mock.js"></script>

//在js简单造数据

Mock.mock('http://g.cn',{

    'name':'@NAME',

    'color':'@COLOR',

    'email':'@EMAIL'

})

//和JQ一起使用

$.ajax({

    url:'http://g.cn'

}).done(function(data,status,xhr){

    console.log(data)

})

//打印出来如下

    {

    "name": "Donna Williams",

    "color": "#f2797c",

    "email": "p.oilvqf@eqonsg.ke"

}

也可使用npm下载后，模块化引入，具体操作如下：

1、安装mockJS

cnpm install mockjs -S

2、使用mockJS（mock/index.js）

 import Mock from "mock";

3、官方文档

https://github.com/nuysoft/Mock/wiki/Syntax-Specification

4、Mock.mock

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

 这里的参数都是可选：

rurl(可选)。

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /shoopList

rtype(可选)。

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

template(可选)。

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

function(options)(可选)。

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

options：指向本次请求的 Ajax 选项集

5、模拟接口返回数据

//定义数据

const data = Mock.mock({

    "data|20": [{

        "goodsId|+1": 1,

        "goodsName": "@ctitle(10)",

        "goodsTel": /^1(5|3|7|8)[0-9]{9}$/,

        "goodsAddress": "@county(true)",

        "goodsLogo": "@Image('200x100', 'EasyMock')",

    }]

})

//模拟数据接口

Mock.mock(/\/shoopList/,"post",function(options){

    console.log(options);

    return data

})

/*

  输出的options的值为

    url:"请求的地址"

    type:"请求的类型"

    body:post提交的数据

*/