关于axios的一点感悟

1、首先在vue项目中的main.js中导入axios

import axios from 'axios'

2、其次在main.js声明

Vue.prototype.axios = axios
axios.defaults.baseURL = '/api'

3、然后在main.js中将axios加入

new Vue({
  router,
   axios,//将axios配置到Vue中 ③
  render: h => h(App),
}).$mount('#app')

4、可以在相应方法上使用（如提交按钮）

 sumbit(){
          axios.post('/user/addUser',{//使用axios发送post请求，后端Api的地址，传给后端的数据
                name: this.name,
                gender: this.gender,
                avatar: this.avatar,
                account: this.account,
                password: this.password,
                email: this.email,
                phone: this.phone
          }).then(res=>{//接收后端返回的结果，包装为res
            Message.success('注册成功')
          })
        }

5、（重点）配置axios跨域问题，在vue.config.js中的加入

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,  //关闭es6的语法检查
  devServer: {
    host: '127.0.0.1',
    port: '8081',
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

就可以使用axios进行vue和后端的交互啦