Vue+Ant Design Vue+Mockjs----mock篇

Mock

mock 介绍

mockjs官方使用文档

目的

方便生成随机数据，拦截Ajax请求。

  偶尔会写一些前端的项目，参考一些比较知名的UI框架，里面很多例子都会把数据直接写在里面，作为参考，因此很多项目里面也会这样手写数据，直接写死在前端，将代码与mock数据紧密结合在一起，每次需要修改数据，都需要直接改动到代码层，前端本身改动就非常大，如此频繁的修改代码层面显然不是很好的实践。

同时手写的数据，美观与真实性差异就看作者水平了。

优点

• 非常简单强大，入手快
• 拦截api请求，mock出真实的前后端交互情况
• 更改mock数据方便，与业务代码分离，频繁修改也不会有太大的危险
• 在后端接口准备好前，通过mock接口来模拟与后台的交互，同时调整数据结构。
• 开发过程中，mock数据也可以与后端提前讨论，引导后台的数据结构更加合理。
• 后台开发完以后，可以一次性切换接口

缺点

• 灵活性不够，无法mock后台一些异常处理返回
• Build成静态文件以后线上无法使用(或许我没有找对方法)

comment

   针对第一个问题，忽然想到一种方案，或许你可以在同一个接口里面，mock不同的response，然后采用随机函数，随机的返回各种异常response，这样可以测试前端应对各种后台error作出的处理是否符合预期。

安装

cd myProject

#仅安装到本地开发环境
npm install mockjs --save-dev  

mock 实现

src
│       
└───api  //api文件夹，