前言

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

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

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

一、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è)重要的具體操作，下面依次介紹這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ě)。

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

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

步驟3：定義接口路徑

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

接口路徑的另一部分是 config/dev.env.js 中的BASE_API屬性，BASE_API與url共同構(gòu)成了項(xiàng)目頁(yè)面的訪(fǎng)問(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)后才能操作。

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.跨域訪(fǎng)問(wèn)問(wèn)題

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

• 訪(fǎng)問(wèn)協(xié)議
• 訪(fǎng)問(wèn)地址
• 訪(fǎng)問(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è)面上！

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

最新評(píng)論