Vue中接口的调用

下载axios ,一个基于 promise 的 HTTP 库,使用他来访问接口

1.main.js中代码

// 调接口相当于ajax
import axios from 'axios' //导入axios
Vue.prototype.$axios = axios //修改原始数据

2.webpack.config.js文件中代码

target中的对应路径改为自己需要调用接口地址，到端口号之前

3.login文件夹中的Index.vue中所执行的代码

<template>
    <div id="app">
    <div v-for="item in listone" :key="item.id"> <img :src="item.imgurl" alt="" class="img"></div>
           
    </div>
</template>
<script>
export default{
    //数据
    data(){
        return{
            listone:[]
        }
    },
    //执行方法
    created(){
        this.GetListImg();
    },
    //方法
    methods:{
        GetListImg(){
            var that = this;
            that.$axios({
                methods:"get",
                //接口地址  api-代理+接口端口号之后的其余地址
                url:"/api/index/data"
            }).then(response =>{
            	//验证数据是否获取到
                // console.log(response.data);
                that.listone=response.data.data.listone;
                console.log(that.listone);
            })
        }
    }
}
</script>
<style>
    .img{
        width: 100px;
        height: 100px;
    }
</style>

详细解释如下图：

4.router 文件下的routes.js代码

import Login from "../views/login/Index.vue"
let routes=[
    {       path: '/login',
            component:Login,
            name:"登录页",
            hidden:true      
    }
]
export default routes;

运行结果如下