4.Vue API请求Mock

1.axios-mock-adapter安装

npm install axios-mock-adapter --save-dev

2.使用

在src目录下新增mock目录，目录下新增mock.js文件

# mock.js
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

function mockInit() {
    let mock = new MockAdapter(axios)
    mock.onAny("/api/user/get/1").reply(200, {
        code: 200,
        msg: '',
        user: {
            id: 1,
            name: '张三'
        }
    })
}

export default mockInit

在main.js中引入使用

# main.js
import Vue from 'vue'
import router from './router'
import App from './App.vue'
import './plugins/element.js'

import mockInit from './mock/mock.js'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

// 启动mock
// if (false) {
  mockInit()
// }

3.测试

将login中的httpGet访问地址调整为/api/user/get/1，点击登录，查看控制台返回的mock数据，与mock.js中定义的一样。

image.png

4.代码下载

https://gitee.com/animal-fox_admin/learn-vue-web
branch：lesson2