Nuxt Server Error的解决方案（前后端联调的Bug定位与修复方法）

项目场景：

本文主要讨论，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）