目錄
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配置。數組參數應拆分為單個數值傳遞，避免直接傳遞數組對象。
組件調用遵循方法傳參模式，確保參數類型和結構與后端接口匹配。開發過程中定期聯調測試，及時發現參數不一致問題。
建議建立統一接口文檔規范，明確參數類型和格式要求。前后端團隊保持密切溝通，從源頭減少參數定義差異。
)
