第一篇：图书管理系统前后端接口联调全过程，参数传递踩坑汇总

一、前言本次实训我负责校园图书管理系统的前后端接口对接、Axios 请求封装与全模块联调工作项目采用 SpringBoot Vue2 ElementUI 技术栈。前期后端同学写完接口、前端页面写完后出现大量参数不匹配、跨域、数据格式转换、分页传参异常等问题。本篇记录完整联调流程以及开发中遇到的典型坑点与解决方案给同做图书管理系统实训的同学参考。二、项目环境与接口基础搭建前端统一封装 Axios 请求新建 request.js 文件统一配置请求基地址、请求头、响应拦截器统一处理后端返回状态码。javascript运行import axios from axiosconst service axios.create({baseURL: http://localhost:8080/api,timeout: 5000})// 请求拦截器携带tokenservice.interceptors.request.use(config {config.headers.token localStorage.getItem(token)return config})// 响应拦截统一捕获错误service.interceptors.response.use(res res.data, err {alert(接口请求失败 err.response.data.msg)})export default service按业务模块拆分接口文件新建 api 文件夹拆分 login.js、book.js、borrow.js、user.js将登录、图书、借阅、用户权限接口分类管理方便维护。后端跨域配置后端添加全局跨域配置类解决前端本地 8081 端口访问后端 8080 端口跨域报错。三、接口联调完整流程核对后端接口文档请求方式 GET/POST、请求路径、入参名称、返回 JSON 结构前端编写对应请求函数页面引入调用控制台打印请求参数、返回数据核对字段名是否一致分页、模糊查询、表单新增 / 编辑接口单独测试批量操作、借阅事务接口重点校验。四、联调高频踩坑与解决办法坑 1前端传参名和后端实体类属性大小写不一致问题前端传 bookName后端实体是 bookname接收参数为空。解决统一前后端命名规范全部使用小驼峰后端添加 Data 自动映射复杂参数用 DTO 接收。坑 2POST 提交表单后端接收不到 JSON 参数问题前端未设置请求头 Content-Type:application/json后端 RequestBody 接收为空。解决Axios 封装时默认 json 传参提交表单对象直接传 JSON不要拼接 params。坑 3分页参数 pageNum、pageSize 传参混乱图书列表、借阅记录都需要分页初期有的接口放在 params有的放在路径。解决统一分页参数通过 params 传递后端使用 MyBatis-Plus 分页插件自动接收。坑 4删除、修改接口携带 id后端接收 null问题删除按钮点击时 id 未正确绑定接口请求无参数。解决页面绑定行数据 id调用接口时显式传入 id控制台打印校验参数。坑 5登录 token 过期未拦截接口报未授权解决在响应拦截器捕获 401 状态码自动跳转到登录页面清空本地 token。五、总结接口联调是前后端分离项目中耗时最长的环节前期统一接口规范、统一参数命名能减少 80% 的问题。本次图书系统包含登录权限、图书 CRUD、借还业务多套接口完整走完联调流程后我掌握了 Axios 封装、跨域处理、参数排错思路为后续做其他管理系统打下基础。截图建议Axios 封装代码截图、控制台接口报错截图、跨域配置代码截图、图书列表接口请求成功效果图