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和后端的交互啦