一、为什么使用MockJS

作为前端的小伙伴，开发效率都是刚刚的，当前端页面完成时，后端接口往往都还未完成，怎么样才能提升效率呢？

1.我们可以使用json文件，或者直接在代码中使用默认数据（过于不真实）
2.使用一些开源的接口数据平台（每次都要打开链接）
3.使用mockjs模拟后端接口

二、MockJS优点

1.前后端分离
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
5.开发无侵入
6.方便扩展

三、MockJs的使用

# 安装
npm install mockjs

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

四、 MockJS示例

1. 数据模板定义

Mock.mock({
   "string|1-10":"★",
   "number|+1": 202,
   "number|1-100": 100,
   "boolean|1": true,
   "object|2": { "310000": "上海市", "320000": "江苏省", "330000": "浙江省", "340000": "安徽省" },
   "array|+1": [ "AMD", "CMD", "UMD" ],
   "array|1-2": ["Hello","Mock.js","!"],
   'regexp': /[a-z][A-Z][0-9]/,
   'foo': 'Syntax Demo',
   'name': function() { return this.foo },
   "foo": "Hello", "nested": { "a": { "b": { "c": "Mock.js" } } }, "absolutePath": "@/foo @/nested/a/b/c"
})

数据模板定义类型有8种(String，Number，Boolean,Object,Array,Funtion,RegExp,Path)，类型判断是根据后面的参数判断的。其中number,array支持|+1，分别代表着数值+1和索引+1。

2.数据占位符定义

定义符	定义
@boolean(min,max)	布尔值
@natural(min,max)	自然数
@integer(min,max)	数字
@float(min,max,dmin,dmax)	浮点数
@string(pool,min,max)	字符串
@range(start, stop, step)	数组
@date(format)	日期
@time(format)	时间
@datetime(format)	日期时间
@image(size, background, foreground, format, text)	图片
@color()	颜色
@word(min,max)	英文
@title(min,max)	英文标题
@ctitle()	标题
@name()	英文名字
@cname()	中文名字
@cparagraph(min,max)	中文句子
@csentence(min,max)	单个中文句子
@province()	省
@city()	市
@county()	区
@email()	邮箱

五、Mock.setup()

指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数，例如 400，表示 400 毫秒后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。

六、 Mock 网络请求

Mock.mock( rurl, rtype, template )

Mock.mock(url,"GET",{
    "id|+1":1
})
axios.get(url).then(r=>console.log(r))

MockJS的使用心得