相信大家都存在这样的一个困扰,在前后端分离的大环境下, 前端需要后端的接口去完成页面的渲染, 但是大部分的情况下,前后端需要同时进行开发, 这种情况下,后端还没完成数据输出，前端只好写静态模拟数据。

那么问题就来了

• 数据太长了，将数据写在js文件里，完成后挨个改url。

• 某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。

• 想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模 拟数据。

• 特殊的格式，例如IP,随机数，图片，地址，需要去收集。

---

前几天看到mock.js的一些介绍,然后自己写了个案列跑起来了,发现还是比较实用的,所以这边整理出文章,推荐给大家

mock案例-github地址

1.mock是什么？

mock官网

---

2.mock可以模拟哪些数据?

• string
• number
• bool
• array
• object
• guid
• id
• title
• paragraph
• image
• address
• date
• time
• url
• email
• ip
• regexp

---

mock示例文档

直接附上代码

// 使用 Mock
let Mock = require('mockjs');
Mock.mock('http://1.json','get',{
    // 属性 list 的值是一个数组，其中含有 1 到 3 个元素
    'list|1-3': [{
        // 属性 sid 是一个自增数，起始值为 1，每次增 1
        'sid|+1': 1,
        // 属性 userId 是一个5位的随机码
        'userId|5': '',
        // 属性 sex 是一个bool值
        "sex|1-2": true,
        // 属性 city对象 是对象值中2-4个的值
        "city|2-4": {
            "110000": "北京市",
            "120000": "天津市",
            "130000": "河北省",
            "140000": "山西省"
        },
        //属性 grade 是数组当中的一个值
        "grade|1": [
            "1年级",
            "2年级",
            "3年级"
        ],
        //属性 guid 是唯一机器码
        'guid': '@guid',
        //属性 id 是随机id
        'id': '@id',
        //属性 title 是一个随机长度的标题
        'title': '@title()',
        //属性 paragraph 是一个随机长度的段落
        'paragraph': '@cparagraph',
        //属性 image 是一个随机图片 参数分别为size, background, text
        'image': "@image('200x100', '#4A7BF7', 'Hello')",
        //属性 address 是一个随机地址
        'address': '@county(true)',
        //属性 date 是一个yyyy-MM-dd 的随机日期
        'date': '@date("yyyy-MM-dd")',
        //属性 time 是一个 size, background, text 的随机时间
        'time': '@time("HH:mm:ss")',
        //属性 url 是一个随机的url
        'url': '@url',
        //属性 email 是一个随机email
        'email': '@email',
        //属性 ip 是一个随机ip
        'ip': '@ip',
        //属性 regexp 是一个正则表达式匹配到的值 如aA1
        'regexp': /[a-z][A-Z][0-9]/,
    }]
})

---

3.如何拦截ajax请求

mock文档

Mock.mock( rurl, rtype, template )
 
如 Mock.mock('1.json','get',{
   'sid|+1': 1,
} )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，
将根据数据模板 template 生成模拟数据，并作为响应数据返回。

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

4.案例代码

mock案例-github地址

用webpack 搭建了一个环境,mock文件里面放入跟后端定义好的接口模型和配置入口文件 引入需要的mock.js 文件

process.env.NODE_ENV=='mock' && require('./mock/1.js');
process.env.NODE_ENV=='mock' && require('./mock/2.js');
var $ = require('jquery');
$(function () {
    /**
     * 请求1 get 请求
     */
    $.ajax({
        url: 'http://1.json',
        type: 'get'
    }).done(function(data,status){
        console.log('我是请求1'+data)
    })

    /**
     * 请求2 post 请求
     */
    $.ajax({
        url: 'http://2.json',
        type: 'post'
    }).done(function(data,status){
        console.log('我是请求2'+data)
    })
})

---

5. 如何在后端接口完成的时候,取消mock数据

new webpack.DefinePlugin({
       'process.env': {
            NODE_ENV: '"mock"'
       }
}),
process.env.NODE_ENV=='mock' && require('./mock/1.js');
process.env.NODE_ENV=='mock' && require('./mock/2.js');

根据webpack环境,在需要mock的时候,配置环境为mock, 在不需要mock的时候,只需要修改node_env 环境就可以了 无需注释代码,就可以完美解决后端接口还没完成的情况。