1.说明：

MockJS 可以用来提供假数据。其原理就是拦截 AJAX 请求，如果此次请求的url中在mock存在，则拦截下来，然后返回Mock中对应的内容。

2.安装

npm install mockjs --save

3.使用

在 mockJs 文件夹下新建 index.js, 该文件负责导入 mock 文件。并且需要在 src->main.js 中导入该 index.js 文件。

src:
  | main.js -> 导入 mockjs 文件夹下的 index 文件
  mockjs:
    | index.js -> 导入 mockjs 文件夹下的所有 mock 文件
    | goods.js -> 商品文件, 该文件只负责提供商品类的假数据

下方即 goods.js 文件, 该文件中演示了如何使用 MockJS 编写提供假数据的接口。

/*
Mock.mock(path, method, controller)
 - path<String|正则>：路由地址
 - methods<String>：请求方式
 - controller<Function|Object>：
  - Function：可以接收到一个<config>参数，它存储着请求的信息,例如参数等...然后通过return返回内容。
  - Object：返回的对象
  - 在返回时，支持写Mock语法
*/

// 引入Mock
import Mock from 'mockjs';

// 获取全部的商品信息
Mock.mock('/mock/api/shopping', 'get', {
    code: 200,
    // 该数组中，有100条对象
    "data|100": [
        {
            id: '@id',
            name: '@name'
        }
    ]
});

4.配合Axios

如果项目中存在 axios, 那么 BaseUrl 直接写 mock 路由地址的统一前缀即可。

// 如果前缀为 /mock
Mock.mock('/mock/goods', 'get', {...});

// 那么axios.baseUrl也设置成 /mock
baseURL: '/mock'

// 在api文件中编写接口时, url属性只需要写 /goods 即可, 因为使用request函数时, 会自动加上 baseUrl
export const getGoods = ()=>request({
    url: '/goods'
});