vue前端調用webapi的問題：（根據vue-admin-template)做的調整
1、引入axios（解決調用方法創建問題）
在request.js中，引入axios,並創建實例
import axios from 'axios'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
2、攔截機制的配置定義，這里定義的是每次申請需要的攜帶的參數內容
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token 讓每一個request攜帶token
// ['X-Token'] is a custom headers key // x-Token是一個客戶端頭關鍵字
// please modify it according to the actual situation//請根據實際情況定義
config.headers['auth'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
用於攔截器創建，目的是讓每一個request申請都攜帶token內容，
token內容，在登陸時獲取，並寫入內存
3、去除mock攔截（解決404問題）根目錄下main.js相關mock內容注釋掉
// mock 模擬數據，這里要清除 否則會產生404錯誤
// if (process.env.NODE_ENV === 'production') {
// const { mockXHR } = require('../mock')
// mockXHR()
// }
4、修改VUE_APP_BASE_API
VUE_APP_BASE_API ='http://localhost:8088/api/'
5、修改request.js中攔截器的返回值內容，根據自己定義的返回狀態來定義是不是又返回值，這里可以考慮權限問題
service.interceptors.response.use(response=>)
原模板下的
if (res.code !== 20000) 一直報錯，是因為后端沒有返回code這個內容，這里取不到。而res.code的內容時自己定義的，
根據模板，后端webapi至少要有幾個狀態判斷，未登錄、其他客戶端登陸（非本系統意外的接口調用）、Token過期。
正常登陸的返回碼時2000
6、接口調用
因為定義了VUE_APP_BASE_API ,在接口調用的時候要注意，拼接結果
Test() {
console.log('開始數據測試')
// 測試已經調用成功了，但是返回的數據怎麽顯示出來
this.$ajax
.get('/api/test/')
.then(res => {
console.log('數據獲取成功')
console.log(res)
})
},