【踩坑记】哎,前后端联调中又遇到坑了!

299 阅读2分钟

在去年的《前后端联调中遇到的两个坑》一文中,本人讲述了自己在前后端联调中,遇到的坑,以及填坑的过程。没想到,时隔一年,前后端联调踩坑记又出续集了。

一、el-table组件中的鼠标事件失效了

这两天,用el-table组件做了一个统计表格。说是做,其实是更换。更换其中的一些字段、交互以及接口。本来以为很简单,结果做完发现不对了。具体如下:

1.设置了文字超长悬浮提示,但是鼠标hover文字时,没有任何反应。

2.设置了数字穿透,但是鼠标click数字时,没有任何反应。

一开始,以为是自己粗心,哪里代码写错了,就去仔细检查代码了,可是,一番检查过后,没有发现任何问题。

这就奇怪了,悬浮提示、数字穿透功能都是既有的功能,在更换之前都能正常使用,为啥在做简单的更换之后,就不行了呢。

难道是数据问题?可是,这是前端交互,跟数据有啥关系。

抱着试试看的想法,对比了一下之前接口返回的数据与现在接口返回的数据,终于发现区别了,现在的接口id返回的都是null,而el-table组件row-key设置的又是"id"。

跟后端小伙伴沟通返回id后,一切终于正常了!

二、编辑时清空了某个字段的数据并保存成功了,但是详情仍然返回了未清空之前的数据

当测试给我提了这个bug后,我第一时间跑去看了我编辑时对应字段的传参,发现,如果该字段为空时,传给后端的是null

传的是null,后端返回的却是未清空之前的数据,那肯定是后端的问题了,顺手就把bug转给了对应的后端。

不一会儿,后端小伙伴就来了。

后端小伙伴说到:

这个字段是int类型,需要传具体的值,无值时,传"",才能改变之前的值,传null会被过滤掉,做不了更改处理。 也就是说,大部分情况下,字段为空时,传参不要传null,要根据字段类型,传""[]{}等,除非后端加了注解,做了特殊说明。

原来如此,学到了!