基于前后端交互的就醫(yī)無憂系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

黃晟祺 許林瑞 汪玉笳 曾嬡 李功權(quán)

摘 ?要：傳統(tǒng)的Web開發(fā)模式中前后端代碼高度耦合，導(dǎo)致系統(tǒng)分工不明確，開發(fā)效率低，因此前后端分離的開發(fā)模式在當(dāng)前Web應(yīng)用中顯得尤為重要。本文面向智慧就醫(yī)問題，引入前后端分離的漸近式框架Vue.js（一套輕量級(jí)的構(gòu)建用戶的漸進(jìn)式框架）、ElementUI組件庫（餓了么團(tuán)隊(duì)開發(fā)的一款的Vue框架）、webpack構(gòu)建技術(shù)（一個(gè)模塊打包器），后端基于Dubbo分布式架構(gòu)進(jìn)行開發(fā)，前后端利用Ajax（創(chuàng)建交互式的網(wǎng)頁開發(fā)技術(shù)）進(jìn)行數(shù)據(jù)交互。設(shè)計(jì)實(shí)現(xiàn)了基于GIS技術(shù)（一種空間信息分析技術(shù)）的就醫(yī)無憂服務(wù)系統(tǒng)，系統(tǒng)具備空間查詢、屬性查詢、緩沖區(qū)分析、周邊設(shè)施查詢等基礎(chǔ)功能。實(shí)驗(yàn)表明，前后端分離的開發(fā)模式使開發(fā)人員分工明確，提高了系統(tǒng)性能和開發(fā)效率。

關(guān)鍵詞：前后端分離;Vue.js;ElementUI;Dubbo

中圖分類號(hào)：TP311 ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

Abstract： High coupling of front-end and back-end codes in traditional Web development model leads to unclear system division of labor and low development efficiency. Therefore， development model of front-end and back-end separation is of particular importance in current Web applications. This paper aims to solve the problem of smart medical service by using the progressive framework Vue.js （a lightweight progressive framework for building users）， Elementui component library （a Vue framework developed by the Ele.me team）， and webpack construction technology （a module packer）. Back-end is developed based on the Dubbo distributed architecture， and Ajax （creating interactive Web development technology） is used for data interaction between front-end and back-end. The worry-free medical service system based on GIS technology （a kind of spatial information analysis technology） is implemented， which has basic functions such as spatial query， attribute query， buffer analysis， and surrounding facility query. Experiments show that the development model of front-end and back-end separation defines a clear division of labor and improves system performance and development efficiency.

Keywords： front-end and back-end separation; Vue.js; Elementui; Dubbo

1 ? 引言（Introduction）

傳統(tǒng)的開發(fā)方式將前端代碼和后端代碼混合在一起，如ASP、JSP技術(shù)等，這種開發(fā)模式存在代碼可讀性差、開發(fā)效率低等問題[1]。針對(duì)以上問題，產(chǎn)生并發(fā)展了前后端分離的開發(fā)架構(gòu)。前端組件化、工程化，后端數(shù)據(jù)化;前端實(shí)現(xiàn)人機(jī)交互邏輯，提供業(yè)務(wù)數(shù)據(jù)展示，后端為前端提供業(yè)務(wù)數(shù)據(jù)支撐;前后端通過RESTful接口進(jìn)行數(shù)據(jù)交互[2]。前后端分離的開發(fā)模式分工明確，提升了系統(tǒng)的性能，讓效率最大化，同時(shí)使系統(tǒng)的開發(fā)也更加專業(yè)，降低了開發(fā)成本。

本文設(shè)計(jì)了一款基于前后端分離的就醫(yī)無憂服務(wù)系統(tǒng)，系統(tǒng)采用前后端分離的開發(fā)模式，采用了Dubbo、Spring MVC、Spring Security分布式架構(gòu)、權(quán)限技術(shù)棧、Echarts的報(bào)表技術(shù)棧、MySQL的持久化技術(shù)棧，以及HTML5、CSS3、jQuery、Node.js、Vue.js（一套輕量級(jí)的構(gòu)建用戶的漸進(jìn)式框架）、Elementui等技術(shù)棧、第三方服務(wù)七牛云（存儲(chǔ)服務(wù)）和百度地圖API。

2 ? 相關(guān)研究基礎(chǔ)（Related research foundation）

2.1 ? 前后端分離技術(shù)

2.1.1 ? 定義

前后端分離的核心思想是前端HTML頁面通過Ajax調(diào)用后端的RESTful API接口，并通過JSON數(shù)據(jù)進(jìn)行交互[3]。它的開發(fā)模式是前端技術(shù)人員只專注于前端的工作，負(fù)責(zé)頁面設(shè)計(jì)、框架搭建以及把后端返回來的數(shù)據(jù)渲染到頁面上，不用考慮和理解后端開發(fā)的復(fù)雜代碼，而后端技術(shù)人員負(fù)責(zé)提供接口給前端技術(shù)人員。前后端人員分工明確，大大提高了工作效率。前后端分離的最終目標(biāo)是前端和服務(wù)端是完全獨(dú)立的項(xiàng)目，前端項(xiàng)目分為瀏覽器和控制層，服務(wù)端項(xiàng)目分為服務(wù)層、DAO層等。項(xiàng)目開發(fā)時(shí)前后端完全分開，展示和交互是前端的作用，業(yè)務(wù)服務(wù)是后端的作用，最后生產(chǎn)發(fā)布時(shí)分開部署，即可完成前后端最大程度解耦[4]。

2.1.2 ? 前后端分離的優(yōu)勢(shì)

（1）前后端分開部署服務(wù)器，系統(tǒng)性能提升

前后端的服務(wù)器分開部署，減輕了服務(wù)器的壓力，提升了頁面的流暢度以及用戶的體驗(yàn)度，最大程度地解決了隨著系統(tǒng)應(yīng)用范圍的增大、用戶訪問量的增加，服務(wù)器訪問過慢或服務(wù)器崩潰的問題。前后端分離極大地完成了前后端解耦，提升了系統(tǒng)性能。

（2）打造高質(zhì)量人才

全棧開發(fā)者的精力有限，大部分的全棧開發(fā)者學(xué)習(xí)廣而不專，要掌握數(shù)據(jù)庫、服務(wù)器開發(fā)、前端開發(fā)等多種技術(shù)。相比而言，前后端分離是前后端開發(fā)人員在不同的研究領(lǐng)域里各自學(xué)習(xí)，對(duì)于前端開發(fā)人員，把精力放在HTML5、CSS3、jQuery、bootstrap、Vue.js、webpack、Node.js、Elementui，以及設(shè)計(jì)模式上;對(duì)于后端開發(fā)人員，重點(diǎn)學(xué)習(xí)Java、Spring+Spring MVC原理及源碼等，使得在有效地時(shí)間內(nèi)，讓開發(fā)人員不斷學(xué)習(xí)，積累經(jīng)驗(yàn)，更加精通自己的專業(yè)知識(shí)，作出更好的產(chǎn)品，提高開發(fā)效率。因此，前后端分離的模式更有利于打造高質(zhì)量的前后端人才，使開發(fā)更加專業(yè)。

（3）分工明確，讓效率最大化

前后端分離可以避免在業(yè)務(wù)邏輯復(fù)雜的系統(tǒng)里前后端代碼混合在一起，當(dāng)出現(xiàn)bug的時(shí)候可以快速定位是前端開發(fā)人員還是后端開發(fā)人員的問題，再由對(duì)應(yīng)的人負(fù)責(zé)解決，比如客戶端的問題則不需要后臺(tái)的工作人員參與調(diào)試，由前端開發(fā)人員定位解決即可。當(dāng)前端需要修改一個(gè)模塊時(shí)，后端只需在原基礎(chǔ)上再提供一個(gè)接口即可讓項(xiàng)目的擴(kuò)展變得更加方便。前后端并行開發(fā)，雙方互不干擾，分工明確，讓效率達(dá)到最大化，也有助于搶占市場(chǎng)。

（4）增強(qiáng)用戶的體驗(yàn)感

前后端分離模式的出現(xiàn)，實(shí)現(xiàn)了高內(nèi)聚低耦合，節(jié)約了開發(fā)時(shí)間，讓前端能夠采用更多的時(shí)間追求頁面的美觀程度，后端也能利用更多的時(shí)間開發(fā)出可用性高、性能好的系統(tǒng)。同時(shí)，在后端服務(wù)器暫停時(shí)，前端服務(wù)器可正常訪問，只是沒有后端提供數(shù)據(jù)，增強(qiáng)了用戶的體驗(yàn)感。應(yīng)用JavaScript代碼對(duì)于保證應(yīng)用程序快速響應(yīng)請(qǐng)求，而不必消耗大量CPU時(shí)間和精力至關(guān)重要。同樣，客戶端代碼表現(xiàn)不佳可能導(dǎo)致用戶將應(yīng)用程序視為無響應(yīng)[5]。所以，前后端分離既能讓前端人員利用更多的時(shí)間提高性能，也能更好地增強(qiáng)用戶的體驗(yàn)感。

（5）降低開發(fā)成本

后端開發(fā)人員開發(fā)出一套后端接口后，可以支持PC端、APP端、微信端、WebApp端等多種前端應(yīng)用程序，并且可以共用一個(gè)數(shù)據(jù)庫，極大地降低了開發(fā)成本。

2.2 ? GIS技術(shù)

前端組件化設(shè)計(jì)思想對(duì)于WebGIS有較好的借鑒意義。由于WebGIS的主要表現(xiàn)顯示為在線地圖，為了增強(qiáng)加載速度和用戶體驗(yàn)感，應(yīng)避免多次刷新地圖頁面，因此包含地圖的單頁面WebGIS成為發(fā)展趨勢(shì)[6]。GIS技術(shù)還包括空間大數(shù)據(jù)技術(shù)?？臻g大數(shù)據(jù)可視化是將計(jì)算機(jī)可視化技術(shù)、二維GIS可視化技術(shù)、三維GIS可視化技術(shù)等相結(jié)合，實(shí)現(xiàn)對(duì)多源、異構(gòu)、海量、動(dòng)態(tài)數(shù)據(jù)的可視化表達(dá)[7]。其分析結(jié)果以熱力圖、格網(wǎng)圖、散點(diǎn)圖、密度圖、OD圖等方式表達(dá)大數(shù)據(jù)空間分析對(duì)象的聚合程度、變化趨勢(shì)和關(guān)聯(lián)關(guān)系等，直觀清晰地展現(xiàn)數(shù)據(jù)內(nèi)含的價(jià)值[8]。

2.3 ? 系統(tǒng)技術(shù)的介紹

2.3.1 ? Vue.js

Vue.js是一套輕量級(jí)的構(gòu)建用戶的漸進(jìn)式框架。Vue聚焦于圖層，是讓開發(fā)人員利用簡單方便的API實(shí)現(xiàn)對(duì)頁面數(shù)據(jù)的綁定和組合的視圖組件，它的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。Vue是在View層（即DOM層）與Model層（即js邏輯層）之間通過ViewModel綁定DOM Listeners與Data Bindings，以實(shí)現(xiàn)雙向數(shù)據(jù)綁定的功能。Vue.js的優(yōu)點(diǎn)是漸進(jìn)式，開發(fā)者可以以script腳本或單獨(dú)創(chuàng)造等不同方式的創(chuàng)造方法逐步引用該組件庫，靈活性極強(qiáng)，而其他大型框架則需自上而下全面引用[9]。

2.3.2 ? Elemen1tui

Elementui是餓了么團(tuán)隊(duì)開發(fā)的一款非常流行的Vue框架，該框架封裝了各種各樣的基于Vue 2.0的組件，用于網(wǎng)頁的快速布局，方便快速開發(fā)功能強(qiáng)大、風(fēng)格統(tǒng)一的頁面。選擇基于Vue.js的組件庫，可以提高系統(tǒng)的兼容性。目前開源組件庫支持Vue 3.0版本，但Vue 3.0版本并不普遍適用，且部分組件不兼容，因此Vue 2.0版本仍是當(dāng)下最流行、種類最多的組件庫。掌握Vue的基礎(chǔ)知識(shí)，以及對(duì)Vue腳手架有一定的了解是學(xué)習(xí)Elementui的基礎(chǔ)。Elementui提供布局容器、按鈕、多選框、輸入框、表單、圖標(biāo)等組件的詳細(xì)代碼，僅需要復(fù)制文本即可使用。它簡單易學(xué)，省去了很多煩瑣的Vue代碼，讓頁面設(shè)計(jì)變得美觀、快捷和簡單。

3 ?基于前后端和GIS技術(shù)的就醫(yī)無憂服務(wù)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)（Design and implementation of a worry-free medical service system based on front-end and back-end and GIS technology）

3.1 ? 系統(tǒng)的架構(gòu)設(shè)計(jì)

開發(fā)者在設(shè)計(jì)系統(tǒng)的時(shí)候，需綜合系統(tǒng)功能性和非功能性兩方面的要求確定開發(fā)規(guī)范，這樣不僅有利于開發(fā)者進(jìn)行模塊化開發(fā)，方便多人協(xié)同開發(fā)，保證開發(fā)進(jìn)度，還方便開發(fā)人員編寫利于閱讀、可維護(hù)的代碼，避免過多人員參與，造成代碼的沖突，可以整體提升開發(fā)的效率[10]。對(duì)Web應(yīng)用來說，客戶端和服務(wù)器端獨(dú)立的架構(gòu)能最大程度地完成前后端解耦。根據(jù)功能分類，服務(wù)器包括前端服務(wù)器和后端服務(wù)器，前端服務(wù)器包括HTML、CSS、JavaScript、圖片等靜態(tài)資源;后端服務(wù)器主要作用于業(yè)務(wù)邏輯，結(jié)合Spring應(yīng)用一些成熟的框架，可以擴(kuò)展功能和均衡負(fù)載[11]。系統(tǒng)架構(gòu)圖如圖1所示。

3.2 ? 前端實(shí)現(xiàn)

雖然學(xué)習(xí)Vue框架和其他相關(guān)js組件需要一定的時(shí)間和精力，但對(duì)開發(fā)功能復(fù)雜的Web前端系統(tǒng)來說，整體使用Vue框架更節(jié)約時(shí)間和精力，因此可以應(yīng)用Vue框架以提高開發(fā)效率和效果[12]。

3.2.1 ? 統(tǒng)計(jì)分析模塊

統(tǒng)計(jì)分析模塊主要分為人流熱度分析、高峰期人流分析，可對(duì)醫(yī)院人流信息進(jìn)行收集分析并進(jìn)行圖形化反饋。

（1）人流動(dòng)態(tài)分析

對(duì)于人流動(dòng)態(tài)分析，地圖以點(diǎn)的大小、顏色表示該區(qū)域內(nèi)人流量的多少，輸入查詢區(qū)域、查詢?nèi)掌诤筒樵儠r(shí)間段可顯示人口流動(dòng)熱力圖，動(dòng)態(tài)展示人流量的變化。通過這種方式可以直觀地看出人流變化規(guī)律，頁面下方采取柱狀圖、雷達(dá)圖等進(jìn)行可視化分析，展示某一區(qū)域內(nèi)人流量最多的十大醫(yī)院，幫助用戶選擇合適醫(yī)院。數(shù)據(jù)可視化的作用是直觀清晰地向用戶傳達(dá)數(shù)據(jù)所表達(dá)的信息，它是數(shù)據(jù)分析或數(shù)據(jù)科學(xué)中的一個(gè)步驟[13]。

（2）高峰期人流分析

對(duì)于高峰期人流分析，可根據(jù)某一醫(yī)院，輸入查詢時(shí)間段，展示在一天之內(nèi)該時(shí)間段內(nèi)醫(yī)院各門診科室的人流量熱力分析圖（地圖以顏色的深淺代表該時(shí)間段內(nèi)人流量的多少，顏色由綠到紅表示客流量由少到多），動(dòng)態(tài)展示人流熱度情況。用戶可直觀清晰地看出人流變化規(guī)律，避免高峰期出行，選擇人流量較少的時(shí)間段排隊(duì)檢查。

3.2.2 ? 查詢分析模塊

查詢分析模塊主要包括空間查詢、屬性查詢、緩沖區(qū)分析、周邊設(shè)施查詢和綜合查詢。

（1）空間查詢

輸入起點(diǎn)位置和終點(diǎn)醫(yī)院可進(jìn)行路線查詢，如圖2所示。

（2）屬性查詢

輸入科室和醫(yī)院等級(jí)，查詢滿足條件的所有醫(yī)院。

（3）緩沖區(qū)分析

輸入緩沖區(qū)半徑，選擇查詢中心，查詢半徑內(nèi)的所有醫(yī)院。當(dāng)鼠標(biāo)懸浮在其中任意一個(gè)紅色標(biāo)記點(diǎn)時(shí)可以看到當(dāng)前醫(yī)院名稱、地址、電話等，點(diǎn)擊右邊詳情可跳轉(zhuǎn)到該醫(yī)院更加詳細(xì)的頁面展示，如圖3所示。

（4）周邊設(shè)施查詢

以當(dāng)前醫(yī)院為中心，查詢一定范圍內(nèi)的所有飯店、學(xué)校、商場(chǎng)、酒店，如圖4所示。

（5）綜合查詢

輸入起始位置和終點(diǎn)醫(yī)院查詢路徑，設(shè)置緩沖區(qū)，查詢以醫(yī)院為中心的周邊設(shè)施如飯店、學(xué)校、商場(chǎng)、酒店等，如圖5所示。

3.2.3 ? 用戶管理模塊

用戶管理模塊包括用戶登錄注冊(cè)，修改賬號(hào)信息，如密碼、手機(jī)號(hào)、昵稱等。

3.3 ? 后端實(shí)現(xiàn)

后端的設(shè)計(jì)主要有用戶管理模塊，包括對(duì)用戶信息進(jìn)行刪除和修改操作、輸入驗(yàn)證碼進(jìn)行驗(yàn)證、用戶登錄、用戶注冊(cè);查詢分析模塊包括實(shí)現(xiàn)對(duì)地圖的瀏覽、放大縮小、添加數(shù)據(jù)、在數(shù)據(jù)庫里進(jìn)行查詢等;統(tǒng)計(jì)分析模塊包括人流模擬器的設(shè)計(jì)，模擬醫(yī)院一天內(nèi)不同時(shí)間段的人流數(shù)據(jù)，傳輸?shù)角岸艘灾鶢顖D、餅圖、折線圖、雷達(dá)圖等方式進(jìn)行展現(xiàn);數(shù)據(jù)庫的設(shè)計(jì)包括醫(yī)院信息表、用戶表、周邊信息表等共七張表。

系統(tǒng)實(shí)現(xiàn)采用Dubbo分布式架構(gòu)框架，并具體使用Spring+Spring MVC+Mybatis這三個(gè)框架進(jìn)行開發(fā)。在數(shù)據(jù)的存儲(chǔ)上，采用MySQL、Redis兩種不同的方式來解決不同的應(yīng)用場(chǎng)景。系統(tǒng)中所有的工程都是基于Maven來搭建的，對(duì)項(xiàng)目進(jìn)行統(tǒng)一規(guī)范的管理。為了提高系統(tǒng)的性能，系統(tǒng)應(yīng)用七牛云云存儲(chǔ)服務(wù)、定時(shí)組件Quartz、靜態(tài)化頁面FreeMarker協(xié)助開發(fā)。

3.4 ? 前后端分離的實(shí)現(xiàn)

前后端利用Ajax進(jìn)行交互，后端提供多個(gè)RESTful API接口，利用JSON格式進(jìn)行數(shù)據(jù)交互。經(jīng)典的Ajax技術(shù)實(shí)現(xiàn)了網(wǎng)頁的局部數(shù)據(jù)刷新，而Axios二次封裝了Ajax，它支持創(chuàng)建XMLHttpRequest、PromiseApi，發(fā)出HTTP請(qǐng)求、攔截請(qǐng)求和響應(yīng)、轉(zhuǎn)換請(qǐng)求和相應(yīng)數(shù)據(jù)、轉(zhuǎn)換JSON數(shù)據(jù)等，Axios插件極好地封裝了Ajax，寫法簡單清晰，方便查詢錯(cuò)誤，也不容易出錯(cuò)[14]。

4 ? 結(jié)論（Conclusion）

本文以就醫(yī)無憂服務(wù)系統(tǒng)為例介紹了前后端分離的基本結(jié)構(gòu)，前端負(fù)責(zé)頁面設(shè)計(jì)、框架搭建等，后端負(fù)責(zé)提供接口，利用Ajax使用JSON數(shù)據(jù)的格式進(jìn)行交互，通過實(shí)踐證明前后端分離在開發(fā)過程中的高效性。同時(shí)，模塊化的開發(fā)方式也讓分工更明確，也使項(xiàng)目有了更高的復(fù)用性和可擴(kuò)展性，提高了編程質(zhì)量，減少了不必要的開發(fā)時(shí)間[15]。本文介紹的一些技術(shù)和工具可幫助開發(fā)人員更好地學(xué)習(xí)前后端交互技術(shù)，并解決與實(shí)踐相關(guān)的問題。傳統(tǒng)的開發(fā)模式都不再適用，當(dāng)前的前后端分離模式也在不斷地更新，以期減少開發(fā)成本，提高開發(fā)效率，這種模式將會(huì)有更加蓬勃的明天。

參考文獻(xiàn)（References）

[1] 戈家龍，吳紅亞，楊保華.基于SSM的前后端分離電商網(wǎng)站的設(shè)計(jì)與實(shí)踐[J].電腦知識(shí)與技術(shù)，2018，14（13）：276-277.

[2] 王鋒，劉俊波.前后端分離模式下的WEB系統(tǒng)集成方案[J].通信技術(shù)，2020，53（09）：2347-2350.

[3] 孟祥雙.前后端分離式WEB應(yīng)用開發(fā)研究[J].電子元器件與信息技術(shù)，2019，3（06）：40-43.

[4] 杜艷美，黃曉芳.面向企業(yè)級(jí)web應(yīng)用的前后端分離開發(fā)模式及實(shí)踐[J].西南科技大學(xué)學(xué)報(bào)，2018，33（02）：83-87.

[6] 李成仁.基于Vue.js的單頁面WebGIS可視化框架研究與實(shí)? ? ? 現(xiàn)[J].地理空間信息，2020，18（05）：7，83-86，98.

[7] 宋關(guān)福，陳勇，羅強(qiáng)，等.GIS基礎(chǔ)軟件技術(shù)體系發(fā)展及展望[J].地球信息科學(xué)學(xué)報(bào)，2021，23（01）：2-15.

[8] 宋關(guān)福，鐘耳順，吳志峰，等.新一代GIS基礎(chǔ)軟件的四大關(guān)鍵技術(shù)[J].測(cè)繪地理信息，2019，44（01）：1-8.

[9] 牛仁騰.基于Vue.js的表單可視化構(gòu)建系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].武漢：華中科技大學(xué)，2019.

[10] 蔡星.網(wǎng)約車平臺(tái)信用體系管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].武漢：華中科技大學(xué)，2019.

[11] 萬青.Web系統(tǒng)前后端分離架構(gòu)中的控制器優(yōu)化[J].科技經(jīng)濟(jì)導(dǎo)刊，2019，27（16）：28-29.

[12] 朱二華.基于Vue.js的Web前端應(yīng)用研究[J].科技與創(chuàng)新，? ? ? ? 2017（20）：119-121.

[13] 劉銘宇.基于Web的數(shù)據(jù)可視化系統(tǒng)設(shè)計(jì)及應(yīng)用[D].北京：北京郵電大學(xué)，2018.

[14] 王志任.基于Vue.js的開發(fā)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[D].廣州：廣東工業(yè)大學(xué)，2018.

[15] 鄒瑞，段華瓊.基于前后端分離技術(shù)的在線商城的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2020，16（26）：231-232，239.

作者簡介：

黃晟祺（2001-），女，本科生.研究領(lǐng)域：GIS工程.

許林瑞（1998-），男，本科生.研究領(lǐng)域：GIS工程.

汪玉笳（2000-），女，本科生.研究領(lǐng)域：GIS工程.

曾 ? 嬡（2000-），女，本科生.研究領(lǐng)域：GIS工程.

李功權(quán)（1971-），男，博士，副教授.研究領(lǐng)域：時(shí)空大數(shù)據(jù)分析.