前后端swagger接口对接总结
背景：
如何进行前后端的对接？
今天总结了对接后端swagger接口的方法，分享给大家
1. 查看接口地址：
前端代码设置：
const ConfigBaseURL = 'http://172.16.110.147:9090';
// 使用create方法创建axios实例
const Service = axios.create({
baseURL: ConfigBaseURL, //1. 设置默认地址
timeout: 7000 // 2. 请求超时时间
})2. 在线测试swagger
或
3. 查看swagger的信息（重点）
通过curl 指令去分析，
注：在响应成功的情况下，去看curl；不成功的话，说明后端接口有问题，请后端测试一下接口
curl 分析
示例1:
参数在url后面，故axios 需要使用params传参
前端代码, 使用params传参：
this.$axios({
url: '/client/selectByPage' ,
method: 'post',
params:{
limit: this.pageSize,
page: this.currentPage
}
}).then((res) => {
console.log(res)
})示例2：
参数不在url后面，故axios需要使用data形式传参，且注意Content-type的值
前端代码，使用data传参，且将data后面的对象，使用qs转成字符串：
this.$axios({
url: '/factory/insert' ,
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data:this.$qs.stringify({
factoryName: this.factoryName,
no: this.no,
remark: this.remark
})
}).then((res) => {
console.log(res)
})示例3：
参数不在url后面，故axios需要使用data形式传参，且参数为对象形式
前端代码，直接使用 data 传参
this.$axios({
url: '/material/selectAll' ,
method: 'post',
headers: {
'Content-Type': 'application/json'
},
data:{
factory: this.factoryName,
materialName: this.materialName,
materialNo: this.materialNo,
offset:this.offset
page:this.page
size:this.pageSize
}
}).then((res) => {
console.log(res)
})4. Axios 特殊情况
情况1：将文件以formData形式传递：
注：第二个参数，直接写fd , 不要写成 { fd }
// 1、首先定义一个formData对象
var fd = new FormData()
// 2、将需要传的参数append到formData对象中
fd.append('file',file.file);
fd.append('startTime', '2020-01')
fd.append('endTime', '2020-06')
// 3、向后台直接传定义的formData对象fd
this.$axios.post('/api/all/order/money', fd,
{
headers: {
// 4、将请求头改为multipart/form-data
'Content-Type': 'multipart/form-data'
}
}).then((response) => {
console.log(response.data.data)
}
})情况2 ：params 与 data 都存在的情况
this.$axios({
url: '/factory/update' ,
method: 'post',
headers: {
'Content-Type': 'application/json'
},
params:{
id : this.id
}
data:{
factory: this.factoryName,
no: this.no,
remark: this.remark
}
}).then((res) => {
console.log(res)
})情况3： 只传值 ，不要键名
this.$axios.post('/api/chuli/deleteByIds',this.ids),
{
headers: {
'Content-Type': 'application/json'
}
}).then((res) => {
console.log(res)
})本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-06-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
