使用npm安装axios
npm install axios
src/utils/request.js 请求头 ,请求拦截器,响应拦截器
import axios from 'axios'
const service = axios.create({
baseURL: process.env.BASE_API,
timeout: 3 * 1000
})
service.interceptors.request.use(config => {
config.data = JSON.stringify(config.data);
config.headers = {
// 'Content-Type': 'application/x-www-form-urlencoded' //配置请求头
'Content-Type': 'application/json;charset=UTF-8' //配置请求头
}
return config
}, error => {
Promise.reject(error)
})
//4.导入文件
export default service
src/utils/http.js 导入封装好的axios实例
// 导入封装好的axios实例
import request from './request'
const http = {
/**
* methods: 请求
* @param url 请求地址
* @param params 请求参数
*/
get(url, params) {
const config = {
method: 'get',
url: url
}
if (params) config.params = params
return request(config)
},
post(url, params) {
const config = {
method: 'post',
url: url
}
if (params) config.data = params
return request(config)
},
put(url, params) {
const config = {
method: 'put',
url: url
}
if (params) config.params = params
return request(config)
},
delete(url, params) {
const config = {
method: 'delete',
url: url
}
if (params) config.params = params
return request(config)
}
}
//导出
export default http
src/api/api.js 这里就是所有封装的请求接口。可以根据自己的 地址去自己写。再自定义个方法名。这样用的时候直接导入api.js文件即可
import http from '../utils/http'
/**
* @parms resquest 请求地址 例如:http://197.82.15.15:8088/request/...
* @param '/testIp'代表vue-cil中config,index.js中配置的代理
*/
let resquest = "http://xxx.xxx.xxx.xxx:8090/api" //xxx的地方是后端ip
// 通过姓名获取员工信息
export function racerNameTabelAPI(params) {
return http.get(`${resquest}/racer/name`, params)
}
//通过姓名获取员工信息
export function racerQueryTabelAPI(params) {
return http.get(`${resquest}/racer/query`, params)
}
//修改员工信息
export function racerUpdateAPI(params) {
return http.post(`${resquest}/racer/update`, params)
}
//查询队长姓名对应的队伍资料
export function leaderTabelAPI(params) {
return http.get(`${resquest}/team/leader`, params)
}
//查询队员姓名对应的队伍资料
export function mateTabelAPI(params) {
return http.get(`${resquest}/team/mate`, params)
}
//修改队伍资料
export function teamUpdateAPI(params) {
return http.post(`${resquest}/team/team/update`, params)
}
//导入 或者 import api from '@/api/api' 使用 api.racerNameTabelAPI().then()
import {
racerNameTabelAPI,
racerQueryTabelAPI,
racerUpdateAPI,
leaderTabelAPI,
mateTabelAPI,
teamUpdateAPI
} from '@/api/api'
//这是调用的方法
teamTrueHandle() {
let objTemp = {
status: this.SelectValue
}
let obj = Object.assign(this.teamTeap, objTemp)
teamUpdateAPI(obj).then(res => {
if (res.data.resultCode == 0) {
this.teamTableData = res.data.data
this.$message.success('成功')
} else {
this.$message.error('异常')
}
})
}
根目录下 vue.config.js 没有可以手动建
//proxy是处理跨域的
module.exports = {
devServer: {
host: '0.0.0.0', // 允许外部ip访问
port: 8080, // 端口
https: false, // 启用https
proxy: {
'/api': {
target: 'http://xxx.xxx.xxx.xxx:8090',
changeOrigin: true,
secure: false,
pathRewrite: {
'^/api': '/api'
}
}
}
}
}
配置axios有还有很多方法 还可以直接挂在到prototype
//main.js
import axios from 'axios'
Vue.prototype.$http = axios //使用就 this.$http.get(url,{params:参数})
这样就配置好了。不明白也可以从头再看几遍。实战项目亲测