一、Vue框架的開(kāi)發(fā)流程介紹

當(dāng)我們從github上下載一個(gè)前端模板框架到本地后，框架中經(jīng)常會(huì)自帶有一些跳轉(zhuǎn)顯示類(lèi)的功能，我們可以通過(guò)查看這些功能是如何實(shí)現(xiàn)的，進(jìn)而一步步改造為我們需要的樣子。在這一開(kāi)發(fā)過(guò)程中，主要有4個(gè)重要的前端培訓(xùn)具體操作，下面依次介紹這4個(gè)具體的步驟：

步驟1：添加路由規(guī)則

• 在頁(yè)面的左邊菜單欄，我們點(diǎn)擊不同的選項(xiàng)卡，在瀏覽器的輸入框就會(huì)自帶跳轉(zhuǎn)出不同的url，這一過(guò)程就稱(chēng)作"路由"(你當(dāng)然可以簡(jiǎn)單的將"路由"理解為是"選路")。
  路由

• 這些路由規(guī)則需要在router/index.js 中編寫(xiě)。
  在入口文件main.js中，導(dǎo)入了router文件，當(dāng)我們需要為項(xiàng)目編寫(xiě)路由規(guī)則時(shí)，就需要在router/index.js 中編寫(xiě)。
  導(dǎo)入路由規(guī)則

步驟2：添加要跳轉(zhuǎn)的路徑

在添加路由規(guī)則時(shí)，通過(guò)component屬性可以設(shè)置要跳轉(zhuǎn)的路徑，并且需要在對(duì)應(yīng)的路徑上創(chuàng)建對(duì)應(yīng)的文件。

步驟3：定義接口路徑

• 在頁(yè)面中引入了api下的js文件，該文件中定義了接口路徑的一部分。
  頁(yè)面中引入了api下的js文件

• 接口路徑的另一部分是 config/dev.env.js 中的BASE_API屬性，BASE_API與url共同構(gòu)成了項(xiàng)目頁(yè)面的訪問(wèn)路徑。
  BASE_API與url一起構(gòu)成頁(yè)面的訪問(wèn)路徑

步驟4：使用axios進(jìn)行接口調(diào)用

設(shè)置好路由規(guī)則、要跳轉(zhuǎn)的路徑、接口路徑之后，我們就需要使用axios進(jìn)行接口調(diào)用，具體是在頁(yè)面引入JS文件，使用axios進(jìn)行接口調(diào)用，把接口返回?cái)?shù)據(jù)在頁(yè)面顯示。

二、通過(guò)Vue框架調(diào)用后端接口實(shí)踐

繼續(xù)以《分布式醫(yī)療掛號(hào)系統(tǒng)》為例，之前的文章中已經(jīng)完成了醫(yī)院設(shè)置接口的開(kāi)發(fā)，目前已經(jīng)有了具體的后端接口，下面根據(jù)上文配置好前端環(huán)境，嘗試使用Vue框架調(diào)用后端醫(yī)院設(shè)置表的查詢(xún)接口，進(jìn)而顯示接口中的數(shù)據(jù)：

(1)添加醫(yī)院設(shè)置路由

• 在router/index.js中設(shè)置路由規(guī)則：
  路由醫(yī)院記錄列表：/hospSet/list
  路由醫(yī)院記錄添加：/hospSet/add

(2)添加跳轉(zhuǎn)的路徑

• 繼續(xù)在router/index.js的component屬性中添加跳轉(zhuǎn)的路徑：
  跳轉(zhuǎn)到醫(yī)院記錄列表：@/views/hospset/list
  跳轉(zhuǎn)到醫(yī)院記錄添加：@/views/hospset/add

(3)定義接口路徑

• 在api文件夾下創(chuàng)建名為hspset.js的文件，定義后端接口路徑。
  定義接口路徑

在config/dev.env.js 中修改接口ip地址和端口號(hào)：

• 注意不要改為https，因?yàn)閔ttps為加密傳輸，需要授權(quán)后才能操作。
  修改為本機(jī)8201端口

(4)使用axios進(jìn)行接口調(diào)用

醫(yī)院設(shè)置的接口調(diào)用代碼寫(xiě)在下圖的list.vue中，下圖顯示了前端調(diào)用后端的整體過(guò)程：

二、測(cè)試

(1)測(cè)試后端接口

首先在一樣設(shè)置數(shù)據(jù)庫(kù)表中準(zhǔn)備好4條記錄。

然后將醫(yī)院設(shè)置微服務(wù)模塊啟動(dòng)，使用swagger進(jìn)行條件查詢(xún)帶分頁(yè)接口的測(cè)試：

(2)跨域訪問(wèn)問(wèn)題

在前后端整合時(shí)，當(dāng)以下三個(gè)部分中存在一個(gè)及以上不相同時(shí)，會(huì)出現(xiàn)跨域問(wèn)題：

• 訪問(wèn)協(xié)議

• 訪問(wèn)地址

• 訪問(wèn)端口號(hào)

解決跨域問(wèn)題最簡(jiǎn)單的方式：使用 @CrossOrigin 注解，將其加在發(fā)出請(qǐng)求的Controller類(lèi)上即可。

(3)狀態(tài)碼問(wèn)題

編寫(xiě)后端代碼時(shí)，我們定義了成功狀態(tài)碼為200，而在前端模板中，使用的是20000作為成功狀態(tài)碼。為了前后端統(tǒng)一，可以將前端 utils/request.js 中的成功狀態(tài)碼改為200和后端匹配。

(4)最終測(cè)試

可以看到點(diǎn)擊醫(yī)院設(shè)置列表后，成功到達(dá)后端進(jìn)而調(diào)用了醫(yī)院設(shè)置表的數(shù)據(jù)庫(kù)，獲得了醫(yī)院設(shè)置表的JSON數(shù)據(jù)，后續(xù)可以通過(guò)此JSON數(shù)據(jù)將其顯示在頁(yè)面上！