Mock模拟数据

1、 安装mock.js 和 axios

npm install --save-dev mockjs
npm install --save axios

2、 封装axios

import axios from "axios";

const request = axios.create({
  baseURL: 'http://localhost:8080', //基础地址必须写要不报错
  timeout: 6000,
})
// 请求拦截器
request.interceptors.request.use({})
// 响应拦截器
request.interceptors.response.use({})

export default request

3、封装mock.js文件

import Mock from 'mockjs'

Mock.mock('http://localhost:8080/list', {
  code: 0, data:
  {
    'data|20': [
      {
        id: '@id',//随机id
        name: '@name',//随机名称
        nickName: '@last',//随机昵称
        phone: /^1[34578]\d{9}$/,//随机电话号码
        'age|11-99': 1,//年龄
        address: '@county(true)',//随机地址
        email: '@email',//随机邮箱
        isMale: '@boolean',//随机性别
        createTime: '@datetime',//创建时间
        avatar() {
          //用户头像
          return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
        }
      }
    ]
  }
})

4、main.js 中引入

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import './mock/mock'

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

5、组件中使用

<template>
  <el-button @click="btnGet">点我调用数据</el-button>
</template>

<script>
import reqest from '../utils/request'
export default {
  methods: {
    async btnGet() {
      try {
        const re = await reqest('/list')
        console.log(re);
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

效果图