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)
})
},