VUE 项目 使用 mock.js

前后端分离之后，在没有中间层情况下前后进度不一致导致接口调试耗时不可预期。前端可以根据接口文档定义的结构mock数据以减少进度延迟风险。

Mock.js

拦截Ajax请求, 并按规则返回模拟数据。

具体用法参考 Mock官方文档

集成 axios

请求库使用的是 axios, 具体用法参考教程

可把axios添加到vue的原型链上

// main.js 
import axios from 'axios'
Vue.prototype.$http = axios;

使用axios进行数据请求

// *.vue

this.$http.get('/api/test').then(ret => {});

集成Mock

新增mock文件夹, 文件夹里新建mock.js

安装mockjs

npm install mockjs --save-dev 

配置mock规则

// mock.js
// 具体配置方法查看Mock.js 官方文档。

import Mock from 'mockjs'
Mock.mock('/api/test', {
  "ret": 0,
  "data": '@cname'
})

引入mock

在主入口引入mock

// main.js 中新增

import './mock/mock.js' // 注意路径

再次发送上面的请求, 返回如下图

image.png

证明mock集成成功。

多人协作优化

项目多人开发时, 如果所有人都维护同一个mock.js, 或者每个人都写自己的xxx-mock.js, 然后再把所有的xxx-mock.js手动引入, 很不优雅。

修改mock.js

修改mock.js, 使其自动加载js文件。并把mock返回数据配置移到其他的JS文件, mock.js 只做公共配置、自定义占位符等公共操作。

// mock.js

import Mock from 'mockjs'
// 自动加载当前文件夹和子文件夹下除mock.js外所有的js文件
const context = require.context('.', true, /^((?!mock\.js).)*\.js$/)
context.keys().forEach(key => context(key));

// Mock 配置, 请求返回的延迟时间
Mock.setup({
  timeout: '500-10000'
});
// 自定义占位符
Mock.Random.extend({
  test () {
    let test = ['a', 'b', 'c', 'd'];
    return this.pick(test);
  }
})

现在的层级目录是这样的：

image.png

test.js 和 test2.js 会自动加载。
到此就解决了多人协作时出现的上述问题。

接口调试优化

当有部分接口完成，已完成的走接口，未完成的走mock。

修改mock配置

所有mock配置加统一前缀 /mock, 这样只会拦截/mock下的请求。

Mock.mock('/api/test', {
 "ret": 0,
 "data": '@cname'
})

改为

Mock.mock('/mock/api/test', {
 "ret": 0,
 "data": '@cname'
})

调用接口的请求不带/mock, 如 /api/test 接口， 然后配置代理即可转到对应的接口服务器。

// 通过如下配置会把所有的/api开头的请求转到百度去， 如: /api/test ==> https://www.baidu.com/test

proxy: {
    '/api': {
      target: 'https://www.baidu.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/'
      }
    }
  }

到此可实现部分请求mock, 部分请求代理到服务器。

暂时到此结束, 如有问题后续更新。