前言:
自己是基於別人的項目開發的,考慮到js沒vue好用,就采用vue來改變DOM節點和數據以及監聽事件的實現。
背景:
login頁面,原開發者是通過表單 submit來提交數據的。
自己沒考慮太多,直接在提交標簽加入點擊方法,試圖通過點擊事件觸發vue中的提交數據的方法,然后根據返回數據再進行頁面跳轉或其他處理。
結果:客戶端axios一直收不到返回數據,自己通過前端調試也發現了 axios中的response undefined,這也導致axios既不會處理正確返回的方法也不會處理錯誤返回的方法,但是能夠成功向服務端發送數據,因為自己的日志文件里是有請求記錄,和返回數據的記錄的。
思考歷程:
1.服務端可以正確接收數據,並且正常返回數據,應該是客戶端的問題。
2.自己對axios也不太了解,是不是自己調用接口寫錯了,去看別人的使用案例,詳細了解axios如何使用。
3.確認axios沒有接口調用錯誤,依然收不到數據,感覺會不會是原作者引入的js中有對點擊事件的處理,對自己定義的方法有干涉。然后前端查看監聽事件,點擊事件只有一個,就是vue里定義的。
4.最后去網頁,發現類型為 submit,改成 button后可用。
總結:因該是html 表單提交按鈕submit的原生事件影響了 axios方法對數據的獲取。如果不是對html特別了解,我們很難理解html原生的具有事件行為的標簽的語義是如何實現的。所以,如需要自己實現功能,盡量避免對原生具有事件行為的標簽的使用。