vue中Axios请求豆瓣API数据并展示到Swipe中

vue中Axios请求豆瓣API数据并展示到Swipe中

• 1.首先是安装Axios；
  安装方法cnpm install axios --save 等待npm安装完毕；

• 2.在main.js中引入axios引入方法；
  import Axios from 'axios'

  Vue.prototype.$axios = Axios 必须要这样引入才能使用

  全部的main.js方法如下

  // The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  import Vue from 'vue'
  import Axios from 'axios'
  import './lib/css/mui.min.css'
  import './lib/css/icons-extra.css'
  import 'mint-ui/lib/style.css'
  import { Header } from 'mint-ui'
  import { Swipe, SwipeItem } from 'mint-ui';
  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);
  import router from './router'
  import App from './App'
  Vue.prototype.$axios = Axios
  Vue.prototype.HOST = "/api"
  Vue.config.productionTip = false
  Vue.component(Header.name, Header)
  /* eslint-disable no-new */
  new Vue({
  render: h => h(App),
  router
  }).$mount('#app');

• 3.引入以后要做post请求数据封装处理；

• 4.封装处理post请求后，要做跨域问题处理;
  找到config目录下的index.js文件,然后找到proxyTable，进行修改，修改内容如下：

proxyTable: {
      '/api': {
        target: 'https://api.douban.com',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替
        },
        changeOrigin:true
      }
    },

• 5.做完第4步后需要修改main.js；在main.js中增加一行代码；

Vue.prototype.HOST = "/api"

• 6.然后在其他模块中就可以直接调用了
  如：获取电影Top250 第一页 2条数据：
  豆瓣API:https://api.douban.com/v2/movie/top250?start=0&count=2

然后可以在HomeContainer.vue中做如下代码：

<template>
    <div>
        <mt-swipe :auto="4000">
        <mt-swipe-item v-for="item in listarr" :key="item.alt">
            <img :src="item.images.large" alt=""/>
        </mt-swipe-item>
        </mt-swipe>
    </div>
</template>
<script>
export default {
    data(){
        return {
            listarr:[],
        }
    },
    created(){
        this.getLunbotu();
    },
    methods:{
        getLunbotu(){
            var url = this.HOST + "/v2/movie/in_theaters?city=广州&start=0&count=3"
        this.$axios.get(url)
        .then(response => {
            console.log(response.data.subjects);
            this.listarr = response.data.subjects
            console.log(this.listarr);   
        })
        .catch(error => {
            console.log(error);
        });
        }
    }
}
</script>

<style scoped>
.mint-swipe{
    width: 100%;
    height: 200px;
}
</style>

注意如下几点：

main.js中文件的Axios的配置信息

import Axios from 'axios'

Vue.prototype.$axios = Axios
Vue.prototype.HOST = "/api"

vue中使用跨域url请求则请求地址可以如下写法
var url = this.HOST + "/v2/movie/in_theaters?city=广州&start=0&count=3"

注意使用axios中的写法

一、不要使用下面这种方法【这时候你运行时会发现，数据可以请求到，但是会报错 TypeError: Cannot set property 'listgroup' of undefined 】

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

二、使用这种方法

this.$axios.get(url)
        .then(response => {
            console.log(response.data.subjects);
            this.listarr = response.data.subjects
            console.log(this.listarr);   
        })
        .catch(error => {
            console.log(error);
        });