项目场景:
本文主要讨论,Nuxt Server出现此类问题的解决方法,并不深入探讨Nuxt的一些原理性知识(此篇仅视为后端菜鸟程序员在前端采坑集锦之一)。
Nuxt基础性知识:Nuxt是一款前端框架,其主要目的策略就是后端传的数据会首先传送到Nuxt Server中,然后Nuxt会对后端数据进行渲染然后形成html页面。因为中间存在一个中间层,所以前端程序员或者是黑客,就不能从控制台看到后端传到前端的数据(因为数据已经被预处理为html页面)从而保证数据的安全性,但是也提升了程序的调试难度,更加考量程序员的功底(哈哈,菜鸟瞎诌的,听个响就行)
问题描述:
在某天跟着某站做一个分布式程序的时候:突然发现昨天晚上能运行前端界面,今天却报了Nuxt Server Error的错误,然后查看控制台、VSCode、Idea都无一所获。此时真的是一筹莫展,此情尽一直持续了大半个星期,直到某天收到一个前端大佬提点之后才逐渐将这个bug给慢慢解除。下面将慢慢讲述bug的发现以及解决策略。
后端页面在定位之后仅是此cms出现问题,因此就不罗列其他服务的控制台了。
@Override
public void run() {
bytes = mmInStream.read(buffer);
mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
}
Bug发现过程:
首先依旧先运行程序,然后开始调试,然后发现根路径(localhost:3000)爆出Nuxt Server Error错误,但是其子路径(localhost:3000/register)下竟然完好无损。
由此可看出,这个bug应该只存在于根路径的那个页面上,并且也不是Nuxt部署出现错误,前后端依旧能够调试。此时已经把问题缩小点根路径对应的页面上了。
然后从VSCode中找到本项目根路径对应的页面(page/index.vue),然后通过二分法进行精确定位(就是首先注释掉一半的代码,然后刷新页面查看是否可以,若无错则bug存在是另半个页面。不然bug在本半个页面的代码中存在,另外半个代码中依旧存在,然后继续二分策略,直到定位到代码的精确位置)。
**
注释位置为定位的出错代码。注释之后根页面为:
**
该错误代码对应的前端接口与后端接口为:
之后需先测试后端代码是否可行,本项目采用swagger进行测试,测试结果如下:
发现后端代码可行,然后前后端连接的接口貌似没有错误。此处这个问题又纠结了我好几个小时,才发现原来是requestMapping书写不规范所致。controller应为“/api/cms/ad”,我写成了"/api/cms/ap"。因此解决策略就呼吁而出了
解决方案:
仅需要对前后端不匹配接口进行处理即可,将控制器的requestMaping的“/api/cms/ad”修改为"/api/cms/ap"。
此时存在博主遇到的另一个问题(但是由于缓存原因,现在并不出现错误了,但是仍需要给广大读者以提醒):后端接口的requestMapping需要书写规范,希望读者的接口均写成下图的下行形式,而不是上行形式(需加“/”)。
不然,可能你后端测试没问题,但是在前后端联调时候就是个深水炸弹,说不准啥时回就爆发出来。而这种bug真的很难发现。
修复bug之后的结果为:
总结:
1.某项目在某天不能正确运行,但是某天的昨晚却可以正确运行(期间几乎没动代码)的原因?
猜测:因为接口联调出现错误,但是此时数据已经存入redis中,数据直接从redis中获取,因此避免了bug产生,但是到第二天早,redis中缓存的持续时间早已过,redis为空,需重新获取接口,然后就产生错误。
2.Nuxt Server Error错误步骤
(1)定位出错页面
(2)采用二分法详细定位错误位置
(3)查看是逻辑错误,还是规范问题,或者粗心(字母少写等)
requestMapping中应该为“/list”而不仅仅是“list”,若后者后端可调式,但是前后端联调则会出现问题(具体原因不明)
如果读者觉得本文对您点后端联调有所启发,或者能解决您当前遇到的bug,希望你能动动小手对本文点赞,当然如果一间三联的话就更好了(哈哈哈哈,我可能在想pc)