vue axios获取Swagger UI 接口数据前端

【vue axios获取Swagger UI 接口数据】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 接口获取到后台数据，并将其填充到表格中。

> export default { data () { return { tableData: [] } }, created(){ this.getData(); }, methods: { getData(){ this.$axios.get("role/getAll") .then(response => { if(response.data.sucess){ console.log(response.data.data); this.tableData = https://www.it610.com/article/[]; this.tableData = response.data.data; } }) .catch(error => { console.log(error.message); alert(error.message); }) } } } > .data_table{ width: 100%; }

（4）配置代理
以上的步骤完成之后，这时候，还不能成功地获取到后台数据。因为同源策略的问题，必须要进行配置代理：
在 /config/index.js 中修改配置：

assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api':{ target: '后端接口地址',//接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '', } } },// Various Dev Server settings host: 'localhost',// can be overwritten by process.env.HOST port: 8080, autoOpenBrowser: true, errorOverlay: true, notifyOnErrors: true, poll: true,

在（2）步骤中，在/src/main.js引入了 axios，接下来还要添加一些配置：

axios.defaults.timeout = 500000; axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'; axios.defaults.baseURL = "后端接口地址";

这样，就可以成功获取到数据并填充到表格：