前言

前后端分離開發(fā)是目前流行的大趨勢，所謂前后端分離，僅從技術(shù)層面講主要是指前端通過調(diào)用后端提供的接口實現(xiàn)頁面的交互邏輯。

具體可以使用nodeJS、axios、ajax等進行交互，使用前后端分離開發(fā)主要有解耦和提高性能兩點考慮：

• 解耦：實現(xiàn)了前后端的解耦、靜態(tài)資源與動態(tài)資源的分離。
• 提高性能：減少了后端服務(wù)器壓力，不再是全局刷新，而是異步加載局部刷新。

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

當(dāng)我們從github上下載一個前端模板框架到本地后，框架中經(jīng)常會自帶有一些跳轉(zhuǎn)顯示類的功能，我們可以通過查看這些功能是如何實現(xiàn)的，進而一步步改造為我們需要的樣子。

在這一開發(fā)過程中，主要有4個重要的具體操作，下面依次介紹這4個具體的步驟：

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

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

這些路由規(guī)則需要在router/index.js 中編寫。

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

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

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

步驟3：定義接口路徑

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

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

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

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

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

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

注意不要改為https，因為https為加密傳輸，需要授權(quán)后才能操作。

4.使用axios進行接口調(diào)用

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

二、測試

1.測試后端接口

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

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

2.跨域訪問問題

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

• 訪問協(xié)議
• 訪問地址
• 訪問端口號

解決跨域問題最簡單的方式：使用 @CrossOrigin 注解，將其加在發(fā)出請求的Controller類上即可。

3.狀態(tài)碼問題

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

4.最終測試

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

以上就是VUE開發(fā)分布式醫(yī)療掛號系統(tǒng)后臺管理頁面步驟的詳細內(nèi)容，更多關(guān)于分布式醫(yī)療掛號系統(tǒng)VUE開發(fā)后臺管理頁面的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論