前言
提示:一共分为3个页面来进行跨域操作和接口封装
一、第一个页面http接口路径
示例:swagger是的一种工具,该工具是为了解决数据接口文档而创建的
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
proxy: {
'/api': {
target: 'http://api.vikingship.xyz',//接口的域名
changeOrigin: true,//跨域
pathRewrites: {
'/aip': '',
},
},
},
},
}
二、第二个页面
import axios from 'axios'
const axioss = new axios.create({
timeout: 50000
});
export default axioss
三、第三个页面代码封装
代码如下(示例):
import axioss from '../http/index'
export const reqHomeColumn = (page, size) => {
return axioss.request({
url: '/api/columns',
method: 'get',
params: {
currentPage: page,
pageSize: size
}
})
}
export const reqHome = (id) => {
return axioss.request({
url: `/api/columns/${id}`,
method: 'get',
})
}
export const req = (id) => {
return axioss.request({
url: `/api/columns/${id}/posts?currentPage={page}&pageSize={size}`,
method: 'get',
})
}
二、第二个页面数据渲染
//获取数据,生命周期 - 创建完成(可以访问当前this实例)
created() {
reqHomeColumn(1, 6).then((res) => {
console.log(res.data.data.list);
this.layout = res.data.data.list;
});
},
//详情页
created() {
console.log(this.$route.query.id);
reqHome(this.$route.query.id).then((res) => {
console.log(res.data.data);
this.layout = res.data.data;
});
}
总结
这里对文章进行总结:
以上就是今天要讲的内容,本文仅仅简单介绍了swagger的API接口获取数据并且封装的使用,而swagger能使我们快速便捷的找到数据接口。
~ 喜欢的小伙伴点个赞呗,评论区留下宝贵的意见-谢谢呐♥~
如果文章当中有问题,或者有什么好的意见,大家可以指出来,一起学习。
本文版权归作者所有,欢迎转载。