一、Vue架構的開發流程介紹
當我們從github上下載下傳一個前端模闆架構到本地後，架構中經常會自帶有一些跳轉顯示類的功能，我們可以通過檢視這些功能是如何實作的，進而一步步改造為我們需要的樣子。在這一開發過程中，主要有4個重要的前端教育訓練具體操作，下面依次介紹這4個具體的步驟：
步驟1：添加路由規則
-
在頁面的左邊菜單欄，我們點選不同的頁籤，在浏覽器的輸入框就會自帶跳轉出不同的url，這一過程就稱作"路由"(你當然可以簡單的将"路由"了解為是"選路")。
路由
-
這些路由規則需要在router/index.js 中編寫。
在入口檔案main.js中，導入了router檔案，當我們需要為項目編寫路由規則時，就需要在router/index.js 中編寫。
導入路由規則
步驟2：添加要跳轉的路徑
在添加路由規則時，通過component屬性可以設定要跳轉的路徑，并且需要在對應的路徑上建立對應的檔案。
步驟3：定義接口路徑
-
在頁面中引入了api下的js檔案，該檔案中定義了接口路徑的一部分。
頁面中引入了api下的js檔案
-
接口路徑的另一部分是 config/dev.env.js 中的BASE_API屬性，BASE_API與url共同構成了項目頁面的通路路徑。
BASE_API與url一起構成頁面的通路路徑
步驟4：使用axios進行接口調用
設定好路由規則、要跳轉的路徑、接口路徑之後，我們就需要使用axios進行接口調用，具體是在頁面引入JS檔案，使用axios進行接口調用，把接口傳回資料在頁面顯示。
二、通過Vue架構調用後端接口實踐
繼續以《分布式醫療挂号系統》為例，之前的文章中已經完成了醫院設定接口的開發，目前已經有了具體的後端接口，下面根據上文配置好前端環境，嘗試使用Vue架構調用後端醫院設定表的查詢接口，進而顯示接口中的資料：
(1)添加醫院設定路由
-
在router/index.js中設定路由規則：
路由醫院記錄清單：/hospSet/list
路由醫院記錄添加：/hospSet/add
(2)添加跳轉的路徑
-
繼續在router/index.js的component屬性中添加跳轉的路徑：
跳轉到醫院記錄清單：@/views/hospset/list
跳轉到醫院記錄添加：@/views/hospset/add
(3)定義接口路徑
-
在api檔案夾下建立名為hspset.js的檔案，定義後端接口路徑。
定義接口路徑
在config/dev.env.js 中修改接口ip位址和端口号：
-
注意不要改為https，因為https為加密傳輸，需要授權後才能操作。
修改為本機8201端口
(4)使用axios進行接口調用
醫院設定的接口調用代碼寫在下圖的list.vue中，下圖顯示了前端調用後端的整體過程：
二、測試
(1)測試後端接口
首先在一樣設定資料庫表中準備好4條記錄。
然後将醫院設定微服務子產品啟動，使用swagger進行條件查詢帶分頁接口的測試：
(2)跨域通路問題
在前後端整合時，當以下三個部分中存在一個及以上不相同時，會出現跨域問題：
- 通路協定
- 通路位址
- 通路端口号
解決跨域問題最簡單的方式：使用 @CrossOrigin 注解，将其加在送出請求的Controller類上即可。
(3)狀态碼問題
編寫後端代碼時，我們定義了成功狀态碼為200，而在前端模闆中，使用的是20000作為成功狀态碼。為了前後端統一，可以将前端 utils/request.js 中的成功狀态碼改為200和後端比對。
(4)最終測試
可以看到點選醫院設定清單後，成功到達後端進而調用了醫院設定表的資料庫，獲得了醫院設定表的JSON資料，後續可以通過此JSON資料将其顯示在頁面上！