技術標籤：vuevueproxy

使用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:引數})

這樣就配置好了。不明白也可以從頭再看幾遍。實戰專案親測