PeterChu

使用 mockjs

0. 安装并启用 Mockjs: cnpm install mockjs --save-dev 只在开发模式中使用
1. 在 src 下创建 mock 目录，在 mock 目录下创建业务模块的子目录，以及其下的使用 Mockjs 拦截请求的 js 文件如： src/mock/storeAndPolicy/store/storeMock.js
2. 在使用 Mockjs 拦截请求的 js 文件中，引入 mockjs, 和写了公用 Mockjs 方法的 js 文件，如：

   const Mock = require('mockjs');    // 引入后就可以使用 Mock.mock({}); 来拦截请求并返回数据
   import {getItem, getItemObj, getDataSource, getStates, simulateData} from '@/mock/api';    // 引入公用 js 方法文件
   

3. 在 main.js 中引入使用了 Mockjs 后拦截请求的 js 文件，如：

   require('./mock/api'); // 懒加载模式
   import './mock/login';
   import './mock/storeAndPolicy/store/storeMock';
   

这样，当有在使用了 mockjs 处理请求的方法中所针对的请求被前端发起时，使用了 mockjs 处理请求的方法就会拦截到该请求，并模拟返回响应对象，可以自定义响应对象的各种属性、数据等。

需要注意的是，如果使用了 mockjs 拦截了该请求，那么该请求则不会在浏览器的调试工具中的 network 显示，因此，可以在发起请求前、或接收到请求时、或返回响应时、或接收到响应时，对请求或响应对象做个打印输出，方便查看调试。

Vue + axios + mockjs 获取 get 请求中的参数

eg:

Mock.mock(RegExp('/store/list' + ".*"), 'get', (options)=>{
   ... 
   return xxx 
}

可以拦截 url 中带参数的 get 请求， 但是需要在使用 axios 封装的 request 请求中，将 url 中'?'号后面的参数放在请求对象的 body 中（即设置 request 的 config 中设置 data: quary,而不是只设置 params: quary）， 这样才可以在上述方法中通过 options.body 获取到请求参数的字符串。
需要使用时，可以通过 JSON.parse(options.body) 将其转换为 JSON 对象后，就可以使用.的方式获取到想要的指定的参数的值。(eg:JSON.parse(options.body).pageSize)