**

如何实现在开发中调用后台给出的接口？

**
第一步 ：先看一看后台给出的接口
比如：
URL: /secret/getSecretType
RequestMethod: GET
返回示例:
{
“code”: 200,
“message”: “成功”,
“data”: [
“Opaque”, – secret类型
“Docker 仓库密码”
]
}
这个简单的接口给出的信息就是接口的地址是/secret/getSecretType，方式是get方式，返回的对象就是返回示例，示例中的code=200代表返回成功，data中是返回的数据
第二步：
如果你没有跨域问题的话就可以在apis文件夹里的文件直接写一个方法
export function getSecretType() {
return request({
url: ‘/api/secret/getSecretType’,
method: ‘get’
})
}
我的路径有一个api是因为我是代理的路径，因为我涉及到了跨域的问题，所以涉及到跨域的时候要在vue.config.js中设置代理路径：
devServer: {
open: true,
proxy: {
‘^/api’: {
target: ‘http://10.100.31.74:8010’,
changeOrigin: true,
ws: false,
pathRewrite: {
‘^/api’: ‘’
}
}
}
}
第三步：
最后就是调用了，你需要先在页面引入第二步当中写的方法，然后最好使用异步来实现数据的显示，方法要写在methods里面，调用的时候可以在任何地方调用，在页面调用为
import { getSecretType } from “@/apis/secert.js”;
async getTypes(){
let res = await getSecretType()
if(res.code == 200){
this.tableData = res.data // 这一步是把后台data中的数据赋给页面中的一个属性
}
}
这样一个简单的接口就可以了，如果有参数要传递，可以把参数写在第二步当中方法的形参位置，在传参的时候需要在第三步await方法的地方进行传递就可以了