vue-element-admin深入系列-数据Mock

 本文介绍 vue-element-admin 如何使用 MockJS 实现数据Mock,毕竟对于一个合格的前端来讲,自己能Mock数据是必须的:

  1. 自给自足,不用依赖服务端接口。毕竟环境问题是个大问题,更何况环境不稳定是常态,再加上偶尔服务端的数据格式变化,问题就更复杂。

  2. 数据复杂,页面复杂时。极度依赖数据中某个字段值的多种状态进行不用前端页面展示时,比如对不同的用户状态进行不同处理,展示不同UI组件。

  3. 并行开始时,后端仅提供接口文档,无数据。

vue-element-admin中的数据Mock如何实现?

  1. 使用MockJS实现数据拦截

  2. 对 src/api 下的接口拦截和改写

实现方案很完美,接口API是同一份,需要后端服务接入时,仅需要指定服务端地址即可,不需要修改和API相关的东西。简单来说就是开发环境只用依赖MockJS实现Ajax请求的拦截,返回Mock数据;集成环境使用时,仅需要指定后端代码即可完成集成,不需要修改API的任何东西,即可实现服务的切换:

 

image 2023 07 16 22 33 07 901

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值