引言
應(yīng)用主流的前端開(kāi)發(fā)工具Vue和后端開(kāi)發(fā)工具微軟Visual Studio 2019，進(jìn)行前后端聯(lián)合調(diào)試，不適為中小型應(yīng)用的一種常用簡(jiǎn)便調(diào)試方法，現(xiàn)介紹如下。
Vue
讀音/vju?/，類似view,是一套用于構(gòu)建用戶界面的漸進(jìn)式JAVAScript框架。Vue自底向上逐層應(yīng)用，只關(guān)注視圖層，易于上手，與第三方庫(kù)或既有項(xiàng)目整合，開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用SPA。
Vue是目前最流行的前端框架之一，axIOS是Vue中用來(lái)與后端交互的工具（類似ajax）。通過(guò)axios可以向服務(wù)器發(fā)送索要數(shù)據(jù)請(qǐng)求，服務(wù)器接收到請(qǐng)求后即會(huì)將數(shù)據(jù)返回給前臺(tái)。
使用vue前端項(xiàng)目開(kāi)發(fā)(默認(rèn)前后端分離)，vue-cli腳手架run server，nodejs會(huì)啟動(dòng)一個(gè)web site，此web site基于node.js實(shí)現(xiàn)，如果后端使用java、c#等實(shí)現(xiàn)的，此時(shí)如何請(qǐng)求后端的數(shù)據(jù)并進(jìn)行項(xiàng)目測(cè)試？
深入vue-cli腳手架發(fā)現(xiàn)，cli腳手架啟動(dòng)的web site默認(rèn)開(kāi)啟代理功能，可通過(guò)設(shè)置相關(guān)代理信息將請(qǐng)求轉(zhuǎn)發(fā)到對(duì)應(yīng)的后端應(yīng)用程序。
Visual Studio微軟集成開(kāi)發(fā)環(huán)境
流行的windows平臺(tái)應(yīng)用程序集成開(kāi)發(fā)環(huán)境，最新版為 Visual Studio 2019基于.NET Framework 4.8 。
調(diào)試步驟主要分三步，即先運(yùn)行vue環(huán)境，再進(jìn)入后端調(diào)試環(huán)境，第三步是在瀏覽器中打開(kāi)網(wǎng)址進(jìn)行聯(lián)調(diào)。
1、啟動(dòng)vue-cli
按 win+r，輸入cmd回車，進(jìn)入command命令行環(huán)境; 進(jìn)入項(xiàng)目目錄，輸入npm run dev回車，啟動(dòng)vue-cli
下圖是啟動(dòng)完成之后的內(nèi)容
2、 啟動(dòng)Visual Studio，進(jìn)入調(diào)試狀態(tài)
3、打開(kāi)chrome瀏覽器運(yùn)行
瀏覽器地址欄粘貼鏈接http://localhost:8080進(jìn)入前端程序主界面，就可以進(jìn)行調(diào)試狀態(tài)；
相關(guān)調(diào)試按鈕如下圖所示：
