綜合 |vue+axios 模擬后台返回數據的三種方式：本地創建json、easymock平台、mockjs

前提

創建一個vue項目

vue create mock

安裝並引入axios

npm install axios vue-axios --save-dev

//main.js
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)

本地創建json

在public下創建一個本地json來模擬接口返回的數據，如下：

{
    "status":0,
    "data":{
        "id":1
    },
    "msg":"請求成功"
}

在App.vue里面請求該靜態文件進行測試。

export default {
  name: 'App',
  mounted(){
    this.axios.get('/mock/user/login.json').then(res=>{
      console.log(res.data)
    })
  }
}

啟動項目后成功打印數據

easymock平台

在該平台創建項目，然后配置接口的baseURL，讓它等於平台項目baseURL

//main.js
axios.defaults.baseURL= 'https://www.easy-mock.com/mock/5f51f760a758c95f67d6ef72/mall';
//當然你也可以不配置，這樣的話請求的時候將完整的url寫上去即可

這種方式會發送真實的請求，然后你就可以在控制台看到打印的數據了

export default {
  name: 'App',
  mounted(){
    this.axios.get('/user/login').then(res=>{
      console.log(res)
    })
  }
}

Mockjs

安裝插件

npm install mockjs --save-dev

創建文件並導入插件庫，在里面寫你想要模擬的數據

//api.js
import Mock from 'mockjs'
Mock.mock('/user/login',{
    "status":0,
    "data":{
        "id":2
    },
    "msg":"成功"
})

啟動

//main.js
const mock=true
if(mock){
  require('./mock/api')
}

mockjs的原理就是你請求的url與你模擬的url要一一對應。這樣請求就跟真實的接口非常相似。它不會發真實的請求，只是模擬返回數據。

export default {
  name: 'App',
  mounted(){
    this.axios.get('/user/login').then(res=>{
      console.log(res.data)
    })
  }
}