前后端分离的开发模式，前端需要向后端请求数据（ajax请求），但实际开发过程中，前后端会约定一份接口文档，但前后端开发进度并不一致，如果后端接口没有开发出来则会影响前端的开发进度,使用mock可以使前端工程师再也不用等后端人员开发好之后再测数据了，因为mockjs可以拦截ajax请求，有了mockjs前端程序就可以模拟后端接口返回数据。

在vue项目中引入mock步骤如下：

1.安装mock依赖

npm install mockjs --save-dev
//或者
yarn add mockjs --save-dev

2.在mock目录下新建mock.js

import Mock from 'mockjs'
Mock.setup({
    timeout: 500 //设置一个延迟时间虚拟服务器响应效果
})

//mock 测试登录接口测试，发送post请求
Mock.mock('/api/login', 'post', function (option) {
    console.log('用户登录mock测试...');
    let $name=JSON.parse(option.body).username;
    let $password = JSON.parse(option.body).password;

    if($name==='admin'&& $password==='123456'){
        return Mock.mock({
            code: 200,
            message: '登录成功！'
        })
    }else{
        return Mock.mock({
            code: 400,
            message: '登录失败，请检查用户名或者密码是否正确！'
        })
    }
})

3.在main.js引入mock

// 引入mock测试
import './mock/mock'

4.在视图组件中测试

request.post('/api/login',{
           username:'admin',
           password:'66666'
      }).then(resp=>{
          console.log(resp);
     }).catch(err=>{
         console.log(err);
 })

以上是使用mock实现了一个post请求接口测试。如果要测试get请求接口。代码改下如下：

import Mock from 'mockjs'
//通过URL获取参数的方法
function getQueryVariable(url,variable)
{
    // 如果链接没有参数，或者链接中不存在我们要获取的参数，直接返回空
    if(url.indexOf("?")==-1 || url.indexOf(name+'=')==-1)
    {
        return '';
    }
    // 获取链接中参数部分
    let queryString = url.substring(url.indexOf("?")+1);

    // 分离参数对 ?key=value&key2=value2
    let parameters = queryString.split("&");

    let pos, paraName, paraValue;
    for(var i=0; i<parameters.length; i++)
    {
        // 获取等号位置
        pos = parameters[i].indexOf('=');
        if(pos == -1) { continue; }

        // 获取name 和 value
        paraName = parameters[i].substring(0, pos);
        paraValue = parameters[i].substring(pos + 1);

        // 如果查询的name等于当前name，就返回当前值，同时，将链接中的+号还原成空格
        if(paraName == variable)
        {
            return unescape(paraValue.replace("/+/g", " "));
        }
    }
    return '';
}


//mock get 登录接口测试
Mock.mock(RegExp("/api/login?" + ".*"), 'get', function (option) {
    console.log('用户登录mock测试...');
    console.log(option.url);
    let $name= getQueryVariable(option.url,"username");
    let $password = getQueryVariable(option.url,"password");
    console.log($name+","+$password);

    if($name==='admin'&& $password==='123456'){
        return Mock.mock({
            code: 200,
            message: '登录成功！'
        })
    }else{
        return Mock.mock({
            code: 400,
            message: '登录失败，请检查用户名或者密码是否正确！'
        })
    }
})

在视图组件中测试：

//测试mock get 接口
 request.get('/api/login',{
       params:{
             username: 'admin',
             password: '123456'
       }
 }).then(resp=>{
        console.log(resp);
 }).catch(err=>{
        console.log(err);
 })