- 下载:
cnpm i axios
- main.js中的引入和使用:
import axios from ‘axios‘
Vue.prototype.$http = axios
get请求:
<template>
<div id="login">
<input type="text" name="" v-model=‘user‘><br>
<input type="text" name="" v-model=‘pass‘><br>
<button @click=‘loginTo‘>登陆</button>
</div>
</template>
<script>
export default {
name: ‘login‘,
data () {
return {
user:‘‘,
pass:‘‘,
msg: ‘Welcome to Your Vue.js App‘
}
},
mounted(){
console.log(this.$http)
},
methods:{
loginTo(){
// alert(1);
// console.log(this.user,this.pass)
this.$http.get(‘http://localhost:2132/login‘,{
params:{
user:this.user,
pass:this.pass
}
}).then((res)=>{
// console.log(res.data)
if(res.data.ok){
alert(‘登陆成功‘)
}
else{
alert(‘登陆失败‘)
}
}).catch(()=>{
console.log(‘失败了‘)
})
}
}
}
</script>
post请求:
<template>
<div id="login">
<input type="text" name="" v-model=‘user‘><br>
<input type="text" name="" v-model=‘pass‘><br>
<button @click=‘loginTo‘>登陆</button>
</div>
</template>
<script>
export default {
name: ‘login‘,
data () {
return {
user:‘‘,
pass:‘‘,
msg: ‘Welcome to Your Vue.js App‘
}
},
mounted(){
console.log(this.$http)
},
methods:{
loginTo(){
// alert(1);
// console.log(this.user,this.pass)
let Parmas = new URLSearchParams();
Parmas.append(‘user‘,this.user);
Parmas.append(‘pass‘,this.pass);
this.$http({
method:‘post‘,
url:‘http://localhost:2132/login‘,
data:Parmas
}).then((res)=>{
// console.log(res.data)
if(res.data.ok){
alert(‘登陆成功‘)
}
else{
alert(‘登陆失败‘)
}
}).catch(()=>{
console.log(‘失败了‘)
});
}
}
}
</script>
注意:post请求是要借助URLSearchParams对象来传输数据