单体电商项目中遇到的Bug之三

后端正常运行,前端Console显示:Cannot read property ‘0’ of undefined

电子商城项目中有三级分类图片展示:一类:甜品;二类:属于甜品的蛋糕;三类:属于蛋糕的各种糕点;通过鼠标下滑的方式将所有商品的图片,一一显示出来,而不是一次性全部展示出来,这种加载方式就是:懒加载;

在这里插入图片描述
但是目前的问题是,后端根据sql语句获取了相应的数据,并返回给前端,前端获取了数据,但是页面无法进行懒加载且报了一个Cannot read property ‘0’ of undefined的错误,后端却正确获取数据,没有报错:
在这里插入图片描述
前端也获取到了数据:
在这里插入图片描述
前端Console报了Cannot read property ‘0’ of undefined的错误
在这里插入图片描述
翻译一下:
在这里插入图片描述
百度得到的答案是渲染问题:
https://blog.csdn.net/edc3001/article/details/86833558

我的问题类似,但是更低级,因为我的报错原因是因为前后端命名不一致导致的:
因为三级分类要通过二级分类的id来获取对应的商品信息,所以将三级分类使用List封装在二级的vo中,只用二级的vo就可以将二级和三级的数据一起封装起来并回馈前端,但是我的List方法将SimpleItemList多写了一个s;即:SimpleItemsList,而前端获取数据的路径使用的是SimpleItemList,这就导致为什么前端获取了数据,却无法渲染,因为它只能渲染一级分类的图片,拿二级分类的数据时,却报了一个无法识别的错
在这里插入图片描述
在这里插入图片描述
其实,之所以会写错,却深信不疑的觉的没错,还有一个原因那就是命名,因为二级分类命名的时候为了达到见名知意的效果,在Item后加s表示多个商品,所以对于三级也就下意识的觉的一定要加s,希望大家引以为戒!
在这里插入图片描述
好了,将S去掉,使得前后端命名一致后,在运行就能懒加载出三级商品的信息了
在这里插入图片描述

二、java.lang.NumberFormatException:For input string: “k”

在这里插入图片描述
翻译:由于字符“K”,无法查询数据库?
在这里插入图片描述
自定义的mapper中唯一使用到K的地方:根据用户的选择,以不同的方式展示信息
在这里插入图片描述
这里是因为paramsMap.sort == 'p’是在判断sort是否是p或c或k,但是却在双引号中,无法识别单引号才报错的,需要转义才行:
在这里插入图片描述
转移后,运行成功,数据很好的通过用户的选择来展示:
在这里插入图片描述

三、版本冲突:

在这里插入图片描述
版本冲突问题,在主模块的pom中添加最新版本的spring-core-5.2.7.RELEASE就可以了,每个人版本冲突的jar都不一样,大多都是主pom中的文件版本低于或等于子模块中的jar版本:

在这里插入图片描述

四、Request method ‘POST’ not supported

在这里插入图片描述
这是因为该项目的前端统一使用的是POST提交,而后端使用的提交方式一旦不是POST就会报该错误:
前端:
在这里插入图片描述
后端:
在这里插入图片描述
所以将前端或者后端改成get/post提交就可以了
但这是不对的,违反了Restful协议,根据协议:
查询:GetMapping
新增:PostMapping
修改:PutMapping
删除:DeleteMapping
便于代码的阅读,属于很重要的代码规范和习惯


版权声明:本文为ZXin153原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。