SpringBoot+Vue前后端分离项目排错思路

418 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第6天,点击查看活动详情

前言

好的排错思路至关重要, 这里我分享一个我做前后端分离项目排错思路, 学起来~~~

实例

前端页面不显示后端的数据

image-20220516105619537

排错思路

==从头开始想,当我点击这个按钮的时候发生了什么事,从前端想到后端依次检查。如果都没有错误那就检查其他配置,如nginx,nacos,等第三方技术==

好,那么我们来实践一下

1、从前到后发森什么事了?

image-20220516111618146

2、详细分析

image-20220516112054147

巧用开发者工具

==用开发者工具抓包,看看请求的过程都发生了什么==

image-20220516112405497

前后端测试

因为整个项目是微服务架构,这里其实是订单微服务调用了课程信息、用户信息微服务。

用户信息都显示出来了,那就说明是课程微服务出问题了,我们先用swagger进行测试看看接口的功能有没有问题

image-20220516112908009

问题逐渐清晰了,后端功能没问题,那就是前端的问题了

其实刚才我们就能定位到是前端的问题,因为课程id参数为undefined,参数是通过前端传的。为了更严谨,我们选择都测试。

让目光再次回到前端代码

image-20220516113626404

image-20220516113819243

再次测试 image-20220516113935794

总结

前端项目用的是nuxt框架,这个框架加载的有时很慢,进行更改后记得重启 后端项目也是一样,更改后记得重启