vue2/3vuecli4项目中axios-mock-adapter和axios搭配使用，前端自己mock数据

前后端分离，前端没有数据返回，就像被限制住了自由，今天介绍这款自己制作数据的方法。

安装依赖

    "axios": "^1.1.3",
    "axios-mock-adapter": "^1.21.2",
1
2

项目根目录下面mock目录

index.js 文件内容

import http from '../src/utils/http'
import MockAdapter from 'axios-mock-adapter'
const data = {
    Message: '查询成功',
    Code: 1,
    Data: {
        Id: '',
        name: ''
    }
}

const mock = new MockAdapter(http, { delayResponse: 2000 })
// console.log('mock', mock)
mock.onGet("/test/demo", {
    params: {
        name: '高峰3333'
    }
}).reply(200, {
    data: {
        code: 200,
        message: '登录成功',
        data
    }
})

mock.onGet("/test/login", {
    params: {
        name: 'admin', password: '123456'
    }
}).reply(200, {
    data: {
        code: 200,
        message: '登录成功'
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

配置文件

.env.development

NODE_ENV=development
VUE_APP_URL = 
VUE_APP_MOCK = true 
1
2
3

.env.production

NODE_ENV=production
VUE_APP_URL = 
VUE_APP_MOCK = false 
1
2
3

项目入口文件引入mock/index

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

process.env.VUE_APP_MOCK === 'true' && require('../mock/index')

new Vue({
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10

src目录下面的api/index.js文件内容

import http from '../utils/http'
// import qs from 'qs' // 请求参数序列化
export const getTest = (params) => {
    console.log('getTest')
    return http({
        url: "/test/demo",
        params
    })
}
export const getLogin = (params) => {
    console.log('getLogin')
    return http({
        url: "/test/login",
        params
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

最后就是组件里面使用

import { getTest } from '../api/index'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }, data() {
    return {
      name: ""
    }
  },
  mounted() {
    getTest({
      name: "高峰3333"
    }).then(res => {
      console.log(res, 'data')
      this.name = res.data.result.name
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { getLogin } from './api/index'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted() {
    getLogin({
      name: 'admin', password: '123456'
    }).then(res => {
      console.log(res, '888')
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

刷新页面就能看到成功返回数据

附上axios的封装文件

import axios from 'axios'
const instance = axios.create({
    baseURL: '/api',
    timeout: 5000
})

instance.interceptors.request.use((config) => {
    return config
})
instance.interceptors.response.use((response) => {
    console.log(response, 'response')
    if (response.status == 201) {
        console.log(window)
    }
    return response.data.data
})


export default instance
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

参考文档:
https://www.npmjs.com/package/axios-mock-adapter
https://www.kancloud.cn/sophie_u/mockjs/534440
https://www.axios-http.cn/docs/req_config
项目源码
vue2:https://gitee.com/motain/axios-mock-adapter/tree/dev_mock
vue3:https://gitee.com/motain/v3axios-mock-adapter