本文介绍 vue-element-admin 如何使用 MockJS 实现数据Mock,毕竟对于一个合格的前端来讲,自己能Mock数据是必须的:
-
自给自足,不用依赖服务端接口。毕竟环境问题是个大问题,更何况环境不稳定是常态,再加上偶尔服务端的数据格式变化,问题就更复杂。
-
数据复杂,页面复杂时。极度依赖数据中某个字段值的多种状态进行不用前端页面展示时,比如对不同的用户状态进行不同处理,展示不同UI组件。
-
并行开始时,后端仅提供接口文档,无数据。
vue-element-admin中的数据Mock如何实现?
-
使用MockJS实现数据拦截
-
对 src/api 下的接口拦截和改写
实现方案很完美,接口API是同一份,需要后端服务接入时,仅需要指定服务端地址即可,不需要修改和API相关的东西。简单来说就是开发环境只用依赖MockJS实现Ajax请求的拦截,返回Mock数据;集成环境使用时,仅需要指定后端代码即可完成集成,不需要修改API的任何东西,即可实现服务的切换: