vue-resource 的get和post学习

Posted 2020-09-28

vue-resource 的get和post学习
<template>
  <div class="winter">

      <button @click="getUser">点我1</button>
      <button @click="postWq">点我2</button>
         <div v-for="item in msg">
             <p>{{item.id}}</p>
        <p>{{item.name}}</p>
        <p>{{item.age}}</p>
         </div>
        <p>{{msg2.id}}</p>
        <p>{{msg2.name}}</p>
        <p>{{msg2.age}}</p>
 
  </div>
</template>

<script>

 export default{
  name:‘winter‘,
  data() {
      return{
          msg:‘‘,
          msg2:‘‘

      }
  },
  methods:{
      
      getUser(){
          
          this.$http.get("http://localhost:5000/api/values").then((res)=>{
              console.log(this.msg=res.body)//请求成功打印数据（数据后台给的）
          })
          .catch((res)=>{alert(1)})//请求失败弹出1
      },
      postWq () {
      let ws = {‘id‘: 1, ‘name‘: ‘你好‘, ‘age‘: 20}
      this.$http.post(‘http://localhost:5000/api/values‘, ws).then(a => {
        console.log(this.msg2 = a.data)//请求成功打印数据1 你好 20
      }).catch((e) => {
        alert(1)//请求失败弹出1
      })
    }
  }
  }
</script>