vue使用（三）

本节目标：获取后端api数据

需求：一个按钮，点击之后将服务器上的数据获取到，并显示出来

方法一：

1. 准备工作，

（1）安装官方插件 

vuedemo02>npm install vue-resource --save

save的作用是将引入的包坐标加入到package.json中去，

（2）在main.js中加入

(1)import VueResource from 'vue-resource'
(2)Vue.use(VueResource);    使用它

上面准备工作做完了，下来创建按钮、显示数据

  <button @click="getMsg()">获取请求参数</button>
    <hr/>
      <ul>
        <li v-for="a in list">
          {{a}}
      </li>
  </ul>

现在就可以使用它了

2.从后端获取参数（因为主要是练习获取，后端可以使用spring boot返回就是json，也比较简单和方便）

 getMsg(){
   /*请求参数*/
    var api='http://www.phonegap100.com/appapi.php?a=getPortalList 1'   网上看到的连接，还可以获取到值，就复制过来了
    this.$http.get(api).then(
    function(response){
        console.log(response)
        this.list=response.body.message;
    },function(err){              
        console.log(err);      
    })
  }

现在就可以获取到值了。

方法二：

使用axios进行数据的获取

1.安装

npm install axios --save

2.哪里使用就在哪里引用

import Axios from 'axios';
export default {
  name: 'demo08',
  data () {
    return {
    }
  },methods:{
      getMsg()
      {
          var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
 
          Axios.get(api).then((response)=>{
              console.log(response);
          }).catch(error=>{
              console.log(error);
          })
      }
  },mounted(){
  }
}

补充一点：

在书上看到说推荐使用下面这样的代码，一般不使用function作为方法使用

          
　　　　Axios.get(api).then((response)=>{    
              console.log(response);
          }).catch(error=>{
              console.log(error);
          })
      }