Vue请求数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29729735/article/details/82669428

使用vue-resource请求数据

vue的库，需要在main.js使用Vue.use()
1、安装vue-resource
npm install --save vue-install

2、在入口文件main.js引用并使用

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'//引入VueResource 
Vue.use(VueResource);                 //使用VueResource 
new Vue({
  el: '#app',
  render: h => h(App)
})

3、在组件里使用
this.$http.get(url).then((response)=>{},(err)=>{})
如下是一个例子，做这样一个效果，输入第几页，请求第几页的新闻

<template>
  <div>
    <h2>这是首页</h2>
    第<input type="text" v-model="page" size=2 />页
    <button @click="getData()">跳到</button>
    <ul>
      <li v-for="item in list">{{item.title}}</li>
    </ul>
    
  </div>
</template>

<script>
  export default{
    data(){
      return {
        list:[],
        page:1
      }
    },
    methods:{
      getData(){
        var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page='+this.page;
        this.$http
          .get(api).then(
            (response)=>{
            console.log(response.body.result.length)
              if(response.body.result.length==0){
                this.list = [{title:'没有更多的新闻了'}]
              }else{
                this.list = response.body.result;
              }
            
          },(err)=>{
            console.log(err);
          })
      }
    },
    mounted(){//页面渲染成功立即执行
      this.getData();
    }

  }
</script>

使用axios请求数据

axios是一个第三方库，不需要使用Vue.use
1、安装 cnpm install axios --save
2、在哪个组件使用，就在那个组件引入（由于是第三方插件，所以不需要在main.js use）

<template>
  <div>
    <h2>这是首页</h2>
    第<input type="text" v-model="page" size=2 />页
    <button @click="getDataAxios()">跳到</button>
    <ul>
      <li v-for="item in list">{{item.title}}</li>
    </ul>
    
  </div>
</template>

<script>
  import Axios from 'axios'//引入axios
  export default{
    data(){
      return {
        list:[],
        page:1//这里使用v-model绑定input
      }
    },
    methods:{
      getDataAxios(){//注意then里边最好使用箭头函数，因为有可能this指向会出错
        var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page='+this.page;
        Axios.get(api).then((response)=>{console.log(response);this.list = response.data.result;}).catch((err)=>{console.log(err)})
      }
    },
    mounted(){//页面渲染成功立即执行
      this.getDataAxios();
    }

  }
</script>

效果如下：

总结

通过vue-resource发请求this.$http.get(url).then((response)=>{},(err)=>{})
通过axios发请求Axios.get(api).then((response)=>{}).catch((err)=>{})
可以通过修改config/index.js下的proxyTable来同一请求路径前缀

写在最后

我们开发时需要请求一些模拟数据（可以将这些数据存放在该前端项目的static目录下），然而开发完毕后不可能将那些路径一一修改，因为这样做有可能有遗漏，而且是一个非常繁琐的工作，其实我们只需要修改vue的配置文件就达到这样的目的。
如果你通过vue init webpack projectname来新建项目的，我们可以修改config/index.js来达到这样的目的
修改proxyTable

proxyTable: {
        '/api':{
            target:'http://localhost:8081',
            pathRewrite:{
                '^/api':'/static/mock'
            }
        }
    },

这样我们想要获取http://localhost:8081/static/mock/data.json的数据，我们可以写成这样/api/data.json