解决三更博客项目出现的BUG-04-前端问题

问题引入

在浏览器上面一直看不到对应的效果，如下图所示：

分析问题

这很明显是没拿到数据问题，既然是数据问题，那么问题可能发生在前端，也有可能发生在后端，比如说后端没问题，前端的问题，前端可能没拿到数据，或者是拿到了数据渲染数据出了问题等，如果前端没问题，那么就可能是后端没获取到前端想要的数据，或者是接口都没问题，可能是前端访问接口路径错了，没拿到数据，可是我仔细比对了三更笔记中的接口路径地址，将我的某些路径进行了修改，确保了后端是没问题的了，可是前端依然这样，那么很明显就是前端的问题了，查看前端最有效的方法就是在浏览器中，使用检查，查看前端报错，下面是报错信息：

报错说得很明白，解析undefined的JSON是非法的，其实吧，这里我只要点击报错行，马上就能知道报错的具体原因，可是我没这样做，就反复查看前端代码，看了好久都不知道什么问题，后面是突然灵机一动才想到前端拿后端数据所用的属性名是userInfo，可是我的后端返回的是userInfoVo，下面是这部分截图：


哎，真的是造孽呀，让我查bug查了这么久，居然问题在这，尤其也说明前后端遵循一套接口规范的重要性呀！

解决问题

前端获取属性名为userInfoVo的属性值，只需改一下名字即可，如下图所示：

总结

网站出现问题，不是前端的问题就是后端的问题，可对前后端逐一排查，发现问题出现在前端时，要积极的在浏览器的查看那里查看前端报错信息，善于点击报错那里，我就是吃了这个亏，就一直没点那里，作死的去看前端源代码，看了好久都没看出名堂。
另外这里通过这个解决bug的例子，足以展现出前后端遵循好一套接口规范的重要性。吐槽一下，都是三更老师的错，在前端留下许多bug，除了这个之前还有那个登录的请求参数名，也和后端的接口形参名不一样，后端参数名userName，前端却写的是username