作者:管理员  历史版本:1  更新时间:2024-09-20 15:13

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 数据。