vue项目中使用mockjs模拟接口返回数据

Posted 2020-11-05 古兰精

　　Mock.js 是一个模拟数据生成器，利用它，可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式，前端就不需要依赖后端的接口，可以直接使用模拟的数据了。

　　网上介绍mock的教程也较多，不过大多数看的比较模糊。其实使用起来非常简单，这里介绍在Vue工程中使用Mockjs，并且实现开发和生产配置化。

一、安装

cnpm install --save-dev mockjs

二、引入

　　为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置

//dev.env
module.exports = merge(prodEnv, {
  NODE_ENV: \'"development"\',
  MOCK: \'true\',
})

//prod.env
module.exports = {
  NODE_ENV: \'"production"\',
  MOCK: \'false\',
}

　　然后再main.js里面引入mockjs

process.env.MOCK && require(\'@/mock\')
//表示配置MOCK为true的时候，才引入mock，所以生产环境的时候就不引入mock了

三、目录和文件创建

　　在src目录下创建mock目录，添加index.js文件，这里建议给每类api使用单独的mock文件。例如下面一个api文件对应一个mock文件

　　mock/index.js

//将所有的mock文件导入
require(\'./inspection\')

// 在这里可以做一些通用的配置
const Mock = require("mockjs")
// 设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
    timeout: 0-300
})

四、拦截ajax请求，配置mock的数据

const Mock = require("mockjs")
const Random = Mock.Random;

Mock.mock(\'/api/load\',\'get\',{
    \'xData|100\':[\'@datetime\'],
    \'series|2\':[{
        \'name\':\'@NAME\',
        \'type\':\'line\',
        \'smooth\':true,
        \'data|100\':[\'@integer(1,600)\']
    }]
})

　　拦截ajax请求主要可以使用Mock中的两个方法：

Mock.mock( rurl, rtype, template )
Mock.mock( rurl, rtype, function( options ) )

　　rurl：表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。（在vue 工程中，建议将api的url全部放在apipath中统一管理，然后在Mock中使用与发请求的时候使用的同一个引用）

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

　　template：表示数据模板，可以是对象或字符串。如果需要要把数据写死，可以直接写一个普通的对象。如果要让Mock随机生成，可以根据Mock模板的规则自定义。例如：

{ \'data|1-10\':[{}] } 表示生成生成包含 1到10个空对象的数据
\'@EMAIL\' 表示随机生成一个email地址
\'@CNAME\' 表示随机生成一个中文人名

　　再就是函数，比如下面这样

Mock.mock(\'/api/redo\',\'get\',function(options){
    let    series=[];
    for(let n=1;n<18;n++){
        let _obj={};
        _obj.name = \'05-\' + (n <= 9 ? \'0\' + n : n);
        _obj.type = \'line\';
        _obj.data=[];
        for(let i=0;i<24;i++){
            let _d = Random.integer(1,10) * (i%2 == 0 ? 10 : 90);
            _obj.data.push(_d);
        }
        series.push(_obj);
    }
    return series;
})

　　到此基本应用就可以了，更详细的使用，请看官方文档。

五、Mock 无法拦截 带参数的 GET 请求

　　解决：后来将路径改成正则就好

//api
//获取健康模型数据
export const getRadarDataApi = (id) => ajax({url:BASEURL + \'radar/\' + id})

//mock
Mock.mock(/\\/api\\/radar/,\'get\',{
    \'radar|5\':[\'@integer(0, 100)\']
})