博客
关于我
关于前端传参后端无法接收的踩坑实录
阅读量:212 次
发布时间:2019-02-28

本文共 1241 字,大约阅读时间需要 4 分钟。

数据库表设计与前端联调的难关

在业务新增功能开发过程中,我负责处理前端传递的数据结构问题。系统的核心需求是对多的关系设计,基础信息存储在基础表中,详细信息存储在明细表中。根据业务逻辑,明细信息分为甲方来源、乙方来源和丙方来源三大类。

最初的数据结构设计如下:

public class RequestAddDto {    // 基础信息    ...    // 明细信息 - 甲方来源    @ApiModelProperty("明细信息 - 甲方来源")    private List
requestFirstAddDtos; // 明细信息 - 乙方来源 @ApiModelProperty("明细信息 - 乙方来源") private List
requestSecondAddDtos; // 明细信息 - 丙方来源 @ApiModelProperty("明细信息 - 丙方来源") private List
requestThirdAddDtos;}

在与前端进行联调时,发现Swagger文档中入参示例显示为null,直接将结构化文档传给前端进行测试。我准备了以下JSON格式:

{    "xx": "xx",    "xx": "xx",    "aAddDtos": [ {}, {} ],    "bAddDtos": [ {}, {} ],    "cAddDtos": [ {}, {} ]}

发现明细信息未能正确传输。经过断点调试,确认三个来源的数据都未传入。经过反复测试,终于发现问题出在变量名的命名上。将requestFirstAddDtos改为requestFirstAddDtos后,前端数据终于正确传送。

最终确定的 DTO 结构如下:

public class RequestAddDto {    // 基础信息    ...    // 明细信息 - 甲方来源    @ApiModelProperty("明细信息 - 甲方来源")    private List
requestFirstAddDtos; // 明细信息 - 乙方来源 @ApiModelProperty("明细信息 - 乙方来源") private List
requestSecondAddDtos; // 明细信息 - 丙方来源 @ApiModelProperty("明细信息 - 丙方来源") private List
requestThirdAddDtos;}

通过这次经历,我学会了在变量命名上更加谨慎,必要时可以通过调试工具快速定位问题。同时,建议在前端联调阶段多进行数据格式的验证,避免因细节问题浪费开发时间。

转载地址:http://uqii.baihongyu.com/

你可能感兴趣的文章
npm install的--save和--save-dev使用说明
查看>>
npm node pm2相关问题
查看>>
npm run build 失败Compiler server unexpectedly exited with code: null and signal: SIGBUS
查看>>
npm run build报Cannot find module错误的解决方法
查看>>
npm run build部署到云服务器中的Nginx(图文配置)
查看>>
npm run dev 和npm dev、npm run start和npm start、npm run serve和npm serve等的区别
查看>>
npm run dev 报错PS ‘vite‘ 不是内部或外部命令,也不是可运行的程序或批处理文件。
查看>>
npm scripts 使用指南
查看>>
npm should be run outside of the node repl, in your normal shell
查看>>
npm start运行了什么
查看>>
npm WARN deprecated core-js@2.6.12 core-js@<3.3 is no longer maintained and not recommended for usa
查看>>
npm 下载依赖慢的解决方案(亲测有效)
查看>>
npm 安装依赖过程中报错:Error: Can‘t find Python executable “python“, you can set the PYTHON env variable
查看>>
npm.taobao.org 淘宝 npm 镜像证书过期?这样解决!
查看>>
npm—小记
查看>>
npm上传自己的项目
查看>>
npm介绍以及常用命令
查看>>
NPM使用前设置和升级
查看>>
npm入门,这篇就够了
查看>>
npm切换到淘宝源
查看>>