Vue+Axios，使用公共开放接口，完成列表界面的对接（2）

80 阅读 0 评论 53 点赞

我是靠谱客的博主俊秀含羞草，最近开发中收集的这篇文章主要介绍Vue+Axios，使用公共开放接口，完成列表界面的对接（2），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

是在（1）的基础上，进行的完善

前提界面的路由等，就不说了

本文的接口，主要来自我师兄的推荐Swagger UI

首先在components文件夹下建立两个vue文件（Home.vue,About.vue）

两个文件基本类似，这样就说一个，Home.vue

<template>
    <div id="home">

    </div>
</template>
 
<script>

export default {
    name: "Home",


}
</script>
 
<style>
#home {
    color: black;
    text-align: center;
}

h2 {
    font-size: 40px;
    line-height: 80px;
}
</style>

这是基本的Home内容

接下来

建立一个request文件夹，在文件夹里建立一个request.js文件（这个js文件主要就是用来做拦截的），主要包括引入axios，创建、添加拦截器等，

//用来做拦截的
import axios from 'axios';
const instance = axios.create({
    baseURL: 'https://api.apiopen.top/api',
    timeout: 4000,

});
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});


export default instance;

之后创建api文件夹，在文件夹里面放置home.js文件

在home.js文件中，首先要引入我们刚才创建的request.js

然后默认一个getlist，（这里面的url和method要根据各自条件）

//将request.js整体导入
import request from '../request/request'

export default{
    getList(){
        return request({
            url:`/getImages`,
            method:'get',
            
        })
    }
}

最后，在Home.vue中写入element ui组件，还有引入api等，这样就能实现这个调用接口了

<template>
    <div id="home">
       
        <el-table :data="list" stripe border style="width: 100%">
            <el-table-column type="index" align="center" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="id" align="center" label="id号" width="180">
            </el-table-column>
            <el-table-column prop="title" align="center" label="主题" width="280">
            </el-table-column>
            <el-table-column prop="type" align="center" label="类型" width="180">
            </el-table-column>
            <el-table-column align="center" label="图片">
                <template width="90" slot-scope="scope">
                    <img :src="scope.row.url" width="40" height="40" />
                </template>
               

            </el-table-column>
        </el-table>
    </div>
</template>
 
<script>
// import { GetHomeAPI } from '@/request/api'
import api from '@/api/home'
export default {
    name: "Home",
    data() {
        return {
            list: [],

        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            api.getList().then(res => {
                console.log(res.data)
                this.list = res.data.result.list
                console.log(this.list)

                // console.log(list.url)
            });
        },

     

    }

}
</script>
 
<style>
#home {
    color: black;
    text-align: center;
}

h2 {
    font-size: 40px;
    line-height: 80px;
}
</style>