vue mock

在vue中用mock,我就默认你已经装了axios并且会用了。
安装指令

一般前后端分离开发的时候,要等后端返回接口,虽然可能你已经知道会返回什么格式了,但是你不能靠猜来从接口调数据吧;这个时候就要用mock来模拟数据了,而且你可以直接用真实的api地址来写,因为mock会直接拦截请求。

当然这个东西一开始我是不会的,看了很多的教程,好像每个人都成功了,但是大部分人写法都不一样,我就干脆找了一个我尝试了成功的,作为我以后的mock模板。。。

步骤如下

1,新建一个mock.js文件在src下(此时和main.js同级,不过应该无所谓);
main.js 加入 import Mock from '@/mock',我喜欢用@引入文件,相对路径也可以;
之后再加上Mock.mockData(),大部分教程都是不加这个,我觉得这个写法挺好,定义了mockData()函数之后一家人就整整齐齐。

2,开始处理mock.js
下面就是我在mock.js的内容,首先import Mock,然后定义了一个mockData()函数,以后所有的东西都直接写在它下面;

这个时候我们已经成功定义了一个接口/demo/api/user/login,到这里mock的使用已经基本完了,剩下的就是用axios配合接口调数据了。

3, axios的写法很多,讲道理不管是喜欢分到一个独立的js还是直接写的人都很多。
我这是延续了我前辈交我的写法并且已经习惯了。

4,最后我们就可以通过getDeskNum()来获取deskNumber了。

首先在开发文件引入getDeskNum
import getDeskNum from '@/api/demo'

然后,开局默认执行。

如果你的后端小伙伴开发完了,别忘了干掉你mock的接口。或者你可以参考这个写法,在dev使用,prod不使用。

为了只在开发环境使用mock,而打包到生产环境时自动不使用mock,我们可以在env中做一个配置
dev.env

prod.env

在main.js
process.env.MOCK && require('@/mock')