專案場景：
本文主要討論，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）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/212920.html
標籤：其他