黑马头条踩坑总结:频道状态筛选前端联调失效问题

一、问题现象

完成频道管理后端接口 开发后,实现了频道名称模糊查询 + 状态精确查询功能:

  • 后端 ChannelDto 添加 status 字段
  • 业务层拼接 eq() 精确查询条件
  • PostMan 直接测试接口:status=true/false 接收正常、查询生效
  • 前端联调失败 :无论切换「启用 / 禁用 / 全部」,后端断点中 status 始终为 null

二、问题排查

  1. 后端代码验证 PostMan 构造请求直接调用后端服务,参数传递、数据查询完全正常,排除后端代码问题
  2. 前端请求验证 浏览器 F12 查看网络请求,请求体中status 参数,证明前端未将状态值传递给后端。

三、核心原因(关键踩坑点)

1. 混淆「前端打包产物」和「前端源码」

  • 我修改的是 Nginx 托管的 admin-web 文件夹:里面是 npm run build 打包后的压缩混淆静态资源app.xxx.js),所有页面代码被合并压缩,无法修改、无法定位业务代码
  • 真正可修改的是独立的 Vue 前端源码工程 ,修改后需要重新打包替换 admin-web 才能生效。

2. 前端未实现参数传递

前端频道页面的状态下拉框未绑定查询参数

  • 未在查询对象 queryParams 中添加 status 属性
  • 下拉框 v-model 未绑定状态值
  • 发起请求时未将 status 放入请求体,导致后端接收为空
相关推荐
JavaGuide39 分钟前
一个 SKILL.md 拿下 2.3 万 Star:让 Codex/Claude Code 少说废话、先给答案
前端·后端
晴天161 小时前
多个 VS Code 项目会导致 Chrome 和 Electron 应用一起卡住?-Day30
前端·chrome·electron
BigTopOne8 小时前
【WebRtc】DTLS-SRTP 加密完整流程详解
前端
陈随易8 小时前
pm2 替代品,nodejs&bun 线上部署必备工具
前端·后端·程序员
单线程_018 小时前
从案例分析 Vue3 Tokenizer 源码一
前端·javascript·vue.js
BigTopOne8 小时前
【WebRtc】-ICE Candidate 与 STUN/TURN 原理详解
前端
l1258658 小时前
# LangGraph Memory机制深度解析:短期记忆与长期记忆的工程实践
前端·人工智能·python·langchain·bootstrap
丘山一郎9 小时前
Spring 中的IOC控制反转 和DI依赖注入
java·后端·spring
码视野9 小时前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
MetaLite9 小时前
Spring-AOP自调用为什么失效-AopContext真能解决吗
java·后端·spring