Mock 数据

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。

Swagger

IBPS平台中使用 swagger 由后端来模拟数据。
swagger 是一个 REST APIs 文档生成工具，可以跨平台从代码注释中自动生成，开源，支持大部分语言，社区好，总之非常不错，强烈推荐。
线上 demo

Easy-Mock【已经废弃】

IBPS平台之前版本使用的是 easy-mock 来模拟数据。
它是一个纯前端可视化，并且能快速生成模拟数据的持久化服务。非常的简单易用还能结合 swagger，支持跨域，不管团队还是个人项目都值得一试。

warning
现在当前版本的已经使用 YAPI来代替easy-mock。因为easy-mock提供的线上免费服务很不稳定，经常就时不时的会挂，如果有需要的可以自己按照它的教程，搭建自己的服务。

YAPI【推荐使用】

warning
目前版本采用 http://yapi.bpmhome.cn:3000/

Mockjs【已经废弃】

所有的数据都是用 mockjs 模拟生成。它的原理是: 拦截了所有的请求并代理到本地，然后进行数据模拟，所以你会发现 network 中没有发出任何的请求。

但它的最大的问题是就是它的实现机制。它会重写浏览器的XMLHttpRequest对象，从而才能拦截所有请求，代理到本地。大部分情况下用起来还是蛮方便的，但就因为它重写了XMLHttpRequest对象，所以比如progress方法，或者一些底层依赖XMLHttpRequest的库都会和它发生不兼容，可以看一下这个项目的issues，就知道多少人被坑了。

它还有一个问题是，因为是它本地模拟的数据，实际上不会走任何网络请求。所以本地调试起来很蛋疼，只能通过console.log来调试。就拿vue-element-admin来说，想搞清楚 getInfo()接口返回了什么数据，只能通过看源码或者手动 Debug 才能知道。

新方案

https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#%E6%96%B0%E6%96%B9%E6%A1%88

本地 Mock 与线上切换

有很多时候我们会遇到本地使用 mock 数据，线上环境使用真实数据。

1）- YAPI 的形式

你需要保证你本地模拟 api 除了根路径其它的地址是一致的。
比如：

https://api-dev/login   // 本地请求

https://api-prod/login  // 线上请求

我们可以通过之后会介绍的环境变量来做到不同环境下，请求不同的 api 地址。

//.env.development

# 开发环境 
ENV = 'development'

VUE_APP_BASE_API = 'https://api-dev'
VUE_APP_BASE_WEBSOCKET_API = 'https://api-dev'

//.env.production
# 生成环境
# 标记当前构建方式
NODE_ENV = 'production'

VUE_APP_BASE_API = 'https://api-prod'
VUE_APP_BASE_WEBSOCKET_API = 'https://api-prod'

之后根据环境变量创建axios实例，让它具有不同的baseURL。 @/utils/request.js

// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // request timeout
})

这样我们就做到了自动根据环境变量切换本地和线上 api。

2） Mock.js 的切换

当我们本地使用 Mock.js 模拟本地数据，线上使用真实环境 api 方法。这与上面的 easy-mock 的方法是差不多的。我们主要是判断：是线上环境的时候，不引入 mock 数据就可以了，只有在本地引入 Mock.js。

//main.js
if (process.env.NODE_ENV === 'development') {
  require('./mock') // simulation data
}

只有在本地环境之中才会引入 mock 数据。

mock开发