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

一、前言
本次实训我负责校园图书管理系统的前后端接口对接、Axios 请求封装与全模块联调工作，项目采用 SpringBoot + Vue2 + ElementUI 技术栈。前期后端同学写完接口、前端页面写完后，出现大量参数不匹配、跨域、数据格式转换、分页传参异常等问题。本篇记录完整联调流程，以及开发中遇到的典型坑点与解决方案，给同做图书管理系统实训的同学参考。
二、项目环境与接口基础搭建
前端统一封装 Axios 请求
新建 request.js 文件，统一配置请求基地址、请求头、响应拦截器，统一处理后端返回状态码。
javascript
运行
import axios from 'axios'
const service = axios.create({
baseURL: 'http://localhost:8080/api',
timeout: 5000
})
// 请求拦截器携带token
service.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 接收。
坑 2：POST 提交表单，后端接收不到 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 封装代码截图、控制台接口报错截图、跨域配置代码截图、图书列表接口请求成功效果图