axios在vue中的应用

axios在vue中的应用
1、login.vue
<template>
<div id="login">
<form>
<label for="username">用户名</label>
<input type="text" v-model.trim="loginData.username" name="username">
<label for="password">密码</label>
<input type="password" v-model.trim="loginData.password" name="password">
<input type="button" value="登陆" @click="dologin">
</form>
<div>
<template>

<script>
import utils from "./utils/utils"
export default {
name: 'login',
data(){
return{
loginData:{
username:"",
password:""
}
}
},
methods:{
dologin(){
let success=(response)=>{
alert(response.data.msg)
}
utils.axiosMethod({
method:"POST",
url:"/user/login/",
data:this.loginData,
callback:success
})
}
}
}
</script>
2、utils.js
import axios from 'axios'
const utils={
axiosMethod:(config)=>{
axios({
method:config.method,
url:config.url,
params:config.params ? config.params : null,
data:config.data ? config.data : null,
}).then(config.callback).catch(config.catch ? config.catch:()=>{})
}
}
export default utils
3、添加跨域请求
devServer:{
historyApiFallback:true,
noInfo:true,
overlay:true,
proxy:{
'/user/*':{
target:'http://localhost:8080',
secure:false,
changeOrigin:true
}
},
},