本节将展示如果通过axios+proxyTable完成跨域请求并显示数据。
1、前提约束
完成nodejs,vue-cli,webpack,webpack-dev-server的安装
https://www.jianshu.com/p/eb4d9e132f62
2、操作步骤
- 完成vue项目中加入easytable【这时是固定数据】
- 下载axios依赖包
cd vue-easytable
cnpm install axios --save-dev
- 修改main.js,加入以下内容:
import axios from ‘axios‘
axios.defaults.headers.common[‘token‘] = ‘‘
axios.defaults.headers.post[‘Content-type‘] = ‘application/json‘
axios.defaults.baseURL = ‘http://localhost:8080/api‘
- 修改HelloWorld.vue,内容如下:
<template>
<div class="tablePage">
<h1>表格+分页</h1>
<v-table
:columns="tableConfig.columns"
:table-data="tableConfig.tableData"
:paging-index="(pageIndex-1)*pageSize"
></v-table>
</div>
</template>
<script>
export default {
name: ‘HelloWorld‘,
data () {
return {
pageIndex: 1,
pageSize: 10,
total: ‘‘,
tableConfig: {
tableData: [],
columns: [
{
field: ‘id‘,
title: ‘编号‘,
width: 50,
columnAlign: ‘center‘
},
{
field: ‘name‘,
title: ‘姓名‘,
width: 120,
columnAlign: ‘center‘
}
]
}
}
},
methods: {
query () {
this.$axios.get(‘cms/page/query/‘).then( res=> {
this.tableConfig.tableData = res.data.data;
})
}
},
mounted () {
this.query()
}
}
</script>
- 修改config/index.js中的proxyTable标签
proxyTable: {
‘/api‘: {
target: ‘http://localhost:31001‘, // 请求的接口的域名
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {
‘^/api‘: ‘‘
}
}
- 提供第三方api,路径为localhost:31001/cms/page/query且为GET类型,返回的数据如下json格式:
{"data":[{"id":1,"name":"ali"},{"id":2,"name":"xiaoli"}]}
- 启动项目,访问首页面,便能看到如下结果:
以上就是vue中通过axios访问第三方api并展示数据。
原文地址:https://www.cnblogs.com/alichengxuyuan/p/12558552.html
时间: 2024-11-05 22:35:33