我要评论springboot和vue接口调用传参
简单总结一下常用的传参方式，一些前后端分离项目接口调试时经常出现传参格式错误问题。
前后端进行交互时方法一般就分为get和post，至于后面的delete和put都是基于post进行封装而出的。
http请求中不同的请求方式会设置不同的content-type,参数的传递方式就会不一样，主要分为以下三种：
query string parametersform datarequest payload
下面使用的axios请求都是经过封装的，文章最后有对应的封装方法
get请求
我们发送get请求时，参数是通过url的形式进行传递，即url中？后面拼接的参数，以&做连接，参数直接表现在url中。
例如：
http://localhost:8801/api/selectdetail?id=1&username="zhang"
前端通过query string parameters 方式传参，axios中指明使用params
export function selectlist(params) {
return request({
url: 'api/xxx/selectlist',
method: 'get',
params
})
}post请求
post请求有两种传递参数的形式：form data和request payload的形式
发起post请求时若未指定content-type，则默认content-type为application/x-www-form-urlencoded,参数是在请求体中，参数以form data的形式传递，不会出现在请求的url中。
若content-type为application/json，则参数会以request payload的形式进行传递，数据格式为json形式，请求表单的参数在request payload中，不会出现在请求的url中，使用原生的ajax post请求不指定请求头默认的参数就是出现在request payload中。
前端通过formdata方式传参，axios中指明使用data
export function selectlist(data) {
return request({
url: 'api/xxx/selectlist',
method: 'post',
data
})
}前端通过request payload方式传参
export function selectlist(data) {
return request({
url: 'api/xxx/selectlist',
method: 'post',
data
})
}springboot注解对应传参方式
@requestparam() 默认接收application/x-www-form-urlencoded编码格式的参数
@requestbody() 默认接收json格式的参数
1.spring通过 @requestparam (queryparam)（路径传参-默认传参注解）接收的参数都是url拼接 将参数放到query string parameters，前端可以通过下面三种方式传参
- params 传参 （推荐） – params
- formdata传参 – data （需要修改content-type）
- qs传参 – data ，需要手动处理header “content-type”: “application/x-www-form-urlencoded”
spring boot接口
@getmapping(value = "/hello")
public responseentity getuser(@requestparam string username){
}
//http://lcoalhost:8080/hello?username=1111axios调用
#params 传参
export function find(params){
return request({
url: `${api}/info/find`,
method: 'get',
params:params
})
}2.spring通过@requestbody，通过post提交消息主体中参数，参数值为json格式，默认就是json格式不需要进行处理
- 通过data传参
springboot 接口
@postmapping
public responseentity<record> add(@requestbody record record) {
return responseentity.ok(this.recordservice.insert(record));
}axios调用方法（这里的axios是经过封装后的）
export function add(data){
return request({
url: `${api}/record/add`,
method: 'post',
data
})
}请求信息：
post http://localhost:5138/record/
content-type: application/json
--- 参数内容
{
"objective": 1.0,
"objrate": 1.0,
"objdate": "2022/1/8 12:05:00",
"outputprice": 1.0,
}3.@pathvariable(@pathparam)url路径中参数
- 拼接url
springboot接口
@deletemapping(value = "/job/{id}")
public responseentity delete(@pathvariable(value = "id", required = false, defaultvalue = "0") long id){
}
//http://localhost:8080/job/1axios调用
export function querybyid(id){
return request({
url: `${api}/info/querybyid/${id}`,
method: 'get'
})
}axios对应的封装方法
// 封装axios：使用请求与响应拦截器
import axios from 'axios'
import { elmessage, elmessagebox } from 'element-plus'
// 引入qs
import qs from 'qs'
import useuserstore from '@/store/modules/user'
// 利用axios对象的create方法，创建axios实例（其他的配置：基础路径、超时时间）
const service = axios.create({
//基础路径
baseurl: '/',
timeout: 5000, // 超时时间的设置
})
// 第二步：request实例添加请求与响应拦截器
service.interceptors.request.use((config) => {
// 获取用户仓库内的token，登录成功后携带公共参数
let userstore = useuserstore()
if(userstore.token) {
config.headers['authorization'] = userstore.token
}
return config
})
// 第三步：配置相应拦截器
service.interceptors.response.use(
(response) => {
// 获取返回成功数据的状态码code和错误信息message
const { code, message } = response.data;
if(code) {
// 有状态码判断是否为200,除此皆为异常响应
if(code == 200) {
return response.data
}
else if (code < 200 || code > 300) {
elmessage({
message: message || '系统出错',
type: 'error'
});
return promise.reject('error')
}
else {
// 其他类型的状态码
elmessage.error(message)
return promise.reject(response.data)
}
} else {
// 未返回状态码直接返回响应信息
elmessage.error('系统服务连接失败')
return promise.reject(response)
}
},
(error) => {
// 失败的回调：处理http网络错误
//定义一个变量：存储网络错误信息
let message = ''
if(error.code === 'econnaborted') {
message = '连接超时中止，请稍后重试！'
} else {
// http状态码
const status = error.response.status
switch (status) {
case 401:
message = '无权访问'
break
case 404:
message = '请求地址错误'
break
default:
message = '网络出现问题'
break
}
}
// 提示错误信息
elmessage({
type: 'error',
message,
})
return promise.reject(error)
},
)
// 利用axios对象的create方法，创建axios实例（其他的配置：基础路径、超时时间）
interface reqparamstype {
url:string
data?: any
params?:any
method?:string,
type?:string
timestamp?:boolean
timeout?:number
}
const request = ({
url,
data,
params,
method= 'post',
type='json',
timestamp = false,
timeout,
}:reqparamstype): promise<t> => {
let config = {
method,
url,
baseurl: '/',
withcredentials: true,
responsetype: 'json',
headers: {
'access-control-allow-origin': '*',
'x-requested-with': 'xmlhttprequest'
},
timestamp: timestamp,
timeout: timeout
};
if (method === 'get') {
if (timestamp) {
config.url += config.url.indexof('?') > 0 ? '&' : '?';
config.url += `timestamp=${+new date()}`;
}
object.assign(config, {
params
});
}
else {
if (type === 'form') {
config.headers['content-type'] = 'application/x-www-form-urlencoded';
object.assign(config, {
data: qs.stringify(data)
});
config.url = config.url+'?'+qs.stringify(data)
} else if (type === 'json') {
config.headers['content-type'] = 'application/json';
object.assign(config, {
data: data
});
} else if (type === 'formdata') {
let formdata = new formdata();
for (let i in data) {
if(data[i] != null) {
formdata.append(i, data[i]);
}
}
config.headers['content-type'] = 'multipart/form-data';
object.assign(config, {
data: formdata
});
}else if(type === 'picture'){
config.headers['content-type'] = 'application/x-www-form-urlencoded';
object.assign(config, {
data: data
});
}
if(timestamp) {
const code = `${(new date()).gettime()}_${math.round(math.random()*10000)}`
}
}
return new promise((resolve, reject) => {
service(config).then((response) => {
resolve(response);
}, (error) => {
reject(error);
}).catch((error) => {
reject(error);
});
});
}
// 对外暴露
export default request总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论