vue axios获取Swagger UI 接口数据

最新推荐文章于 2022-07-27 15:21:27 发布

原创

最新推荐文章于 2022-07-27 15:21:27 发布 · 3k 阅读

16 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中使用axios库获取Swagger UI的接口数据。首先通过cnpm安装axios，然后在main.js全局引入。接着展示如何在组件中利用axios获取后台数据并填充到Element UI的Table组件。由于同源策略限制，需要配置代理，具体操作是在/config/index.js中进行设置，以解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios是一个基于 promise 的 HTTP 库，详细了解可以看axios中文说明。

（1）安装 axios

使用 cnpm 安装 axios：

进入到项目所在文件夹，输入如下命令：

cnpm install axios -S

在这里插入图片描述
安装成功后可以在package.json文件中看到：
（2）引入axios

可以在页面中引入，但是考虑到基本每个页面中都会用到 axios，为了避免重复引入，所以在入口文件中引入 axios：

在/src/main.js中加入代码：

import axios from 'axios';
Vue.prototype.$axios = axios;

（3）在组件中使用 axios

界面时Element UI 的Table组件表格，使用 axios 获取 Swagger UI 接口获取到后台数据，并将其填充到表格中。

<template>
  <el-table :data="tableData" border class="data_table">
    <el-table-column prop="desc" label="描述" width="200">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width=