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); }) }
原文地址:https://www.cnblogs.com/kw28188151/p/9195418.html