vue mock数据

mock数据,不用配置代理也可使用

原因当后端的同学还未搭建服务接口时，我们不能停下来等他们开发完成后我们才进行工作，会严重影响开发效率

安装 npm i mockjs -D

mock的api.js  建在src/mock/api.js

// api.js
import Mock from 'mockjs'

Mock.mock('/api/index','get',{
  'status' :'200',
  'data': {
    'methods': 'get',
    'name': 'liu man'
  }
})

Mock.mock('/api/index','post',{
  status :'200',
  data: {
    methods: 'post',
    name: 'liu man'
  }
})

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

// mock开关
let mock = true
if(mock){
  require('./mock/api')
}

Vue.config.productionTip = false
axios.defaults.baseURL = '/api'
// 挂载到vue实例原型上，定义为$http
Vue.prototype.$http = axios

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

 

<template>
  <!-- rights组件 -->
  <div class="header">
    <button @click="mock">点击mock</button>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
    }
  },
  methods: {
    // axios的方式
    // mock() {
    //   this.$http.post('/index').then((res)=>{
    //   console.log(res.data)
    //   })
    // }
    // async await的方式
    async mock() {
      let {data} = await this.$http.get('index')
      console.log(data);
    }
  },
}
</script>