vue mock – 某喵的光

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

npm install mockjs --save-dev

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()函数，以后所有的东西都直接写在它下面；

import Mock from 'mockjs'

export default {
  mockData () {
    Mock.mock('/demo/api/user/login', {
      status: true,
      data: {
        deskNumber: 8
      }
    })
  }
}

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'

然后，开局默认执行。

  mounted: function () {
    this.getMockNumber()
  }

mounted: function () {

this.getMockNumber()

}

 methods: {
    getMockNumber: function () {
      getDeskNum().then((res) => {
        console.log(res)
        this.deskNumber = res.data.deskNumber
      })
    }
}

methods: {

getMockNumber: function () {

getDeskNum().then((res) => {

console.log(res)

this.deskNumber = res.data.deskNumber

})

}

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

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'true',
})

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

MOCK: 'true',

})

prod.env

module.exports = {
  NODE_ENV: '"production"',
  MOCK: 'false',
}

module.exports = {

NODE_ENV: '"production"',

MOCK: 'false',

}

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