在vue中用mock,我就默认你已经装了axios并且会用了。
安装指令
1 |
npm install mockjs --save-dev |
一般前后端分离开发的时候,要等后端返回接口,虽然可能你已经知道会返回什么格式了,但是你不能靠猜来从接口调数据吧;这个时候就要用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()函数,以后所有的东西都直接写在它下面;
1 2 3 4 5 6 7 8 9 10 11 12 |
import Mock from 'mockjs' export default { mockData () { Mock.mock('/demo/api/user/login', { status: true, data: { deskNumber: 8 } }) } } |
这个时候我们已经成功定义了一个接口/demo/api/user/login
,到这里mock的使用已经基本完了,剩下的就是用axios配合接口调数据了。
3, axios的写法很多,讲道理不管是喜欢分到一个独立的js还是直接写的人都很多。
我这是延续了我前辈交我的写法并且已经习惯了。
4,最后我们就可以通过getDeskNum()来获取deskNumber了。
首先在开发文件引入getDeskNum
import getDeskNum from '@/api/demo'
然后,开局默认执行。
1 2 3 |
mounted: function () { this.getMockNumber() } |
1 2 3 4 5 6 7 8 |
methods: { getMockNumber: function () { getDeskNum().then((res) => { console.log(res) this.deskNumber = res.data.deskNumber }) } } |
如果你的后端小伙伴开发完了,别忘了干掉你mock的接口。或者你可以参考这个写法,在dev使用,prod不使用。
为了只在开发环境使用mock,而打包到生产环境时自动不使用mock,我们可以在env中做一个配置
dev.env
1 2 3 4 |
module.exports = merge(prodEnv, { NODE_ENV: '"development"', MOCK: 'true', }) |
prod.env
1 2 3 4 |
module.exports = { NODE_ENV: '"production"', MOCK: 'false', } |
在main.js
process.env.MOCK && require('@/mock')