vue使用（三）

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

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

方法一：

1. 准备工作，

（1）安装官方插件

vuedemo02>npm install vue-resource --save

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

（2）在main.js中加入

()import VueResource from 'vue-resource'

()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);

          })

      }

巴特西

vue使用（三）

最新文章

热门文章