axios

Posted 2020-12-18 yxqfunnysoul

1. 下载： cnpm i axios
2. 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对象来传输数据