3.前端和后端参数不一致，后端接不到数据的解决方案
目录
1.问题背景:
(1).前端代码:
(2).后端代码:
(3).问题分析:
[1]前端参数构造错误:
[2].Api请求配置错误:
2.解决方案
(1).修改 role.js 中的 API 方法
(2).前端组件中的调用方式改成下面的而不是继续拼接了
3.总结:
1.问题背景:
我在接口开发过程中，前端发送请求后，后端始终无法接收到参数。这导致前端无法获取预期的响应数据，或返回的数据与实际需求不符。经过排查，发现问题的根源在于前端与后端参数名称不一致，造成后端无法正确解析请求中的参数。
(1).前端代码:
页面:
<template><Dialog :visible="info" :title="info.title" @close="emit('cancel')" @save="onSave"><el-table ref="multipleTable" :data="allPermissions" row-key="rid" @selection-change="onSelectionChange"><el-table-column type="selection" /><el-table-column label="权限名" prop="permissionName" /><el-table-column label="资源路径" prop="url" /></el-table></Dialog>
</template><script setup>
import { onMounted, ref } from 'vue'
import { Dialog } from '@/components';
import { ElMessage } from 'element-plus';
// 导入提取的API请求函数
import { getAllPermissions, updateRolePermissions } from '@/api/role'const { info } = defineProps(['info'])
const emit = defineEmits(['cancel'])
const multipleTable = ref(null)
let pids = []
const allPermissions = ref([])onMounted(() => {// 获取所有权限 - 使用新的API请求函数getAllPermissions().then(data => {allPermissions.value = data;(info.data.permissions || []).map(row => {pids.push(row.pid)setTimeout(() => {// 默认选中该角色拥有的权限const target = allPermissions.value.find(item => item.pid === row.pid)if (target) {multipleTable.value.toggleRowSelection(target, true);}}, 0)})})
})const onSelectionChange = (keys) => {pids = keys.map(item => item.pid)
}const onSave = () => {const form = new FormData()form.append('rid', info.data.rid)form.append('pids', pids)// 更新角色权限 - 使用新的API请求函数updateRolePermissions(form).then(() => {ElMessage.success('操作成功')emit('cancel')})
}
</script> 封装的请求:
/*** 为角色更新权限* @param {Object} data - { rid: number, pids: number[] }* @returns {Promise}*/
export function updateRolePermissions(data) {return request({url: '/api/role/updatePermissionToRole',method: 'put',params: {rid: data.rid,pids: data.pids} // 直接传递JSON对象})
}(2).后端代码:
@PutMapping("/updatePermissionToRole")@PreAuthorize("hasAnyAuthority('/api/role/updatePermissionToRole')")public Result updatePermissionToRole(@RequestParam Integer rid,@RequestParam Integer[] pids){userRoleService.updatePermissionToUserRole(rid,pids);return Result.success(null);}(3).问题分析:
前端代码和后端接口存在参数格式不匹配的问题
[1]前端参数构造错误:
const form = new FormData()
form.append('rid', info.data.rid)
form.append('pids', pids) // 错误：将数组直接作为值添加这会导致：
pids参数被序列化为字符串"[object Object]"- 后端接收到的
pids为null，触发空指针异常
[2].Api请求配置错误:
export function updateRolePermissions(data) {return request({url: '/api/role/updatePermissionToRole',method: 'put',params: { // 错误：params会被拼接到URL，且无法正确处理数组rid: data.rid,pids: data.pids}})
}这会导致：
- 请求 URL 被构造为
/api/role/updatePermissionToRole?rid=1&pids=1,2,3 - Spring MVC 无法将
pids=1,2,3正确解析为整数数组
2.解决方案
(1).修改 role.js 中的 API 方法
/*** 为角色更新权限* @param {Object} data - { rid: number, pids: number[] }* @returns {Promise}*/
export function updateRolePermissions(data) {// 构建查询字符串参数const params = new URLSearchParams();params.append('rid', data.rid);// 将数组转换为多个同名参数if (data.pids && Array.isArray(data.pids)) {data.pids.forEach(pid => {params.append('pids', pid);});}return request({url: '/api/role/updatePermissionToRole',method: 'put',params: params, // 注意：使用params而非dataheaders: {'Content-Type': 'application/x-www-form-urlencoded'}});
}(2).前端组件中的调用方式改成下面的而不是继续拼接了
// 组件中的调用代码保持不变
const onSave = () => {updateRolePermissions({rid: info.data.rid,pids: pids // 直接传递数组}).then(() => {ElMessage.success('操作成功');emit('cancel');});
};3.总结:
前端开发中严格遵守接口规范能有效避免参数传递错误。数组类型参数需特殊处理，确保与后端接口定义一致。
后端使用@RequestParam注解时，前端请求需明确设置params配置。数组参数应拆分为单个数值传递，避免直接传递数组对象。
组件调用遵循方法传参模式，确保参数类型和结构与后端接口匹配。开发过程中定期联调测试，及时发现参数不一致问题。
建议建立统一接口文档规范，明确参数类型和格式要求。前后端团队保持密切沟通，从源头减少参数定义差异。