框架
<!DOCTYPE html>
<html>
<head>
<title>vue实现axios</title>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="clik me" @click="getUserInfo"/>
<div v-if="user_info">
<p >
{{ user_info }}
</p>
<input type="text" v-model="user_info.age">
<input type="text" v-model="user_info.user">
<input type="button" value="update" @click="update">
</div>
</div>
<script>
axios.defaults.baseURL= "http://127.0.0.1:5000/"
const vm = new Vue({
el: '#app',
data() {
return {
user_info : null
}
},
methods: {
update(){
console.log(this.user_info)
axios({
url: '/user/data',
method: 'post',
data: this.user_info
})
},
getUserInfo() {
if (this.user_info !== null){
this.user_info = null
} else {
axios({
url: '/user/data',
method: 'post',
data: {
name: 'xiaozhang'
}
}).then(response => {
console.log("response:",response)
console.log("response.data:",response.data)
this.user_info = response.data.data
})
}}
}
})
</script>
</body>
</html>
